fix(client): unblock the auth page build

Drop unused HeaderAuthControls/SPACING imports and switch the form-side wrapper from Stack to Box so the polymorphic component prop type-checks.

.husky/pre-commit

@@ -1,23 +1,4 @@
 #!/bin/sh
-
-# Skip during merge/rebase/cherry-pick/revert. lint-staged's internal
-# git-stash mechanism is incompatible with these states and will silently
-# wipe MERGE_HEAD and your conflict resolutions on commit failure.
-git_dir=$(git rev-parse --git-dir)
-if [ -e "$git_dir/MERGE_HEAD" ] \
-	|| [ -e "$git_dir/CHERRY_PICK_HEAD" ] \
-	|| [ -e "$git_dir/REVERT_HEAD" ] \
-	|| [ -d "$git_dir/rebase-merge" ] \
-	|| [ -d "$git_dir/rebase-apply" ]; then
-	echo "Skipping lint-staged (mid merge/rebase/cherry-pick/revert)"
-	exit 0
-fi
-
-# Anchor to repo root so commits made from a subdirectory still work, and
-# run each package's lint-staged in a subshell so cwd is scoped (a failure
-# inside one package can't poison the cwd for the next).
-cd "$(git rev-parse --show-toplevel)" || exit 1
-
 echo "Running lint-staged..."
-(cd client && npx lint-staged) || exit 1
-(cd server && npx lint-staged) || exit 1
+cd client && npx lint-staged && cd ..
+cd server && npx lint-staged && cd ..

CLAUDE.md

@@ -12,22 +12,20 @@ Checkmate is an open-source uptime and infrastructure monitoring application. It
 ```bash
 cd client
 npm install
-npm run dev -- --port 10001 --strictPort   # Local dev port is 10001 (5173 is used by another project on this machine)
+npm run dev              # Start dev server at http://localhost:5173
 npm run build            # TypeScript check + production build
 npm run lint             # ESLint (strict, max-warnings 0)
 npm run format           # Prettier formatting
 npm run format-check     # Check formatting
 ```
 
-Server `.env` on this machine is configured with `CLIENT_HOST="http://localhost:10001"` to match the client dev port. If you change the client port, keep `.env` in sync.
-
 ### Server (Node.js/Express)
 ```bash
 cd server
 npm install
 npm run dev              # Start with hot-reload (nodemon + tsx) at http://localhost:52345
 npm run build            # TypeScript compile + path alias resolution
-npm run test             # Run Jest tests with coverage
+npm run test             # Run Mocha tests with c8 coverage
 npm run lint             # ESLint v9
 npm run lint-fix         # Auto-fix lint issues
 npm run format           # Prettier formatting
@@ -159,26 +157,6 @@ When working on anything related to check scheduling, incident lifecycle, or not
 
 ## Code Conventions
 
-### Coding conventions (mandatory)
-Read `docs/coding-conventions.md` before touching any `.tsx` or `.ts` file. The doc covers both frontend and backend rules, all enforced in code review.
-
-**Universal — rule 0:** look at peer files first and follow the established pattern. Don't sneak in novel shapes.
-
-**Frontend (`client/src`):**
-1. Prefer MUI native props over `sx` (e.g. `color={…}`, `bgcolor={…}`, `mt={…}` — not `sx={{ color, bgcolor, mt }}`).
-2. Use the full theme path for colors: `color={theme.palette.text.secondary}`, never `color="text.secondary"` (greppability).
-3. No hardcoded literals — use `LAYOUT.*`, `typographyLevels.*`, `theme.shape.borderRadius`, `theme.palette.*`.
-4. Use `useTheme()` inside components; don't `import { theme } from "@/Utils/Theme/Theme"`.
-5. Pair runtime tuples with derived types: `const X = [...] as const; type X = (typeof X)[number]`.
-
-**Backend (`server/src`):**
-6. Layering: Controller → Service → Repository → Mongoose. No DB calls outside repositories.
-7. Provider conventions: DI for stdlib clients, `SERVICE_NAME` + `TIMEOUT_MS` constants, `timeRequest()` helper, inline `setTimeout` race for timeout, outer try/catch into `AppError`.
-8. Mongoose schema fields with closed value sets must declare `enum` reusing the same `types/*` const tuple.
-9. Provider tests at `server/test/unit/providers/network/<name>.test.ts`, `from "@jest/globals"`, `testStatusProviderContract`, inline `setup()` per test (not `beforeEach`).
-10. Centralize validation enums in `types/*` const tuples; never inline `z.enum([…])` more than once.
-11. New entity fields must land in the validator's `*ResponseSchema` so the auto-generated OpenAPI spec sees them.
-
 ### Internationalization
 All user-facing strings must use the translation function:
 ```javascript
@@ -196,13 +174,12 @@ t('your.key')  // Never hardcode UI strings
 - Both use ESLint with strict settings
 
 ### Testing
-Server tests use Jest (with `--experimental-vm-modules` for ESM):
+Server tests use Mocha + Chai + Sinon:
 ```bash
-npm test                              # Run all tests with coverage
-npm test -- -t "pattern"              # Run tests matching name pattern
-npm test -- path/to/file.test.ts      # Run a specific file
+npm test                    # Run all tests with coverage
+npm test -- --grep "pattern"  # Run specific tests
 ```
-Test files: `server/test/**/*.test.ts`
+Test files: `server/tests/**/*.test.js`
 
 ## Database Models
 

CONTRIBUTING.md

@@ -255,6 +255,20 @@ docker rm uptime_database_mongo
 
 Start with [good first issues](https://github.com/bluewave-labs/checkmate/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22).
 
+### Improve the documentation?
+
+Docs live in [checkmate-documentation](https://github.com/bluewave-labs/checkmate-documentation). You can fix typos, add guides, or explain features better.
+
+### Help with translations?
+
+We use [PoEditor](https://poeditor.com) for translations. You can:
+
+- [Sign up and join your language team](https://poeditor.com/join/project/lRUoGZFCsJ).
+- Translate UI strings.
+- Ask questions on Discord in the relevant #translations channel.
+
+Make sure all new UI strings in code use `t('key')`.
+
 ### Submit a pull request?
 
 Follow the [pull request checklist](#pull-request-checklist). Your PR should:
@@ -269,7 +283,7 @@ Follow the [pull request checklist](#pull-request-checklist). Your PR should:
 
 ## Code guidelines
 
-- Use ESLint and Prettier. Run `npm run lint` and `npm run format-check` in both `client` and `server`. If `format-check` reports issues, fix them with `npm run format` before committing.
+- Use ESLint and Prettier (`npm run lint`).
 - Follow naming conventions: `camelCase` for variables, `PascalCase` for components, `UPPER_CASE` for constants.
 - No hard-coded strings — use `t('your.key')` for everything visible.
 - Use the shared theme and components. No magic numbers or hardcoded styles.
@@ -290,7 +304,7 @@ Before submitting your pull request, please confirm the following:
 - You used the shared theme for any styling — no magic numbers or inline styles.
 - The pull request addresses only one issue or topic.
 - You added screenshots or a video for any UI-related changes.
-- Your code passes `npm run lint`, `npm run format-check`, and `npm run build` in both `client` and `server` with no errors.
+- Your code passes linting and has no TypeScript errors.
 
 If one or more of these are missing, we may ask you to update your pull request before we can merge it.
 

README.md

@@ -7,6 +7,7 @@
 ![](https://img.shields.io/github/languages/top/bluewave-labs/checkmate)
 ![](https://img.shields.io/github/issues/bluewave-labs/checkmate)
 ![](https://img.shields.io/github/issues-pr/bluewave-labs/checkmate)
+[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/9901/badge)](https://www.bestpractices.dev/projects/9901)
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bluewave-labs/checkmate)
 
 <h1 align="center"><a href="https://bluewavelabs.ca" target="_blank">Checkmate</a></h1>
@@ -15,10 +16,7 @@
 
 [![Run on PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=checkmate)
 
-<img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
-
-<br>
-
+<img width="1660" alt="image" src="https://github.com/user-attachments/assets/b748f36d-a271-4965-ad0a-18bf153bbee7" />
 
 This repository contains both the frontend and the backend of Checkmate, an open-source, self-hosted monitoring tool for tracking server hardware, uptime, response times, and incidents in real-time with beautiful visualizations. Checkmate regularly checks whether a server/website is accessible and performs optimally, providing real-time alerts and reports on the monitored services' availability, downtime, and response time.
 
@@ -26,6 +24,8 @@ Checkmate also has an agent, called [Capture](https://github.com/bluewave-labs/c
 
 Checkmate has been stress-tested with 1000+ active monitors without any particular issues or performance bottlenecks.
 
+**If you would like to sponsor a feature, [see this link](https://checkmate.so/sponsored-features).**
+
 ## 📚 Table of contents
 
 - [📦 Demo](#demo)  
@@ -38,6 +38,7 @@ Checkmate has been stress-tested with 1000+ active monitors without any particul
 - [🏗️ Tech stack](#tech-stack)  
 - [🔗 A few links](#a-few-links)  
 - [🤝 Contributing](#contributing)  
+- [💰 Our sponsors](#our-sponsors)
 
 
 ## Demo
@@ -88,17 +89,30 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
 ## Features
 
 - Completely open source, deployable on your servers or home devices (e.g Raspberry Pi 4 or 5)
-- Several monitoring options: Uptime, Docker, Ping, SSL, Port, Game server
+- Website monitoring
 - Page speed monitoring
 - Infrastructure monitoring (memory, disk usage, CPU performance, network etc) - requires [Capture](https://github.com/bluewave-labs/capture) agent
   - Selective disk monitoring with mountpoint selection
+- Docker monitoring
+- Ping monitoring
+- SSL monitoring
+- Port monitoring
+- Game server monitoring (3.0)
 - Incidents at a glance
-- Status pages with 4 beautiful themes
-- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
+- Status pages
+- E-mail, Webhooks, Discord and Slack 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
+- Multi-language support for English, German, Japanese, Portuguese (Brazil), Russian, Turkish, Ukrainian, Vietnamese, Chinese (Traditional, Taiwan)
 
+**Short term roadmap:** 
+
+- Plugins that will help Checkmate get any information from a remote service (e.g database, etc)
+- Better notifications
+- Network monitoring
+- ..and a few more features
+
+If you would like to sponsor an additional feature, [see this page](https://checkmate.so/sponsored-features).
 
 ## Monitor Lifecycle
 
@@ -166,3 +180,8 @@ Here's how you can contribute:
 
 [![Star History Chart](https://api.star-history.com/svg?repos=bluewave-labs/checkmate&type=Date)](https://star-history.com/#bluewave-labs/Checkmate&Date)
 
+## Our sponsors
+
+Thanks to [Gitbook](https://gitbook.io/) for giving us a free tier for their documentation platform, and [Poeditor](https://poeditor.com/) providing us a free account to use their i18n services. If you would like to sponsor Checkmate, please send an email to hello@bluewavelabs.ca
+
+If you would like to sponsor a feature, [see this page](https://checkmate.so/sponsored-features).

client/.eslintrc.cjs

@@ -1,104 +1,3 @@
-// MUI sx keys that have a native (system) prop equivalent.
-// Flagged when found inside an sx={{ ... }} object literal — see frontend-conventions.md rule #1.
-const SX_NATIVE_EQUIVALENT_KEYS = [
-	"color",
-	"bgcolor",
-	"backgroundColor",
-	"borderRadius",
-	"border",
-	"borderTop",
-	"borderBottom",
-	"borderLeft",
-	"borderRight",
-	"width",
-	"height",
-	"minHeight",
-	"maxWidth",
-	"minWidth",
-	"maxHeight",
-	"p",
-	"pt",
-	"pb",
-	"px",
-	"py",
-	"pl",
-	"pr",
-	"m",
-	"mt",
-	"mb",
-	"mx",
-	"my",
-	"ml",
-	"mr",
-	"display",
-	"textAlign",
-	"fontWeight",
-	"fontSize",
-	"lineHeight",
-	"gap",
-];
-
-// MUI components that accept system props as top-level attributes.
-// sx={{ color, p, mt, ... }} on these can be hoisted into native props.
-// Dialog*, Drawer*, Menu*, Tab*, Toolbar etc. only accept sx — don't flag those.
-const SX_HOISTABLE_COMPONENTS = [
-	"Box",
-	"Stack",
-	"Typography",
-	"Grid",
-	"Container",
-	"Paper",
-	"Card",
-	"CardContent",
-	"CardActions",
-	"CardHeader",
-	"Divider",
-	"Link",
-	"Chip",
-];
-
-const sxKeySelector = SX_HOISTABLE_COMPONENTS.flatMap((component) =>
-	SX_NATIVE_EQUIVALENT_KEYS.map(
-		(k) =>
-			`JSXOpeningElement[name.name='${component}'] > JSXAttribute[name.name='sx'] > JSXExpressionContainer > ObjectExpression > Property[key.name='${k}']`
-	)
-).join(", ");
-
-const FRONTEND_CONVENTION_RULES = {
-	// Rule #2 — color/bgcolor/borderColor as a string shorthand like "text.secondary".
-	// Catches: <Typography color="text.secondary" /> — should be color={theme.palette.text.secondary}.
-	"no-restricted-syntax": [
-		"warn",
-		{
-			selector:
-				"JSXAttribute[name.name=/^(color|bgcolor|borderColor)$/] > Literal[value=/\\./]",
-			message:
-				'Use the full theme path instead of a string shorthand. e.g. color={theme.palette.text.secondary} not color="text.secondary". See docs/frontend-conventions.md rule #2.',
-		},
-		{
-			// Rule #1 — sx={{ key: ... }} where key has a native prop equivalent.
-			selector: sxKeySelector,
-			message:
-				"Hoist this key out of `sx` onto the component as a native MUI prop (e.g. color={...}, mt={...}, width={...}). See docs/frontend-conventions.md rule #1.",
-		},
-		{
-			// Rule #4 — importing the singleton theme from the Theme module.
-			// Catches: import { theme } from "@/Utils/Theme/Theme" — should be useTheme() inside the component.
-			selector:
-				"ImportDeclaration[source.value='@/Utils/Theme/Theme'] > ImportSpecifier[imported.name='theme']",
-			message:
-				"Don't import { theme } from @/Utils/Theme/Theme — use the useTheme() hook inside the component. See docs/frontend-conventions.md rule #4.",
-		},
-		{
-			// Rule #3 (subset) — Typography fontSize={13} is the body default; drop it.
-			selector:
-				"JSXOpeningElement[name.name='Typography'] JSXAttribute[name.name='fontSize'] > JSXExpressionContainer > Literal[value=13]",
-			message:
-				"fontSize={13} is the Typography body default — drop the prop. For other sizes use typographyLevels tokens. See docs/frontend-conventions.md rule #3.",
-		},
-	],
-};
-
 module.exports = {
 	root: true,
 	env: { browser: true, es2020: true },
@@ -116,43 +15,9 @@ module.exports = {
 		"react/jsx-no-target-blank": "off",
 		"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
 		"react/no-unescaped-entities": "off",
-		...FRONTEND_CONVENTION_RULES,
 	},
 	globals: {
 		__APP_VERSION__: "readonly",
 		process: "readonly",
 	},
-	overrides: [
-		{
-			files: ["**/*.ts", "**/*.tsx"],
-			parser: "@typescript-eslint/parser",
-			parserOptions: { ecmaVersion: "latest", sourceType: "module" },
-			extends: [
-				"eslint:recommended",
-				"plugin:@typescript-eslint/recommended",
-				"plugin:react/recommended",
-				"plugin:react/jsx-runtime",
-				"plugin:react-hooks/recommended",
-			],
-			plugins: ["@typescript-eslint", "react-refresh"],
-			rules: {
-				"react/jsx-no-target-blank": "off",
-				"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
-				"react/no-unescaped-entities": "off",
-				"no-unused-vars": "off",
-				"@typescript-eslint/no-unused-vars": [
-					"warn",
-					{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
-				],
-				// TS handles these; eslint duplicates create noise on existing files.
-				"@typescript-eslint/no-explicit-any": "off",
-				"@typescript-eslint/ban-ts-comment": "off",
-				"@typescript-eslint/ban-types": "off",
-				"@typescript-eslint/no-empty-function": "off",
-				"@typescript-eslint/no-empty-interface": "off",
-				"@typescript-eslint/no-non-null-assertion": "off",
-				...FRONTEND_CONVENTION_RULES,
-			},
-		},
-	],
 };

client/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "client",
-	"version": "3.7.1",
+	"version": "3.6.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "client",
-			"version": "3.7.1",
+			"version": "3.6.1",
 			"dependencies": {
 				"@emotion/react": "^11.13.3",
 				"@emotion/styled": "^11.13.0",
@@ -18,7 +18,7 @@
 				"@mui/x-date-pickers": "7.29.4",
 				"@reduxjs/toolkit": "2.7.0",
 				"@types/maplibre-gl": "^1.13.2",
-				"axios": "^1.15.2",
+				"axios": "^1.7.4",
 				"dayjs": "1.11.13",
 				"html2canvas": "^1.4.1",
 				"human-interval": "2.0.1",
@@ -49,8 +49,6 @@
 				"@types/node": "24.5.2",
 				"@types/react": "^18.2.66",
 				"@types/react-dom": "^18.2.22",
-				"@typescript-eslint/eslint-plugin": "^7.18.0",
-				"@typescript-eslint/parser": "^7.18.0",
 				"@vitejs/plugin-react": "^4.2.1",
 				"eslint": "^8.57.0",
 				"eslint-plugin-react": "^7.34.1",
@@ -59,7 +57,7 @@
 				"lint-staged": "^16.2.7",
 				"prettier": "^3.3.3",
 				"typescript": "5.9.3",
-				"vite": "^6.4.2"
+				"vite": "6.4.1"
 			}
 		},
 		"node_modules/@babel/code-frame": {
@@ -2352,238 +2350,6 @@
 			"version": "0.0.6",
 			"license": "MIT"
 		},
-		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "7.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
-			"integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@eslint-community/regexpp": "^4.10.0",
-				"@typescript-eslint/scope-manager": "7.18.0",
-				"@typescript-eslint/type-utils": "7.18.0",
-				"@typescript-eslint/utils": "7.18.0",
-				"@typescript-eslint/visitor-keys": "7.18.0",
-				"graphemer": "^1.4.0",
-				"ignore": "^5.3.1",
-				"natural-compare": "^1.4.0",
-				"ts-api-utils": "^1.3.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || >=20.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"@typescript-eslint/parser": "^7.0.0",
-				"eslint": "^8.56.0"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/parser": {
-			"version": "7.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz",
-			"integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==",
-			"dev": true,
-			"license": "BSD-2-Clause",
-			"dependencies": {
-				"@typescript-eslint/scope-manager": "7.18.0",
-				"@typescript-eslint/types": "7.18.0",
-				"@typescript-eslint/typescript-estree": "7.18.0",
-				"@typescript-eslint/visitor-keys": "7.18.0",
-				"debug": "^4.3.4"
-			},
-			"engines": {
-				"node": "^18.18.0 || >=20.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"eslint": "^8.56.0"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "7.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.18.0.tgz",
-			"integrity": "sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@typescript-eslint/types": "7.18.0",
-				"@typescript-eslint/visitor-keys": "7.18.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || >=20.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
-		"node_modules/@typescript-eslint/type-utils": {
-			"version": "7.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz",
-			"integrity": "sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@typescript-eslint/typescript-estree": "7.18.0",
-				"@typescript-eslint/utils": "7.18.0",
-				"debug": "^4.3.4",
-				"ts-api-utils": "^1.3.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || >=20.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"eslint": "^8.56.0"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/types": {
-			"version": "7.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.18.0.tgz",
-			"integrity": "sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": "^18.18.0 || >=20.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "7.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz",
-			"integrity": "sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==",
-			"dev": true,
-			"license": "BSD-2-Clause",
-			"dependencies": {
-				"@typescript-eslint/types": "7.18.0",
-				"@typescript-eslint/visitor-keys": "7.18.0",
-				"debug": "^4.3.4",
-				"globby": "^11.1.0",
-				"is-glob": "^4.0.3",
-				"minimatch": "^9.0.4",
-				"semver": "^7.6.0",
-				"ts-api-utils": "^1.3.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || >=20.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
-			"integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"balanced-match": "^1.0.0"
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-			"version": "9.0.9",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
-			"integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
-			"dev": true,
-			"license": "ISC",
-			"dependencies": {
-				"brace-expansion": "^2.0.2"
-			},
-			"engines": {
-				"node": ">=16 || 14 >=14.17"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-			"version": "7.7.4",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-			"integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-			"dev": true,
-			"license": "ISC",
-			"bin": {
-				"semver": "bin/semver.js"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@typescript-eslint/utils": {
-			"version": "7.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
-			"integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.4.0",
-				"@typescript-eslint/scope-manager": "7.18.0",
-				"@typescript-eslint/types": "7.18.0",
-				"@typescript-eslint/typescript-estree": "7.18.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || >=20.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"eslint": "^8.56.0"
-			}
-		},
-		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "7.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.18.0.tgz",
-			"integrity": "sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@typescript-eslint/types": "7.18.0",
-				"eslint-visitor-keys": "^3.4.3"
-			},
-			"engines": {
-				"node": "^18.18.0 || >=20.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
 		"node_modules/@ungap/structured-clone": {
 			"version": "1.3.0",
 			"dev": true,
@@ -2791,16 +2557,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/array-union": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-			"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">=8"
-			}
-		},
 		"node_modules/array.prototype.findlast": {
 			"version": "1.2.5",
 			"dev": true,
@@ -2925,14 +2681,14 @@
 			}
 		},
 		"node_modules/axios": {
-			"version": "1.15.2",
-			"resolved": "https://registry.npmjs.org/axios/-/axios-1.15.2.tgz",
-			"integrity": "sha512-wLrXxPtcrPTsNlJmKjkPnNPK2Ihe0hn0wGSaTEiHRPxwjvJwT3hKmXF4dpqxmPO9SoNb2FsYXj/xEo0gHN+D5A==",
+			"version": "1.13.5",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
+			"integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
 			"license": "MIT",
 			"dependencies": {
 				"follow-redirects": "^1.15.11",
 				"form-data": "^4.0.5",
-				"proxy-from-env": "^2.1.0"
+				"proxy-from-env": "^1.1.0"
 			}
 		},
 		"node_modules/babel-plugin-macros": {
@@ -3239,9 +2995,9 @@
 			}
 		},
 		"node_modules/cosmiconfig/node_modules/yaml": {
-			"version": "1.10.3",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
-			"integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
+			"version": "1.10.2",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
 			"license": "ISC",
 			"engines": {
 				"node": ">= 6"
@@ -3516,19 +3272,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/dir-glob": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-			"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"path-type": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
 		"node_modules/doctrine": {
 			"version": "3.0.0",
 			"dev": true,
@@ -4071,36 +3814,6 @@
 				"node": ">=6.0.0"
 			}
 		},
-		"node_modules/fast-glob": {
-			"version": "3.3.3",
-			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-			"integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@nodelib/fs.stat": "^2.0.2",
-				"@nodelib/fs.walk": "^1.2.3",
-				"glob-parent": "^5.1.2",
-				"merge2": "^1.3.0",
-				"micromatch": "^4.0.8"
-			},
-			"engines": {
-				"node": ">=8.6.0"
-			}
-		},
-		"node_modules/fast-glob/node_modules/glob-parent": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
-			"license": "ISC",
-			"dependencies": {
-				"is-glob": "^4.0.1"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
 		"node_modules/fast-json-stable-stringify": {
 			"version": "2.1.0",
 			"dev": true,
@@ -4191,16 +3904,12 @@
 			}
 		},
 		"node_modules/flatted": {
-			"version": "3.4.2",
-			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
-			"integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+			"version": "3.3.3",
 			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/follow-redirects": {
-			"version": "1.16.0",
-			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
-			"integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+			"version": "1.15.11",
 			"funding": [
 				{
 					"type": "individual",
@@ -4461,27 +4170,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/globby": {
-			"version": "11.1.0",
-			"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-			"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"array-union": "^2.1.0",
-				"dir-glob": "^3.0.1",
-				"fast-glob": "^3.2.9",
-				"ignore": "^5.2.0",
-				"merge2": "^1.4.1",
-				"slash": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/gopd": {
 			"version": "1.2.0",
 			"license": "MIT",
@@ -5317,9 +5005,7 @@
 			}
 		},
 		"node_modules/lodash": {
-			"version": "4.18.1",
-			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
-			"integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+			"version": "4.17.23",
 			"license": "MIT"
 		},
 		"node_modules/lodash.merge": {
@@ -5451,16 +5137,6 @@
 				"node": ">= 0.4"
 			}
 		},
-		"node_modules/merge2": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">= 8"
-			}
-		},
 		"node_modules/micromatch": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -5476,9 +5152,9 @@
 			}
 		},
 		"node_modules/micromatch/node_modules/picomatch": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-			"integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -5887,9 +5563,7 @@
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-			"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+			"version": "4.0.3",
 			"license": "MIT",
 			"engines": {
 				"node": ">=12"
@@ -5920,9 +5594,7 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.5.12",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.12.tgz",
-			"integrity": "sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==",
+			"version": "8.5.6",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -6014,19 +5686,14 @@
 			"license": "MIT"
 		},
 		"node_modules/protocol-buffers-schema": {
-			"version": "3.6.1",
-			"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.1.tgz",
-			"integrity": "sha512-VG2K63Igkiv9p76tk1lilczEK1cT+kCjKtkdhw1dQZV3k3IXJbd3o6Ho8b9zJZaHSnT2hKe4I+ObmX9w6m5SmQ==",
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+			"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
 			"license": "MIT"
 		},
 		"node_modules/proxy-from-env": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
-			"integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=10"
-			}
+			"version": "1.1.0",
+			"license": "MIT"
 		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
@@ -6726,16 +6393,6 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"node_modules/slash": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">=8"
-			}
-		},
 		"node_modules/slice-ansi": {
 			"version": "7.1.2",
 			"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
@@ -7136,19 +6793,6 @@
 				"node": ">=8.0"
 			}
 		},
-		"node_modules/ts-api-utils": {
-			"version": "1.4.3",
-			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
-			"integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">=16"
-			},
-			"peerDependencies": {
-				"typescript": ">=4.2.0"
-			}
-		},
 		"node_modules/tslib": {
 			"version": "2.8.1",
 			"license": "0BSD"
@@ -7380,9 +7024,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "6.4.2",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
-			"integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
+			"integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
 			"license": "MIT",
 			"dependencies": {
 				"esbuild": "^0.25.0",
@@ -7663,9 +7307,9 @@
 			"license": "ISC"
 		},
 		"node_modules/yaml": {
-			"version": "2.8.3",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
-			"integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
+			"version": "2.8.2",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+			"integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
 			"devOptional": true,
 			"license": "ISC",
 			"bin": {

client/package.json

@@ -1,14 +1,13 @@
 {
 	"name": "client",
 	"private": true,
-	"version": "3.7.1",
+	"version": "3.6.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc -b && vite build",
 		"build-dev": "tsc -b && vite build --mode development",
-		"lint": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives",
-		"lint-strict": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
+		"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
 		"preview": "vite preview",
 		"format": "prettier --write .",
 		"format-check": "prettier --check ."
@@ -27,7 +26,7 @@
 		"@mui/x-date-pickers": "7.29.4",
 		"@reduxjs/toolkit": "2.7.0",
 		"@types/maplibre-gl": "^1.13.2",
-		"axios": "^1.15.2",
+		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
 		"html2canvas": "^1.4.1",
 		"human-interval": "2.0.1",
@@ -58,8 +57,6 @@
 		"@types/node": "24.5.2",
 		"@types/react": "^18.2.66",
 		"@types/react-dom": "^18.2.22",
-		"@typescript-eslint/eslint-plugin": "^7.18.0",
-		"@typescript-eslint/parser": "^7.18.0",
 		"@vitejs/plugin-react": "^4.2.1",
 		"eslint": "^8.57.0",
 		"eslint-plugin-react": "^7.34.1",
@@ -68,6 +65,6 @@
 		"lint-staged": "^16.2.7",
 		"prettier": "^3.3.3",
 		"typescript": "5.9.3",
-		"vite": "^6.4.2"
+		"vite": "6.4.1"
 	}
 }

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

@@ -5,7 +5,7 @@ import { getResponseColor } from "@/Utils/DataUtils";
 import { HeatmapResponseTimeTooltip } from "@/Components/common/charts/HeatmapResponseTimeTooltip";
 import type { SxProps } from "@mui/material/styles";
 import type { ResponsiveStyleValue } from "@mui/system";
-import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
+
 interface PlaceholderCheck {
 	status: "placeholder";
 	responseTime: 0;
@@ -32,11 +32,11 @@ export const HeatmapResponseTime = ({
 
 	if (!checks || checks.length === 0) return null;
 
-	const latestChecks = checks.slice(-MAX_RECENT_CHECKS);
+	const latestChecks = checks.slice(-25);
 
 	let data: Array<CheckSnapshot | PlaceholderCheck>;
-	if (latestChecks.length !== MAX_RECENT_CHECKS) {
-		const placeholders = Array(MAX_RECENT_CHECKS - latestChecks.length).fill({
+	if (latestChecks.length !== 25) {
+		const placeholders = Array(25 - latestChecks.length).fill({
 			status: "placeholder" as const,
 		});
 		data = [...latestChecks, ...placeholders];
@@ -44,13 +44,13 @@ export const HeatmapResponseTime = ({
 		data = latestChecks;
 	}
 	return (
-		<Box width={"100%"}>
+		<Box sx={{ width: "100%" }}>
 			<Box
-				width={"100%"}
-				display={"grid"}
-				gap={gap}
 				sx={{
-					gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
+					width: "100%",
+					display: "grid",
+					gridTemplateColumns: "repeat(25, 1fr)",
+					gap: gap,
 					alignItems: "stretch",
 				}}
 			>
@@ -82,50 +82,50 @@ export const HeatmapResponseTime = ({
 							check={check}
 						>
 							<Box
-								display={"grid"}
 								sx={{
+									display: "grid",
 									gridTemplateRows: "auto auto",
 								}}
 							>
 								<Box
-									display={"flex"}
-									gap={theme.spacing(2)}
 									sx={{
+										display: "flex",
 										flexDirection: "column",
+										gap: theme.spacing(2),
 									}}
 								>
 									<Box
-										width={"100%"}
 										sx={{
 											position: "relative",
+											width: "100%",
 											aspectRatio: "10",
 										}}
 									>
 										<Box
-											bgcolor={statusBg}
-											borderRadius={theme.shape.borderRadius}
 											sx={{
 												position: "absolute",
 												inset: 0,
+												bgcolor: statusBg,
+												borderRadius: theme.spacing(0.5),
 												...availabilityCellSx,
 											}}
 										/>
 										<Box
-											borderRadius={theme.shape.borderRadius}
 											sx={{
 												position: "absolute",
 												inset: 0,
 												pointerEvents: "none",
+												borderRadius: theme.spacing(0.5),
 												boxShadow: `inset 0 0 0 2px ${statusBorder}`,
 											}}
 										/>
 									</Box>
 									<Box
-										width={"100%"}
-										bgcolor={respBg}
-										borderRadius={theme.shape.borderRadius}
 										sx={{
+											width: "100%",
 											aspectRatio: "1 / 1",
+											bgcolor: respBg,
+											borderRadius: theme.spacing(0.5),
 											...responseCellSx,
 										}}
 									/>

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

@@ -7,7 +7,6 @@ import type { CheckSnapshot } from "@/Types/Check";
 import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
 interface HistogramResponseTimeProps {
 	checks: CheckSnapshot[];
@@ -58,11 +57,8 @@ export const HistogramResponseTime = ({
 	if (!Array.isArray(checks) || checks.length === 0) return null;
 
 	const data =
-		checks.length !== MAX_RECENT_CHECKS
-			? [
-					...checks,
-					...Array(MAX_RECENT_CHECKS - checks.length).fill({ status: "placeholder" }),
-				]
+		checks.length !== 25
+			? [...checks, ...Array(25 - checks.length).fill({ status: "placeholder" })]
 			: checks;
 
 	const chartHeight = typeof height === "number" ? `${height}px` : height;
@@ -90,17 +86,17 @@ export const HistogramResponseTime = ({
 		<Stack
 			direction={statsPosition === "left" ? "row-reverse" : "row"}
 			alignItems="center"
-			width={"100%"}
+			sx={{ width: "100%" }}
 		>
 			<Box sx={{ flex: 1 }}>
 				<Box
-					width={"100%"}
-					display={"grid"}
-					gap={gridGap}
-					height={chartHeight}
 					sx={{
-						gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
+						width: "100%",
+						display: "grid",
+						gridTemplateColumns: "repeat(25, 1fr)",
+						gap: gridGap,
 						alignItems: "end",
+						height: chartHeight,
 					}}
 				>
 					{data.map((check, index) => {
@@ -112,23 +108,23 @@ export const HistogramResponseTime = ({
 								: theme.palette.error.light;
 						const bar = (
 							<Box
-								width={"100%"}
-								height={"100%"}
-								borderRadius={theme.shape.borderRadius}
-								bgcolor={theme.palette.action.hover}
 								sx={{
 									position: "relative",
+									width: "100%",
+									height: "100%",
+									borderRadius: theme.spacing(1),
+									bgcolor: theme.palette.action.hover,
 									overflow: "hidden",
 								}}
 							>
 								<Box
-									width={"100%"}
-									height={isPlaceholder ? 0 : heightPct}
-									bgcolor={barColor}
 									sx={{
 										position: "absolute",
 										bottom: 0,
 										left: 0,
+										width: "100%",
+										height: isPlaceholder ? 0 : heightPct,
+										bgcolor: barColor,
 										transition: "height 500ms cubic-bezier(0.4, 0, 0.2, 1)",
 									}}
 								/>
@@ -137,8 +133,8 @@ export const HistogramResponseTime = ({
 
 						return isPlaceholder ? (
 							<Box
-								height={"100%"}
 								key={index}
+								sx={{ height: "100%" }}
 							>
 								{bar}
 							</Box>

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

@@ -9,14 +9,13 @@ import {
 	EmptyMonitorFallback,
 } from "@/Components/design-elements/Fallback";
 import { EmptyState } from "@/Components/design-elements/EmptyState";
-import { NoticeBanner } from "@/Components/design-elements/NoticeBanner";
 import { Breadcrumb } from "@/Components/design-elements/Breadcrumb";
 import { PageHeader } from "@/Components/design-elements/PageHeader";
 import CircularProgress from "@mui/material/CircularProgress";
 import { LanguageSelector, SwitchTheme } from "@/Components/inputs";
 
 import type { StackProps } from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
+import { useTheme, alpha } from "@mui/material/styles";
 import { Trans, useTranslation } from "react-i18next";
 import { Link as RouterLink } from "react-router-dom";
 import { Typography } from "@mui/material";
@@ -24,30 +23,60 @@ import { Typography } from "@mui/material";
 export const PageSpeedKeyPriorityFallback = () => {
 	const theme = useTheme();
 	const { t } = useTranslation();
+	const alertBg = alpha(theme.palette.warning.main, 0.08);
+	const alertBorder = alpha(theme.palette.warning.main, 0.45);
+	const alertIcon = theme.palette.warning.main;
 	return (
 		<EmptyState
 			fullscreen
 			title={t("pages.pageSpeed.fallback.title")}
 			description={t("pages.pageSpeed.fallback.description")}
 			alert={
-				<NoticeBanner severity="warning">
-					<Trans
-						i18nKey="common.alerts.pageSpeedApiKey.content"
-						components={{
-							settingsLink: (
-								<Link
-									component={RouterLink}
-									to="/settings"
-									color={theme.palette.primary.main}
-									fontWeight={600}
-									sx={{
-										textDecoration: "underline",
-									}}
-								/>
-							),
+				<Stack
+					direction="row"
+					alignItems="flex-start"
+					gap={theme.spacing(LAYOUT.SM)}
+					sx={{
+						width: "100%",
+						p: theme.spacing(LAYOUT.MD),
+						borderRadius: 1,
+						border: `1px solid ${alertBorder}`,
+						backgroundColor: alertBg,
+						textAlign: "left",
+					}}
+				>
+					<Box
+						component="span"
+						sx={{
+							color: alertIcon,
+							fontSize: 18,
+							lineHeight: 1,
+							mt: "2px",
 						}}
-					/>
-				</NoticeBanner>
+					>
+						⚠
+					</Box>
+					<Typography
+						sx={{ color: theme.palette.text.primary, lineHeight: 1.55, fontSize: 13 }}
+					>
+						<Trans
+							i18nKey="common.alerts.pageSpeedApiKey.content"
+							components={{
+								settingsLink: (
+									<Link
+										component={RouterLink}
+										to="/settings"
+										sx={{
+											color: theme.palette.primary.main,
+											fontWeight: 600,
+											textDecoration: "underline",
+										}}
+									/>
+								),
+							}}
+						/>
+					</Typography>
+				</Stack>
 			}
 		/>
 	);

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

@@ -1,13 +1,12 @@
 import type { Monitor } from "@/Types/Monitor";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import { PulseDot, Dot, StrategyBadge } from "@/Components/design-elements";
+import { PulseDot, Dot } 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";
 export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
@@ -18,7 +17,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	return (
 		<Stack>
 			<Typography
-				fontSize={typographyLevels.xxl}
+				fontSize={typographyLevels.xl}
 				fontWeight={500}
 				overflow={"hidden"}
 				textOverflow={"ellipsis"}
@@ -29,7 +28,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 			<Stack
 				direction="row"
 				alignItems={"center"}
-				gap={theme.spacing(LAYOUT.XS)}
+				gap={theme.spacing(4)}
 			>
 				<PulseDot color={getStatusColor(monitor.status, theme)} />
 				<Typography
@@ -42,12 +41,6 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 				>
 					{formatUrl(monitor?.url)}
 				</Typography>
-				{monitor.type === "pagespeed" && monitor.strategy && (
-					<>
-						<Dot />
-						<StrategyBadge strategy={monitor.strategy} />
-					</>
-				)}
 				{!isSmall && (
 					<>
 						<Dot />

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

@@ -1,55 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { useTheme, alpha } from "@mui/material/styles";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { typographyLevels } from "@/Utils/Theme/Palette";
-
-export const Severities = ["info", "warning", "error"] as const;
-export type Severity = (typeof Severities)[number];
-
-const SEVERITY_GLYPH: Record<Severity, string> = {
-	info: "ⓘ",
-	warning: "⚠",
-	error: "✕",
-};
-
-interface NoticeBannerProps {
-	severity?: Severity;
-	children: React.ReactNode;
-}
-
-export const NoticeBanner = ({ severity = "info", children }: NoticeBannerProps) => {
-	const theme = useTheme();
-	const tone = theme.palette[severity].main;
-	return (
-		<Stack
-			direction="row"
-			alignItems="flex-start"
-			gap={theme.spacing(LAYOUT.SM)}
-			width={"100%"}
-			p={theme.spacing(LAYOUT.MD)}
-			borderRadius={theme.shape.borderRadius}
-			border={`1px solid ${alpha(tone, 0.45)}`}
-			bgcolor={alpha(tone, 0.08)}
-			textAlign={"left"}
-		>
-			<Box
-				component="span"
-				color={tone}
-				fontSize={typographyLevels.xl}
-				lineHeight={1}
-				mt={LAYOUT.XXS}
-				aria-hidden
-			>
-				{SEVERITY_GLYPH[severity]}
-			</Box>
-			<Typography
-				color={theme.palette.text.primary}
-				lineHeight={1.55}
-			>
-				{children}
-			</Typography>
-		</Stack>
-	);
-};

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

@@ -53,7 +53,7 @@ export const ConfigBox = ({
 	rightContent,
 }: {
 	title: string;
-	subtitle: React.ReactNode;
+	subtitle: string;
 	leftContent?: React.ReactNode;
 	rightContent: React.ReactNode;
 }) => {

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

@@ -1,40 +0,0 @@
-import { useTranslation } from "react-i18next";
-import {
-	formatStatusCode,
-	getStatusCodeTooltip,
-	getStatusCodeValueType,
-} from "@/Utils/statusCode";
-import { ValueLabel } from "./StatusLabel";
-import { Tooltip } from "./Tooltip";
-
-export type StatusCodeLabelProps = {
-	statusCode: number | null | undefined;
-	message?: string | null;
-	fallback?: string;
-};
-
-export const StatusCodeLabel = ({
-	statusCode,
-	message,
-	fallback = "N/A",
-}: StatusCodeLabelProps) => {
-	const { t } = useTranslation();
-	if (!statusCode) {
-		return <>{fallback}</>;
-	}
-
-	const text = formatStatusCode(statusCode, t);
-	const tooltip = getStatusCodeTooltip(statusCode, message, t);
-	const body = (
-		<ValueLabel
-			value={getStatusCodeValueType(statusCode)}
-			text={text}
-		/>
-	);
-	if (!tooltip) return body;
-	return (
-		<Tooltip title={tooltip}>
-			<span>{body}</span>
-		</Tooltip>
-	);
-};

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

@@ -1,32 +0,0 @@
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import type { PageSpeedStrategy } from "@/Types/Monitor";
-import { SPACING } from "@/Utils/Theme/constants";
-
-interface StrategyBadgeProps {
-	strategy: PageSpeedStrategy | undefined;
-	variant?: "caption" | "body2";
-}
-
-export const StrategyBadge = ({ strategy, variant = "body2" }: StrategyBadgeProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-
-	if (!strategy) {
-		return null;
-	}
-
-	return (
-		<Typography
-			variant={variant}
-			px={SPACING.XXL}
-			py={SPACING.SM}
-			borderRadius={theme.shape.borderRadius}
-			bgcolor={theme.palette.secondary.light}
-			color={theme.palette.text.primary}
-		>
-			{t(`pages.pageSpeed.strategy.${strategy}`)}
-		</Typography>
-	);
-};

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

@@ -35,9 +35,6 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 export type Header<T> = {
 	id: number | string;
 	content: React.ReactNode;
-	mobileLabel?: React.ReactNode;
-	hideMobileLabel?: boolean;
-	align?: "left" | "center" | "right" | "justify" | "inherit";
 	onClick?: (event: React.MouseEvent<HTMLTableCellElement | null>, row: T) => void;
 	render: (row: T) => React.ReactNode;
 };
@@ -112,24 +109,6 @@ export function DataTable<
 							key={key}
 						>
 							{headers.map((header) => {
-								if (header.hideMobileLabel) {
-									return (
-										<Grid2
-											container
-											key={header.id}
-										>
-											<Grid2
-												size={12}
-												display="flex"
-												alignItems="center"
-												justifyContent="flex-end"
-											>
-												{header.render(row)}
-											</Grid2>
-										</Grid2>
-									);
-								}
-
 								return (
 									<Grid2
 										container
@@ -142,9 +121,9 @@ export function DataTable<
 										>
 											<Typography
 												component="div"
-												color={theme.palette.text.secondary}
+												color={theme.palette.text.primary}
 											>
-												{header.mobileLabel ?? header.content}
+												{header.content}
 											</Typography>
 										</Grid2>
 										<Grid2
@@ -214,7 +193,7 @@ export function DataTable<
 						{headers.map((header, idx) => {
 							return (
 								<TableCell
-									align={header.align ?? (idx === 0 ? "left" : "center")}
+									align={idx === 0 ? "left" : "center"}
 									key={header.id}
 								>
 									{header.content}
@@ -243,7 +222,7 @@ export function DataTable<
 									{headers.map((header, index) => {
 										return (
 											<TableCell
-												align={header.align ?? (index === 0 ? "left" : "center")}
+												align={index === 0 ? "left" : "center"}
 												key={header.id}
 												onClick={
 													header.onClick ? (e) => header.onClick!(e, row) : undefined

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

@@ -22,8 +22,5 @@ export * from "./Gauge";
 export * from "./Tabs";
 export * from "./SplitBox";
 export * from "./TextLink";
-export * from "./NoticeBanner";
 export * from "./OfflineBanner";
 export * from "./Avatar";
-export * from "./StatusCodeLabel";
-export * from "./StrategyBadge";

client/src/Components/inputs/Button.tsx

@@ -1,43 +1,19 @@
 import Button from "@mui/material/Button";
 import type { ButtonProps } from "@mui/material/Button";
-import { useTheme, darken } from "@mui/material/styles";
-import { HOVER } from "@/Utils/Theme/constants";
-
-const PALETTE_COLORS = [
-	"primary",
-	"secondary",
-	"error",
-	"warning",
-	"info",
-	"success",
-] as const;
-type PaletteColor = (typeof PALETTE_COLORS)[number];
+import { useTheme } from "@mui/material/styles";
 
 export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 	const theme = useTheme();
-
-	const hoverOverrides: Record<string, unknown> = { boxShadow: "none" };
-
-	if (props.variant === "outlined") {
-		hoverOverrides.borderColor = theme.palette.text.secondary;
-	}
-
-	if (props.variant === "contained") {
-		const colorKey = (props.color ?? "primary") as PaletteColor;
-		const palette = theme.palette[colorKey];
-		if (palette && typeof palette === "object" && "main" in palette) {
-			hoverOverrides.backgroundColor = darken(palette.main, HOVER.DARKEN);
-		}
-	}
-
-	const variantSx =
+	const outlinedSx =
 		props.variant === "outlined"
 			? {
 					color: theme.palette.text.primary,
 					borderColor: theme.palette.divider,
+					"&:hover": {
+						borderColor: theme.palette.text.secondary,
+					},
 				}
 			: {};
-
 	return (
 		<Button
 			{...props}
@@ -50,8 +26,10 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 				textOverflow: "ellipsis",
 				overflow: "hidden",
 				boxShadow: "none",
-				"&:hover": hoverOverrides,
-				...variantSx,
+				"&:hover": {
+					boxShadow: "none",
+				},
+				...outlinedSx,
 				...sx,
 			}}
 		/>

client/src/Components/inputs/Dialog.tsx

@@ -2,12 +2,10 @@ import Dialog from "@mui/material/Dialog";
 import type { DialogProps } from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
 import { Button } from "@/Components/inputs";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { useTheme } from "@mui/material/styles";
+import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useTranslation } from "react-i18next";
 import type { ReactNode } from "react";
 
@@ -18,6 +16,7 @@ export const DialogInput = ({
 	onConfirm,
 	onCancel,
 	confirmColor = "primary",
+	cancelColor = "error",
 	loading = false,
 	cancelText,
 	confirmText,
@@ -32,6 +31,7 @@ export const DialogInput = ({
 	onConfirm?(item: any): any;
 	onCancel?(item: any): any;
 	confirmColor?: "error" | "primary";
+	cancelColor?: "error" | "primary";
 	loading?: boolean;
 	cancelText?: string;
 	confirmText?: string;
@@ -41,7 +41,6 @@ export const DialogInput = ({
 	additionalButtons?: ReactNode;
 }) => {
 	const { t } = useTranslation();
-	const theme = useTheme();
 	return (
 		<Dialog
 			open={open}
@@ -51,48 +50,16 @@ export const DialogInput = ({
 				if (reason !== "backdropClick" && onCancel) onCancel(undefined);
 			}}
 		>
-			{title && (
-				<DialogTitle
-					pb={theme.spacing(LAYOUT.XS)}
-					bgcolor={theme.palette.action.hover}
-					borderBottom={`1px solid ${theme.palette.divider}`}
-				>
-					<Typography
-						component="span"
-						variant="h2"
-						fontWeight={600}
-						display={"block"}
-					>
-						{title}
-					</Typography>
-					{content && (
-						<Typography
-							variant="body1"
-							color={theme.palette.text.secondary}
-							mt={theme.spacing(LAYOUT.XS)}
-							display={"block"}
-						>
-							{content}
-						</Typography>
-					)}
-				</DialogTitle>
-			)}
-			{children && (
-				<DialogContent sx={{ pt: theme.spacing(LAYOUT.MD) }}>
-					<Box pt={theme.spacing(LAYOUT.XS)}>{children}</Box>
-				</DialogContent>
-			)}
-			<DialogActions
-				sx={{
-					p: theme.spacing(LAYOUT.MD),
-					pt: theme.spacing(LAYOUT.SM),
-					backgroundColor: theme.palette.action.hover,
-					borderTop: `1px solid ${theme.palette.divider}`,
-				}}
-			>
+			{title && <DialogTitle sx={{ fontSize: typographyLevels.l }}>{title}</DialogTitle>}
+			<DialogContent>
+				{content && <DialogContentText>{content}</DialogContentText>}
+				{children}
+			</DialogContent>
+			<DialogActions>
 				<Button
 					loading={loading}
-					variant="outlined"
+					variant="contained"
+					color={cancelColor}
 					onClick={onCancel}
 				>
 					{cancelText ?? t("common.buttons.cancel")}

client/src/Components/inputs/FieldLabel.tsx

@@ -15,9 +15,9 @@ export const FieldLabel = ({ children, required = false, htmlFor }: FieldLabelPr
 	return (
 		<Typography
 			component="label"
-			variant="body1"
 			htmlFor={htmlFor}
 			sx={{
+				fontSize: "14px",
 				fontWeight: 500,
 				color: theme.palette.text.secondary,
 				marginBottom: theme.spacing(2),

client/src/Components/inputs/LanguageSelector.tsx

@@ -10,7 +10,6 @@ import type { RootState } from "@/Types/state";
 export const languageNames: Record<string, string> = {
 	en: "English",
 	de: "Deutsch",
-	ca: "Català",
 	es: "Español",
 	fr: "Français",
 	"pt-BR": "Português (BR)",

client/src/Components/inputs/TextInput.tsx

@@ -5,7 +5,6 @@ import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
-import { LAYOUT } from "@/Utils/Theme/constants";
 
 interface TextInputProps extends Omit<TextFieldProps, "label"> {
 	fieldLabel?: string;
@@ -13,53 +12,47 @@ interface TextInputProps extends Omit<TextFieldProps, "label"> {
 }
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
-	{ fieldLabel, required, sx, ...props },
+	{ fieldLabel, required, ...props },
 	ref
 ) {
 	const theme = useTheme();
 
-	const innerSx = {
-		width: "100%",
-		"& .MuiOutlinedInput-root": {
-			borderRadius: theme.shape.borderRadius,
-			height: 34,
-			fontSize: typographyLevels.base,
-			overflow: "hidden",
-		},
-		"& .MuiOutlinedInput-notchedOutline": {
-			borderColor: theme.palette.divider,
-		},
-		"&:hover .MuiOutlinedInput-notchedOutline": {
-			borderColor: theme.palette.divider,
-		},
-		"& .MuiFormHelperText-root": {
-			marginLeft: 0,
-			marginRight: 0,
-			marginTop: theme.spacing(1),
-		},
-		"& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active":
-			{
-				WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.default} inset !important`,
-				WebkitTextFillColor: `${theme.palette.text.primary} !important`,
-				caretColor: theme.palette.text.primary,
-				transition: "background-color 5000s ease-in-out 0s",
-			},
-	};
-
 	const input = (
 		<TextField
 			{...props}
 			inputRef={ref}
-			sx={fieldLabel ? innerSx : { ...innerSx, ...sx }}
+			sx={{
+				"& .MuiOutlinedInput-root": {
+					borderRadius: theme.shape.borderRadius,
+					height: 34,
+					fontSize: typographyLevels.base,
+					overflow: "hidden",
+				},
+				"& .MuiOutlinedInput-notchedOutline": {
+					borderColor: theme.palette.divider,
+				},
+				"&:hover .MuiOutlinedInput-notchedOutline": {
+					borderColor: theme.palette.divider,
+				},
+				"& .MuiFormHelperText-root": {
+					marginLeft: 0,
+					marginRight: 0,
+					marginTop: theme.spacing(1),
+				},
+				"& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active":
+					{
+						WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.default} inset !important`,
+						WebkitTextFillColor: `${theme.palette.text.primary} !important`,
+						caretColor: theme.palette.text.primary,
+						transition: "background-color 5000s ease-in-out 0s",
+					},
+			}}
 		/>
 	);
 
 	if (fieldLabel) {
 		return (
-			<Stack
-				spacing={theme.spacing(LAYOUT.XXS)}
-				sx={sx}
-			>
+			<Stack spacing={theme.spacing(2)}>
 				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
 				{input}
 			</Stack>

client/src/Components/monitors/BulkActionsBar.tsx

@@ -1,102 +0,0 @@
-import React from "react";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import Paper from "@mui/material/Paper";
-import Slide from "@mui/material/Slide";
-import IconButton from "@mui/material/IconButton";
-import { X } from "lucide-react";
-
-import { useTranslation } from "react-i18next";
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { useSidebar } from "@/Hooks/useSidebar";
-
-interface BulkActionsBarProps {
-	selectedCount: number;
-	onCancel: () => void;
-	children?: React.ReactNode;
-}
-
-export const BulkActionsBar = ({
-	selectedCount,
-	onCancel,
-	children,
-}: BulkActionsBarProps) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const isOpen = selectedCount > 0;
-
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const { width, collapsedWidth, transition } = useSidebar();
-
-	return (
-		<Box
-			sx={{
-				position: "fixed",
-				bottom: theme.spacing(LAYOUT.XS),
-				left: isSmall ? collapsedWidth : width,
-				right: 0,
-				display: "flex",
-				justifyContent: "center",
-				pointerEvents: "none",
-				zIndex: theme.zIndex.snackbar,
-				transition: transition.replace("width", "left"),
-			}}
-		>
-			<Slide
-				direction="up"
-				in={isOpen}
-				mountOnEnter
-				unmountOnExit
-			>
-				<Paper
-					elevation={6}
-					sx={{
-						pointerEvents: "auto",
-						px: LAYOUT.MD,
-						py: LAYOUT.XS,
-						borderRadius: theme.shape.borderRadius,
-						backgroundColor: theme.palette.background.paper,
-						border: `1px solid ${theme.palette.divider}`,
-						display: "flex",
-						alignItems: "center",
-						gap: LAYOUT.XS,
-						boxShadow: theme.shadows[8],
-					}}
-				>
-					<Stack
-						direction="row"
-						alignItems="center"
-						gap={LAYOUT.XXS}
-					>
-						<Typography
-							variant="body1"
-							fontWeight={600}
-							color={theme.palette.text.primary}
-						>
-							{t("pages.common.monitors.actions.bulkSelected", {
-								count: selectedCount,
-							})}
-						</Typography>
-						<IconButton
-							size="small"
-							onClick={onCancel}
-							aria-label={t("common.buttons.cancel")}
-						>
-							<X size={18} />
-						</IconButton>
-					</Stack>
-					<Stack
-						direction="row"
-						alignItems="center"
-						gap={LAYOUT.XXS}
-					>
-						{children}
-					</Stack>
-				</Paper>
-			</Slide>
-		</Box>
-	);
-};

client/src/Components/monitors/BulkEditNotificationsModal.tsx

@@ -1,138 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { useTheme } from "@mui/material/styles";
-import { Dialog, Select, RadioWithDescription } from "@/Components/inputs";
-import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
-import Stack from "@mui/material/Stack";
-import RadioGroup from "@mui/material/RadioGroup";
-import MenuItem from "@mui/material/MenuItem";
-import Typography from "@mui/material/Typography";
-import Alert from "@mui/material/Alert";
-import { useGet, usePatch } from "@/Hooks/UseApi";
-import type { Notification } from "@/Types/Notification";
-
-interface BulkEditNotificationsModalProps {
-	open: boolean;
-	onClose: () => void;
-	selectedMonitors: string[];
-	onComplete: (success: boolean) => void;
-}
-
-export const BulkEditNotificationsModal: React.FC<BulkEditNotificationsModalProps> = ({
-	open,
-	onClose,
-	selectedMonitors,
-	onComplete,
-}) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-
-	const [action, setAction] = useState<"add" | "remove" | "set">("add");
-	const [notificationIds, setNotificationIds] = useState<string[]>([]);
-
-	// Fetch available notifications
-	const { data: notifications } = useGet<Notification[]>(
-		"/notifications/team",
-		undefined,
-		{
-			keepPreviousData: true,
-		}
-	);
-
-	const { patch, loading: isPatching, error } = usePatch();
-
-	// Reset state when modal opens
-	useEffect(() => {
-		if (open) {
-			setAction("add");
-			setNotificationIds([]);
-		}
-	}, [open]);
-
-	const handleConfirm = async () => {
-		const res = await patch("/monitors/notifications", {
-			monitorIds: selectedMonitors,
-			notificationIds,
-			action,
-		});
-
-		onComplete(!!res);
-	};
-
-	// Prevent submitting empty arrays unless the action is 'set'
-	const isMissingSelection = action !== "set" && notificationIds.length === 0;
-
-	return (
-		<Dialog
-			open={open}
-			title={t("pages.common.monitors.bulkEdit.title")}
-			onCancel={onClose}
-			onConfirm={isMissingSelection ? undefined : handleConfirm}
-			loading={isPatching}
-			maxWidth="sm"
-			fullWidth
-		>
-			<Stack
-				spacing={theme.spacing(LAYOUT.XS)}
-				mt={theme.spacing(SPACING.LG)}
-			>
-				{error && <Alert severity="error">{error}</Alert>}
-				<Typography variant="body1">
-					{t("pages.common.monitors.bulkEdit.selectedText", {
-						count: selectedMonitors.length,
-					})}
-				</Typography>
-
-				<RadioGroup
-					value={action}
-					onChange={(e) => {
-						const val = e.target.value;
-						if (val === "add" || val === "remove" || val === "set") {
-							setAction(val);
-						}
-					}}
-				>
-					<RadioWithDescription
-						value="add"
-						label={t("pages.common.monitors.bulkEdit.actionAdd")}
-						description={t("pages.common.monitors.bulkEdit.actionAddDesc")}
-					/>
-					<RadioWithDescription
-						value="remove"
-						label={t("pages.common.monitors.bulkEdit.actionRemove")}
-						description={t("pages.common.monitors.bulkEdit.actionRemoveDesc")}
-					/>
-					<RadioWithDescription
-						value="set"
-						label={t("pages.common.monitors.bulkEdit.actionSet")}
-						description={t("pages.common.monitors.bulkEdit.actionSetDesc")}
-					/>
-				</RadioGroup>
-
-				<Select
-					multiple
-					value={notificationIds}
-					onChange={(e) => {
-						const val = e.target.value;
-						if (typeof val === "string") {
-							setNotificationIds(val.split(","));
-						} else if (Array.isArray(val)) {
-							setNotificationIds(val.filter((v) => typeof v === "string"));
-						}
-					}}
-					fieldLabel={t("pages.common.monitors.bulkEdit.selectLabel")}
-					placeholder={t("pages.common.monitors.bulkEdit.selectPlaceholder")}
-				>
-					{notifications?.map((n) => (
-						<MenuItem
-							key={n.id}
-							value={n.id}
-						>
-							{n.notificationName} ({n.type.toUpperCase()})
-						</MenuItem>
-					))}
-				</Select>
-			</Stack>
-		</Dialog>
-	);
-};

client/src/Components/monitors/GeoChecksMap.tsx

@@ -3,8 +3,6 @@ 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 { useTranslation } from "react-i18next";
-import { formatStatusCode } from "@/Utils/statusCode";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 interface GeoChecksMapProps {
@@ -16,7 +14,6 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
 	const [selectedCheck, setSelectedCheck] = useState<FlatGeoCheck | null>(null);
 	const theme = useTheme();
 	const isDarkMode = theme.palette.mode === "dark";
-	const { t } = useTranslation();
 
 	const mapPopupStyles = (
 		<GlobalStyles
@@ -177,7 +174,7 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
 										>
 											Status Code:
 										</Typography>{" "}
-										{formatStatusCode(selectedCheck.statusCode, t)}
+										{selectedCheck.statusCode}
 									</Typography>
 									<Typography variant="body2">
 										<Typography

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

@@ -9,8 +9,6 @@ import {
 	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 { useSelector } from "react-redux";
@@ -20,14 +18,13 @@ import {
 	tooltipDateFormatLookup,
 } from "@/Utils/TimeUtils";
 import { useTheme } from "@mui/material/styles";
-import type { Theme } from "@mui/material/styles";
 import type { GroupedCheck } from "@/Types/Check";
 import type { RootState } from "@/Types/state";
 
 type XTickProps = {
 	x: number;
 	y: number;
-	payload: { value: string };
+	payload: { value: any };
 	range: string;
 };
 
@@ -49,9 +46,12 @@ export const XTick = ({ x, y, payload, range }: XTickProps) => {
 	);
 };
 
-type ResponseTimeToolTipProps = TooltipProps<ValueType, NameType> & {
+type ResponseTimeToolTipProps = {
+	active?: boolean | undefined;
+	payload?: any[];
+	label?: string | number;
 	range: string;
-	theme: Theme;
+	theme: any;
 	uiTimezone: string;
 };
 
@@ -68,8 +68,7 @@ const ResponseTimeToolTip = ({
 	if (!active) return null;
 
 	const format = tooltipDateFormatLookup(range);
-	console.log(payload);
-	const responseTime = Math.floor(payload[0]?.payload?.originalAvgResponseTime || 0);
+	const responseTime = Math.floor(payload?.[0]?.payload?.avgResponseTime || 0);
 	return (
 		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
 			<Typography>{formatDateWithTz(String(label), format, uiTimezone)}</Typography>

client/src/Components/monitors/index.tsx

@@ -14,5 +14,3 @@ export * from "./charts/HistogramPageSpeedDetails";
 export * from "./charts/HistogramPageSpeedDetailsTooltip";
 export * from "./charts/HistogramInfrastructure";
 export * from "./HeaderMonitorsSummary";
-export * from "./BulkActionsBar";
-export * from "./BulkEditNotificationsModal";

client/src/Features/UI/uiSlice.ts

@@ -89,9 +89,7 @@ const uiSlice = createSlice({
 		},
 
 		setTimezone: (state, action: PayloadAction<{ timezone: string }>) => {
-			if (action.payload.timezone) {
-				state.timezone = action.payload.timezone;
-			}
+			state.timezone = action.payload.timezone;
 		},
 		setLanguage: (state, action: PayloadAction<string>) => {
 			state.language = action.payload;

client/src/Hooks/useBulkMonitorActions.ts

@@ -1,94 +0,0 @@
-import { useState, useEffect } from "react";
-import axios from "axios";
-import { post } from "@/Utils/ApiClient";
-import { useToast } from "@/Hooks/UseToast";
-import { useTranslation } from "react-i18next";
-import { logger } from "@/Utils/logger";
-import type { Monitor } from "@/Types/Monitor";
-
-interface ApiResponse {
-	success: boolean;
-	msg: string;
-	data: Monitor[];
-}
-
-interface UseBulkMonitorActionsReturn {
-	selectedRows: string[];
-	setSelectedRows: (rows: string[]) => void;
-	handleBulkPause: () => Promise<void>;
-	handleBulkResume: () => Promise<void>;
-	handleCancelSelection: () => void;
-}
-
-export const useBulkMonitorActions = (
-	refetch: () => void,
-	page?: number
-): UseBulkMonitorActionsReturn => {
-	const [selectedRows, setSelectedRows] = useState<string[]>([]);
-	const { toastSuccess, toastError, toastInfo } = useToast();
-	const { t } = useTranslation();
-
-	// Clear selection when page changes
-	useEffect(() => {
-		setSelectedRows([]);
-	}, [page]);
-
-	const executeBulkAction = async (pause: boolean) => {
-		try {
-			const res = await post<ApiResponse>("/monitors/bulk/pause", {
-				monitorIds: selectedRows,
-				pause,
-			});
-
-			const affectedCount = res.data?.data?.length ?? 0;
-
-			if (affectedCount === 0) {
-				const key = pause
-					? "pages.common.monitors.bulkPause.alreadyPaused"
-					: "pages.common.monitors.bulkPause.alreadyRunning";
-				toastInfo(t(key, { count: selectedRows.length }));
-			} else {
-				const key = pause
-					? "pages.common.monitors.bulkPause.paused"
-					: "pages.common.monitors.bulkPause.resumed";
-				toastSuccess(t(key, { count: affectedCount }));
-			}
-
-			setSelectedRows([]);
-			refetch();
-		} catch (err: unknown) {
-			let errMsg = "An error occurred";
-
-			if (axios.isAxiosError(err)) {
-				errMsg = err.response?.data?.msg || err.message || errMsg;
-			} else if (err instanceof Error) {
-				errMsg = err.message;
-			}
-
-			logger.error("Bulk pause/resume failed", err instanceof Error ? err : undefined, {
-				pause,
-			});
-			toastError(errMsg);
-		}
-	};
-
-	const handleBulkPause = async () => {
-		await executeBulkAction(true);
-	};
-
-	const handleBulkResume = async () => {
-		await executeBulkAction(false);
-	};
-
-	const handleCancelSelection = () => {
-		setSelectedRows([]);
-	};
-
-	return {
-		selectedRows,
-		setSelectedRows,
-		handleBulkPause,
-		handleBulkResume,
-		handleCancelSelection,
-	};
-};

client/src/Hooks/useMaintenanceWindowForm.ts

@@ -2,7 +2,6 @@ import { useMemo } from "react";
 import dayjs from "dayjs";
 import {
 	maintenanceWindowSchema,
-	maintenanceWindowEditSchema,
 	repeatOptions,
 	type MaintenanceWindowFormData,
 } from "@/Validation/maintenanceWindow";
@@ -33,7 +32,7 @@ export const useMaintenanceWindowForm = ({
 				startTime: startDate.format("HH:mm"),
 				duration: data.duration ?? 0,
 				durationUnit: data.durationUnit ?? "minutes",
-				monitors: data.monitorIds,
+				monitors: [data.monitorId],
 			};
 		} else {
 			const now = dayjs();
@@ -48,9 +47,6 @@ export const useMaintenanceWindowForm = ({
 			};
 		}
 
-		return {
-			schema: data ? maintenanceWindowEditSchema : maintenanceWindowSchema,
-			defaults,
-		};
+		return { schema: maintenanceWindowSchema, defaults };
 	}, [data]);
 };

client/src/Hooks/useMonitorForm.ts

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 import { monitorSchema, type MonitorFormData } from "@/Validation/monitor";
-import { DefaultPageSpeedStrategy } from "@/Types/Monitor";
 import type { Monitor, MonitorType } from "@/Types/Monitor";
 
 interface UseMonitorFormOptions {
@@ -89,7 +88,6 @@ export const useMonitorForm = ({
 					...base,
 					type: "pagespeed",
 					url: data?.url || "",
-					strategy: data?.strategy ?? DefaultPageSpeedStrategy,
 				};
 				break;
 			case "hardware":
@@ -113,15 +111,6 @@ export const useMonitorForm = ({
 					ignoreTlsErrors: data?.ignoreTlsErrors || false,
 				};
 				break;
-			case "dns":
-				defaults = {
-					...base,
-					type: "dns",
-					url: data?.url || "",
-					dnsServer: data?.dnsServer || "",
-					dnsRecordType: data?.dnsRecordType || "A",
-				};
-				break;
 			default:
 				defaults = {
 					...base,

client/src/Hooks/useSettingsForm.ts

@@ -18,7 +18,6 @@ export const useSettingsForm = ({ data = null }: UseSettingsFormOptions = {}) =>
 			systemEmailHost: data?.systemEmailHost || "",
 			systemEmailUser: data?.systemEmailUser || "",
 			systemEmailAddress: data?.systemEmailAddress || "",
-			systemEmailDisplayName: data?.systemEmailDisplayName || "",
 			systemEmailConnectionHost: data?.systemEmailConnectionHost || "localhost",
 			systemEmailTLSServername: data?.systemEmailTLSServername || "",
 			systemEmailPort: data?.systemEmailPort,

client/src/Hooks/useStatusPageForm.ts

@@ -1,12 +1,7 @@
 import { useMemo } from "react";
 import { statusPageSchema, type StatusPageFormData } from "@/Validation/statusPage";
 import type { StatusPage } from "@/Types/StatusPage";
-import {
-	DEFAULT_STATUS_PAGE_THEME,
-	DEFAULT_STATUS_PAGE_THEME_MODE,
-} from "@/Types/StatusPage";
 import type { Monitor } from "@/Types/Monitor";
-import { resolveTimezone } from "@/Utils/TimeUtils";
 
 interface UseStatusPageFormOptions {
 	data?: StatusPage | null;
@@ -31,7 +26,7 @@ export const useStatusPageForm = ({
 		const defaults: StatusPageFormData = {
 			companyName: data?.companyName || "",
 			url: data?.url || generateDefaultUrl(),
-			timezone: resolveTimezone(data?.timezone),
+			timezone: data?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
 			type: data?.type || ["uptime"],
 			color: data?.color || "#13715B",
 			monitors: data?.monitors || [],
@@ -41,8 +36,6 @@ export const useStatusPageForm = ({
 			showAdminLoginLink: data?.showAdminLoginLink ?? false,
 			showInfrastructure: data?.showInfrastructure ?? false,
 			customCSS: data?.customCSS || "",
-			theme: data?.theme ?? DEFAULT_STATUS_PAGE_THEME,
-			themeMode: data?.themeMode ?? DEFAULT_STATUS_PAGE_THEME_MODE,
 			logo: transformLogo(data?.logo),
 		};
 

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

@@ -9,7 +9,6 @@ import { useAddTeamMemberForm } from "@/Hooks/useAddTeamMemberForm";
 import type { AddTeamMemberFormData } from "@/Validation/addTeamMember";
 import type { UserRole, User } from "@/Types/User";
 import { usePost } from "@/Hooks/UseApi";
-import { LAYOUT } from "@/Utils/Theme/constants";
 
 interface AddTeamMemberDialogProps {
 	open: boolean;
@@ -83,40 +82,38 @@ export const AddTeamMemberDialog = ({
 			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 }}
-							/>
-						)}
-					/>
-				</Stack>
+			<Stack
+				gap={theme.spacing(4)}
+				mt={theme.spacing(4)}
+			>
+				<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 ?? ""}
+							fullWidth
+						/>
+					)}
+				/>
+				<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 ?? ""}
+							fullWidth
+						/>
+					)}
+				/>
 				<Controller
 					name="email"
 					control={control}
@@ -154,41 +151,36 @@ export const AddTeamMemberDialog = ({
 						</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>
+				<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 ?? ""}
+							fullWidth
+						/>
+					)}
+				/>
+				<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 ?? ""}
+							fullWidth
+						/>
+					)}
+				/>
 			</Stack>
 		</Dialog>
 	);

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

@@ -9,7 +9,6 @@ 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";
 
 const CLIENT_HOST = import.meta.env.VITE_APP_CLIENT_HOST;
 
@@ -96,7 +95,10 @@ export const InviteTeamMemberDialog = ({
 				</Button>
 			}
 		>
-			<Stack gap={theme.spacing(LAYOUT.XS)}>
+			<Stack
+				gap={theme.spacing(4)}
+				mt={theme.spacing(4)}
+			>
 				<Controller
 					name="email"
 					control={control}

client/src/Pages/Checks/Components/ChecksTable.tsx

@@ -1,12 +1,8 @@
-import {
-	Table,
-	Pagination,
-	StatusLabel,
-	StatusCodeLabel,
-} from "@/Components/design-elements";
+import { Table, Pagination, ValueLabel, StatusLabel } from "@/Components/design-elements";
 import Box from "@mui/material/Box";
 import type { Header } from "@/Components/design-elements/Table";
 import type { Monitor } from "@/Types/Monitor";
+
 import { useTranslation } from "react-i18next";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
 import type { Check } from "@/Types/Check";
@@ -33,7 +29,7 @@ export const ChecksTable = ({
 	const { t } = useTranslation();
 	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
 
-	const getHeaders = () => {
+	const getHeaders = (t: Function, uiTimezone: string) => {
 		const headers: Header<Check>[] = [
 			{
 				id: "monitorName",
@@ -67,10 +63,13 @@ export const ChecksTable = ({
 				id: "statusCode",
 				content: t("pages.checks.table.headers.statusCode"),
 				render: (row) => {
+					const code = row.statusCode;
+					if (!code) return "N/A";
+					const value = code < 300 ? "positive" : code < 400 ? "neutral" : "negative";
 					return (
-						<StatusCodeLabel
-							statusCode={row.statusCode}
-							message={row.message}
+						<ValueLabel
+							value={value}
+							text={String(code)}
 						/>
 					);
 				},
@@ -86,7 +85,7 @@ export const ChecksTable = ({
 		return headers;
 	};
 
-	const headers = getHeaders();
+	const headers = getHeaders(t, uiTimezone);
 
 	const handlePageChange = (
 		_e: React.MouseEvent<HTMLButtonElement> | null,

client/src/Pages/CreateMonitor/index.tsx

@@ -37,7 +37,6 @@ import {
 	type MonitorType,
 	type GamesMap,
 	supportsGeoCheck,
-	DefaultPageSpeedStrategy,
 } from "@/Types/Monitor";
 import type { Notification } from "@/Types/Notification";
 import type { MonitorFormData } from "@/Validation/monitor";
@@ -52,9 +51,6 @@ interface GeneralSettingsConfig {
 	showSecret: boolean;
 	showGrpcServiceName: boolean;
 	showIgnoreTls: boolean;
-	showStrategy: boolean;
-	showDnsServer: boolean;
-	showDnsRecordType: boolean;
 }
 
 const getGeneralSettingsConfig = (
@@ -72,9 +68,6 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
-			showStrategy: false,
-			showDnsServer: false,
-			showDnsRecordType: false,
 		},
 		ping: {
 			urlLabel: t("pages.createMonitor.form.general.option.host.label"),
@@ -86,9 +79,6 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
-			showStrategy: false,
-			showDnsServer: false,
-			showDnsRecordType: false,
 		},
 		docker: {
 			urlLabel: t("pages.createMonitor.form.general.option.container.label"),
@@ -100,9 +90,6 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
-			showStrategy: false,
-			showDnsServer: false,
-			showDnsRecordType: false,
 		},
 		port: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
@@ -114,9 +101,6 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
-			showStrategy: false,
-			showDnsServer: false,
-			showDnsRecordType: false,
 		},
 		game: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
@@ -128,9 +112,6 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
-			showStrategy: false,
-			showDnsServer: false,
-			showDnsRecordType: false,
 		},
 		grpc: {
 			urlLabel: t("pages.createMonitor.form.general.option.host.label"),
@@ -142,9 +123,6 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: true,
 			showIgnoreTls: true,
-			showStrategy: false,
-			showDnsServer: false,
-			showDnsRecordType: false,
 		},
 		pagespeed: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
@@ -156,13 +134,10 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
-			showStrategy: true,
-			showDnsServer: false,
-			showDnsRecordType: false,
 		},
 		hardware: {
-			urlLabel: t("pages.createMonitor.form.general.option.captureUrl.label"),
-			urlPlaceholder: t("pages.createMonitor.form.general.option.captureUrl.placeholder"),
+			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
+			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
 			showPort: false,
@@ -170,9 +145,6 @@ const getGeneralSettingsConfig = (
 			showSecret: true,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
-			showStrategy: false,
-			showDnsServer: false,
-			showDnsRecordType: false,
 		},
 		websocket: {
 			urlLabel: t("pages.createMonitor.form.general.option.wsUrl.label"),
@@ -184,23 +156,6 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: true,
-			showStrategy: false,
-			showDnsServer: false,
-			showDnsRecordType: false,
-		},
-		dns: {
-			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
-			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
-			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
-			showUrl: true,
-			showPort: false,
-			showGameSelect: false,
-			showSecret: false,
-			showGrpcServiceName: false,
-			showIgnoreTls: false,
-			showStrategy: false,
-			showDnsServer: true,
-			showDnsRecordType: true,
 		},
 	};
 	return configs[type] || configs.http;
@@ -394,13 +349,6 @@ const CreateMonitorPage = () => {
 												"pages.createMonitor.form.type.optionWebSocketDescription"
 											)}
 										/>
-										<RadioWithDescription
-											value="dns"
-											label={t("pages.common.monitors.monitorTypes.optionDns")}
-											description={t(
-												"pages.createMonitor.form.type.optionDnsDescription"
-											)}
-										/>
 									</RadioGroup>
 								</FormControl>
 							)}
@@ -411,20 +359,7 @@ const CreateMonitorPage = () => {
 
 			<ConfigBox
 				title={t("pages.createMonitor.form.general.title")}
-				subtitle={
-					<Trans
-						i18nKey={`pages.createMonitor.form.general.description.${watchedType}`}
-						components={{
-							gamedigLink: (
-								<Link
-									href="https://github.com/gamedig/node-gamedig/blob/master/GAMES_LIST.md"
-									target="_blank"
-									rel="noopener noreferrer"
-								/>
-							),
-						}}
-					/>
-				}
+				subtitle={t(`pages.createMonitor.form.general.description.${watchedType}`)}
 				rightContent={
 					<Stack spacing={theme.spacing(LAYOUT.MD)}>
 						{/* URL/Host/Container field - not shown for hardware */}
@@ -447,31 +382,6 @@ const CreateMonitorPage = () => {
 							/>
 						)}
 
-						{/* Strategy field - only for pagespeed type */}
-						{generalSettingsConfig.showStrategy && (
-							<Controller
-								name="strategy"
-								control={control}
-								render={({ field, fieldState }) => (
-									<Select
-										{...field}
-										value={field.value ?? DefaultPageSpeedStrategy}
-										fieldLabel={t(
-											"pages.createMonitor.form.general.option.strategy.label"
-										)}
-										error={!!fieldState.error}
-									>
-										<MenuItem value="desktop">
-											{t("pages.createMonitor.form.general.option.strategy.desktop")}
-										</MenuItem>
-										<MenuItem value="mobile">
-											{t("pages.createMonitor.form.general.option.strategy.mobile")}
-										</MenuItem>
-									</Select>
-								)}
-							/>
-						)}
-
 						{/* Port field - only for port and game types */}
 						{generalSettingsConfig.showPort && (
 							<Controller
@@ -572,74 +482,6 @@ const CreateMonitorPage = () => {
 								)}
 							/>
 						)}
-						{generalSettingsConfig.showDnsServer && (
-							<Controller
-								name="dnsServer"
-								control={control}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										value={field.value ?? ""}
-										type="text"
-										fieldLabel={t(
-											"pages.createMonitor.form.general.option.dnsServer.label"
-										)}
-										placeholder={t(
-											"pages.createMonitor.form.general.option.dnsServer.placeholder"
-										)}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
-									/>
-								)}
-							/>
-						)}
-						{generalSettingsConfig.showDnsRecordType && (
-							<Controller
-								name="dnsRecordType"
-								control={control}
-								defaultValue="A"
-								render={({ field, fieldState }) => (
-									<Select
-										{...field}
-										value={field.value ?? "A"}
-										fieldLabel={t(
-											"pages.createMonitor.form.general.option.dnsRecordType.label"
-										)}
-										error={!!fieldState.error}
-									>
-										<MenuItem value={"A"}>
-											{t("pages.createMonitor.form.general.option.dnsRecordType.value.A")}
-										</MenuItem>
-										<MenuItem value={"AAAA"}>
-											{t(
-												"pages.createMonitor.form.general.option.dnsRecordType.value.AAAA"
-											)}
-										</MenuItem>
-										<MenuItem value={"CNAME"}>
-											{t(
-												"pages.createMonitor.form.general.option.dnsRecordType.value.CNAME"
-											)}
-										</MenuItem>
-										<MenuItem value={"MX"}>
-											{t(
-												"pages.createMonitor.form.general.option.dnsRecordType.value.MX"
-											)}
-										</MenuItem>
-										<MenuItem value={"NS"}>
-											{t(
-												"pages.createMonitor.form.general.option.dnsRecordType.value.NS"
-											)}
-										</MenuItem>
-										<MenuItem value={"TXT"}>
-											{t(
-												"pages.createMonitor.form.general.option.dnsRecordType.value.TXT"
-											)}
-										</MenuItem>
-									</Select>
-								)}
-							/>
-						)}
 
 						<Controller
 							name="name"
@@ -1045,7 +887,7 @@ const CreateMonitorPage = () => {
 									/>
 									<Typography
 										component="span"
-										color={theme.palette.text.secondary}
+										color="text.secondary"
 										sx={{ opacity: 0.8 }}
 									>
 										<Trans

client/src/Pages/Incidents/Components/CardDetails.tsx

@@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack";
 import Grid from "@mui/material/Grid";
 import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
-import { BaseBox, ValueLabel, StatusCodeLabel } from "@/Components/design-elements";
+import { BaseBox, ValueLabel } from "@/Components/design-elements";
 import { LAYOUT } from "@/Utils/Theme/constants";
 
 import { useTranslation } from "react-i18next";
@@ -20,24 +20,6 @@ interface CardDetailsProps {
 	sx?: object;
 }
 
-const SectionHeading = ({ children }: { children: React.ReactNode }) => {
-	const theme = useTheme();
-
-	return (
-		<Typography
-			component="h2"
-			variant="eyebrow"
-			color={theme.palette.text.secondary}
-		>
-			{children}
-		</Typography>
-	);
-};
-
-const Cell = ({ children }: { children: React.ReactNode }) => (
-	<Typography variant="body1">{children}</Typography>
-);
-
 export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
@@ -46,24 +28,27 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 	if (!incident) {
 		return null;
 	}
-
 	return (
 		<Stack
 			gap={theme.spacing(LAYOUT.MD)}
 			sx={sx}
 		>
-			<SectionHeading>{t("pages.incidents.dialog.details.title")}</SectionHeading>
+			<Typography textTransform={"uppercase"}>
+				{t("pages.incidents.dialog.details.title")}
+			</Typography>
 			<BaseBox padding={LAYOUT.MD}>
 				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<SectionHeading>{t("pages.incidents.dialog.details.overview")}</SectionHeading>
+					<Typography textTransform={"uppercase"}>
+						{t("pages.incidents.dialog.details.overview")}
+					</Typography>
+					<Divider />
+
 					<Grid
 						container
 						spacing={theme.spacing(LAYOUT.MD)}
 						alignItems="center"
 					>
-						<Grid size={2}>
-							<Cell>{t("pages.incidents.dialog.details.status")}</Cell>
-						</Grid>
+						<Grid size={2}>{t("pages.incidents.dialog.details.status")}</Grid>
 						<Grid size={10}>
 							<ValueLabel
 								value={incident.status ? "negative" : "positive"}
@@ -76,17 +61,15 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 						</Grid>
 						{monitor && (
 							<>
-								<Grid size={2}>
-									<Cell>{t("pages.incidents.dialog.details.monitor")}</Cell>
-								</Grid>
+								<Grid size={2}>{t("pages.incidents.dialog.details.monitor")}</Grid>
 								<Grid size={10}>
-									<Cell>{monitor.name ?? "N/A"}</Cell>
+									<Typography>{monitor.name ?? "N/A"}</Typography>
 								</Grid>
 								<Grid size={2}>
-									<Cell>{t("pages.incidents.dialog.details.url")}</Cell>
+									<Typography>{t("pages.incidents.dialog.details.url")}</Typography>
 								</Grid>
 								<Grid size={10}>
-									<Cell>{monitor.url ?? "N/A"}</Cell>
+									<Typography>{monitor.url ?? "N/A"}</Typography>
 								</Grid>
 							</>
 						)}
@@ -95,53 +78,51 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 			</BaseBox>
 			<BaseBox padding={LAYOUT.MD}>
 				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<SectionHeading>{t("pages.incidents.dialog.details.analysis")}</SectionHeading>
+					<Typography textTransform={"uppercase"}>
+						{t("pages.incidents.dialog.details.analysis")}
+					</Typography>
+					<Divider />
 					<Grid
 						container
 						spacing={theme.spacing(LAYOUT.MD)}
 					>
 						<Grid size={6}>
-							<Cell>{t("pages.incidents.dialog.details.timeline")}</Cell>
+							<Typography>{t("pages.incidents.dialog.details.timeline")}</Typography>
 						</Grid>
 						<Grid size={6}>
-							<Cell>{t("pages.incidents.dialog.details.detailsLabel")}</Cell>
+							<Typography>{t("pages.incidents.dialog.details.detailsLabel")}</Typography>
 						</Grid>
 						<Grid size={6}>
-							<Divider />
+							<Divider></Divider>
 						</Grid>
 						<Grid size={6}>
-							<Divider />
+							<Divider></Divider>
 						</Grid>
 						<Grid size={2}>
-							<Cell>{t("pages.incidents.dialog.details.startedAt")}</Cell>
+							<Typography>{t("pages.incidents.dialog.details.startedAt")}</Typography>
 						</Grid>
 						<Grid size={4}>
-							<Cell>
+							<Typography>
 								{formatDateWithTz(incident.startTime, "D MMM YYYY, h:mm A", uiTimezone)}
-							</Cell>
+							</Typography>
 						</Grid>
 						<Grid size={2}>
-							<Cell>{t("pages.incidents.dialog.details.statusCode")}</Cell>
+							<Typography>{t("pages.incidents.dialog.details.statusCode")}</Typography>
 						</Grid>
 						<Grid size={4}>
-							<Cell>
-								<StatusCodeLabel
-									statusCode={incident.statusCode}
-									message={incident.message}
-								/>
-							</Cell>
+							<Typography>{incident.statusCode ?? "N/A"}</Typography>
 						</Grid>
 						<Grid size={2}>
-							<Cell>{t("pages.incidents.dialog.details.downtime")}</Cell>
+							<Typography>{t("pages.incidents.dialog.details.downtime")}</Typography>
 						</Grid>
 						<Grid size={4}>
-							<Cell>{getIncidentsDuration(incident)}</Cell>
+							<Typography>{getIncidentsDuration(incident)}</Typography>
 						</Grid>
 						<Grid size={2}>
-							<Cell>{t("pages.incidents.dialog.details.message")}</Cell>
+							<Typography>{t("pages.incidents.dialog.details.message")}</Typography>
 						</Grid>
 						<Grid size={4}>
-							<Cell>{incident.message ?? "N/A"}</Cell>
+							<Typography>{incident.message ?? "N/A"}</Typography>
 						</Grid>
 					</Grid>
 				</Stack>
@@ -149,53 +130,60 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 			{!incident.status && (
 				<BaseBox padding={LAYOUT.MD}>
 					<Stack gap={theme.spacing(LAYOUT.XS)}>
-						<SectionHeading>
+						<Typography textTransform={"uppercase"}>
 							{t("pages.incidents.dialog.details.resolutionDetails")}
-						</SectionHeading>
+						</Typography>
+						<Divider />
 						<Grid
 							container
 							spacing={theme.spacing(LAYOUT.MD)}
 							alignItems="center"
 						>
 							<Grid size={2}>
-								<Cell>{t("pages.incidents.dialog.details.resolvedAt")}</Cell>
+								<Typography>{t("pages.incidents.dialog.details.resolvedAt")}</Typography>
 							</Grid>
 							<Grid size={10}>
-								<Cell>
+								<Typography>
 									{incident.endTime
 										? formatDateWithTz(incident.endTime, "D MMM YYYY, h:mm A", uiTimezone)
 										: "N/A"}
-								</Cell>
+								</Typography>
 							</Grid>
 							<Grid size={2}>
-								<Cell>{t("pages.incidents.dialog.details.resolutionType")}</Cell>
+								<Typography>
+									{t("pages.incidents.dialog.details.resolutionType")}
+								</Typography>
 							</Grid>
 							<Grid size={10}>
-								<Cell>
+								<Typography>
 									{incident.resolutionType
 										? t(
 												`pages.incidents.dialog.details.resolutionTypes.${incident.resolutionType}`
 											)
 										: "N/A"}
-								</Cell>
+								</Typography>
 							</Grid>
 							{incident.resolvedBy && (
 								<>
 									<Grid size={2}>
-										<Cell>{t("pages.incidents.dialog.details.resolvedBy")}</Cell>
+										<Typography>
+											{t("pages.incidents.dialog.details.resolvedBy")}
+										</Typography>
 									</Grid>
 									<Grid size={10}>
-										<Cell>{incident.resolvedByEmail ?? incident.resolvedBy}</Cell>
+										<Typography>
+											{incident.resolvedByEmail ?? incident.resolvedBy}
+										</Typography>
 									</Grid>
 								</>
 							)}
 							{incident.comment && (
 								<>
 									<Grid size={2}>
-										<Cell>{t("pages.incidents.dialog.details.comment")}</Cell>
+										<Typography>{t("pages.incidents.dialog.details.comment")}</Typography>
 									</Grid>
 									<Grid size={10}>
-										<Cell>{incident.comment}</Cell>
+										<Typography>{incident.comment}</Typography>
 									</Grid>
 								</>
 							)}

client/src/Pages/Incidents/Components/CardSummary.tsx

@@ -1,7 +1,8 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
 import Grid from "@mui/material/Grid";
-import { BaseBox, Icon, ValueLabel } from "@/Components/design-elements";
+import { BaseBox, ValueLabel } from "@/Components/design-elements";
 import { CircleCheck, TriangleAlert, Bell, Wrench, Globe } from "lucide-react";
 import Box from "@mui/material/Box";
 
@@ -24,7 +25,6 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 			alignItems="center"
 			justifyContent="space-between"
 			gap={theme.spacing(2)}
-			minHeight={32}
 		>
 			<Stack
 				direction="row"
@@ -32,10 +32,10 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 				gap={theme.spacing(2)}
 			>
 				{icon}
-				<Typography variant="body1">{label}</Typography>
+				<Typography variant="body2">{label}</Typography>
 			</Stack>
 			<Typography
-				variant="body1"
+				variant="body2"
 				fontWeight={600}
 			>
 				{value}
@@ -67,11 +67,15 @@ export const SummaryCard = ({
 			>
 				<Typography
 					component="h2"
-					variant="eyebrow"
-					color={theme.palette.text.secondary}
+					sx={{
+						textTransform: "uppercase",
+						fontWeight: 500,
+						fontSize: 13,
+					}}
 				>
 					{title}
 				</Typography>
+				<Divider />
 				{children}
 			</Stack>
 		</BaseBox>
@@ -93,13 +97,10 @@ export const SummaryCardActiveIncidents = ({
 	const activeCount = summary.totalActive;
 	const hasActive = activeCount > 0;
 	const color = hasActive ? theme.palette.error.main : theme.palette.success.main;
-	const icon = (
-		<Box sx={{ color, display: "inline-flex" }}>
-			<Icon
-				icon={hasActive ? TriangleAlert : CircleCheck}
-				size={32}
-			/>
-		</Box>
+	const icon = hasActive ? (
+		<TriangleAlert color={color} />
+	) : (
+		<CircleCheck color={color} />
 	);
 	const msg = t("pages.incidents.summaryCard.activeIncidents.active", {
 		count: activeCount,
@@ -132,7 +133,10 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 			container
 			alignItems="center"
 			spacing={2}
-			sx={{ width: "100%", minHeight: 32 }}
+			sx={{
+				width: "100%",
+				py: theme.spacing(0.5),
+			}}
 		>
 			<Grid
 				size={{ xs: 12, lg: 5 }}
@@ -143,7 +147,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 					gap: theme.spacing(2),
 				}}
 			>
-				<Icon icon={Globe} />
+				<Globe />
 				<Typography
 					variant="body1"
 					fontWeight={500}
@@ -155,7 +159,9 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 
 			<Grid
 				size={{ xs: 12, md: 6, lg: 3 }}
-				sx={{ display: "flex" }}
+				sx={{
+					display: "flex",
+				}}
 			>
 				<ValueLabel
 					value={incident.status ? "negative" : "positive"}
@@ -167,7 +173,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 				size={{ xs: 12, md: 6, lg: 4 }}
 				sx={{
 					textAlign: { xs: "left", md: "right" },
-					fontWeight: 600,
+					fontWeight: 500,
 				}}
 			>
 				<Typography variant="body1">{duration}</Typography>
@@ -184,17 +190,22 @@ export const SummaryCardLatestIncidents = ({
 	summary,
 }: SummaryCardLatestIncidentsProps) => {
 	const { t } = useTranslation();
+	const theme = useTheme();
 
 	const latestIncidents = summary?.latestIncidents ?? [];
 
 	return (
 		<SummaryCard title={t("pages.incidents.summaryCard.latestIncidents.title")}>
-			{latestIncidents.slice(0, 3).map((incident) => (
-				<SummaryIncidentItem
-					key={incident.id}
-					incident={incident}
-				/>
-			))}
+			<Stack gap={theme.spacing(4)}>
+				{latestIncidents.slice(0, 3).map((incident, index) => (
+					<Box key={incident.id}>
+						<SummaryIncidentItem incident={incident} />
+						{index < latestIncidents.length - 1 && (
+							<Divider sx={{ mt: theme.spacing(2) }} />
+						)}
+					</Box>
+				))}
+			</Stack>
 		</SummaryCard>
 	);
 };
@@ -213,17 +224,17 @@ export const SummaryCardStats = ({ summary }: SummaryCardStatsProps) => {
 	return (
 		<SummaryCard title={t("pages.incidents.summaryCard.incidentStats.title")}>
 			<SummaryItem
-				icon={<Icon icon={Bell} />}
+				icon={<Bell size={18} />}
 				label={t("pages.incidents.summaryCard.incidentStats.totalIncidents")}
 				value={summary?.total || 0}
 			/>
 			<SummaryItem
-				icon={<Icon icon={TriangleAlert} />}
+				icon={<TriangleAlert size={18} />}
 				label={t("pages.incidents.summaryCard.incidentStats.mostAffectedMonitor")}
 				value={mostAffected}
 			/>
 			<SummaryItem
-				icon={<Icon icon={Wrench} />}
+				icon={<Wrench size={18} />}
 				label={t("pages.incidents.summaryCard.incidentStats.avgResolutionTime")}
 				value={
 					summary.total > 0

client/src/Pages/Incidents/Components/ControlsIncidentFilter.tsx

@@ -75,7 +75,7 @@ export const ControlsIncidentFilter = ({
 					variant="contained"
 					onClick={onClearFilters}
 				>
-					{t("common.buttons.clearFilters")}
+					{t("pages.incidents.filters.clearFilters")}
 				</Button>
 			)}
 		</Stack>

client/src/Pages/Incidents/Components/DialogResolution.tsx

@@ -1,7 +1,9 @@
 import { useState, useEffect } from "react";
+import Box from "@mui/material/Box";
 import { Dialog, TextField } from "@/Components/inputs";
 import { usePut } from "@/Hooks/UseApi";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material";
 
 interface DialogResolutionProps {
 	open: boolean;
@@ -17,6 +19,7 @@ export const DialogResolution = ({
 	onResolved,
 }: DialogResolutionProps) => {
 	const { t } = useTranslation();
+	const theme = useTheme();
 	const [comment, setComment] = useState("");
 	const { put: resolveIncident, loading: isResolving } = usePut();
 
@@ -47,19 +50,22 @@ export const DialogResolution = ({
 			onCancel={handleCancel}
 			onConfirm={handleConfirm}
 			confirmColor="error"
+			cancelColor="primary"
 			loading={isResolving}
 			maxWidth="sm"
 			fullWidth
 		>
-			<TextField
-				fieldLabel={t("pages.incidents.dialog.resolveIncident.option.comment.label")}
-				placeholder={t(
-					"pages.incidents.dialog.resolveIncident.option.comment.placeholder"
-				)}
-				value={comment}
-				onChange={(e) => setComment(e.target.value)}
-				fullWidth
-			/>
+			<Box sx={{ mt: theme.spacing(4) }}>
+				<TextField
+					fieldLabel={t("pages.incidents.dialog.resolveIncident.option.comment.label")}
+					placeholder={t(
+						"pages.incidents.dialog.resolveIncident.option.comment.placeholder"
+					)}
+					value={comment}
+					onChange={(e) => setComment(e.target.value)}
+					fullWidth
+				/>
+			</Box>
 		</Dialog>
 	);
 };

client/src/Pages/Incidents/Components/IncidentTable.tsx

@@ -1,6 +1,8 @@
-import { Table, ValueLabel, StatusCodeLabel } from "@/Components/design-elements";
+import { Table } from "@/Components/design-elements";
 import { Pagination } from "@/Components/design-elements/Table";
 import type { Header } from "@/Components/design-elements/Table";
+import { ValueLabel } from "@/Components/design-elements";
+import type { ValueType } from "@/Components/design-elements/StatusLabel";
 import { ActionsMenu } from "@/Components/actions-menu";
 import type { Incident } from "@/Types/Incident";
 import type { Monitor } from "@/Types/Monitor";
@@ -134,12 +136,13 @@ export const IncidentsTable = ({
 						return (
 							<Typography
 								variant="body2"
-								color={
-									row.resolutionType === "manual"
-										? theme.palette.warning.main
-										: theme.palette.success.main
-								}
-								textTransform={"capitalize"}
+								sx={{
+									textTransform: "capitalize",
+									color:
+										row.resolutionType === "manual"
+											? theme.palette.warning.main
+											: theme.palette.success.main,
+								}}
 							>
 								{row.resolutionType}
 							</Typography>
@@ -152,10 +155,15 @@ export const IncidentsTable = ({
 				id: "statusCode",
 				content: t("pages.incidents.table.headers.statusCode"),
 				render: (row) => {
+					const code = row.statusCode;
+					if (!code) return "N/A";
+					let value: ValueType = "neutral";
+					if (code < 300) value = "positive";
+					else if (code >= 400) value = "negative";
 					return (
-						<StatusCodeLabel
-							statusCode={row.statusCode}
-							message={row.message}
+						<ValueLabel
+							value={value}
+							text={String(code)}
 						/>
 					);
 				},

client/src/Pages/Incidents/index.tsx

@@ -15,7 +15,6 @@ import { HeaderTimeRange } from "@/Components/common";
 import { ControlsIncidentFilter } from "@/Pages/Incidents/Components/ControlsIncidentFilter";
 
 import { useGet } from "@/Hooks/UseApi";
-import { LAYOUT } from "@/Utils/Theme/constants";
 import { useState, useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import type { Incident, IncidentsResponse, IncidentSummary } from "@/Types/Incident";
@@ -187,9 +186,8 @@ const IncidentsPage = () => {
 			{activeIncidentsCount > 0 && (
 				<>
 					<Typography
-						variant="eyebrow"
-						color={theme.palette.text.secondary}
-						mb={theme.spacing(LAYOUT.XS)}
+						variant="h6"
+						sx={{ mb: theme.spacing(4), textTransform: "uppercase" }}
 					>
 						{t("pages.incidents.table.activeIncidents")}
 					</Typography>
@@ -210,9 +208,8 @@ const IncidentsPage = () => {
 			)}
 
 			<Typography
-				variant="eyebrow"
-				color={theme.palette.text.secondary}
-				mb={theme.spacing(LAYOUT.XS)}
+				variant="h6"
+				sx={{ mb: theme.spacing(4), textTransform: "uppercase" }}
 			>
 				{t("pages.incidents.table.resolvedIncidents")}
 			</Typography>

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

@@ -1,6 +1,4 @@
 import Grid from "@mui/material/Grid";
-import Stack from "@mui/material/Stack";
-import { NoticeBanner } from "@/Components/design-elements";
 import { HistogramInfrastructure } from "@/Components/monitors";
 
 import { useTranslation } from "react-i18next";
@@ -8,7 +6,6 @@ import type { HardwareCheckStats } from "@/Types/Monitor";
 import { useMemo } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { LAYOUT } from "@/Utils/Theme/constants";
 
 const formatBytesToMB = (value: number) => `${(value / (1024 * 1024)).toFixed(2)} MB`;
 
@@ -63,11 +60,6 @@ const getChartConfigs = (
 	return configs;
 };
 
-const hasAnyNetworkTraffic = (checks: HardwareCheckStats[]): boolean =>
-	checks.some((c) =>
-		c.net?.some((iface) => iface.bytesSentPerSecond > 0 || iface.deltaBytesRecv > 0)
-	);
-
 export const InfraNetworkCharts = ({
 	checks,
 	dateRange,
@@ -82,43 +74,35 @@ export const InfraNetworkCharts = ({
 		() => getChartConfigs(theme, checks, t),
 		[theme, checks, t]
 	);
-	const showNoTrafficNotice = chartConfigs.length > 0 && !hasAnyNetworkTraffic(checks);
 
 	return (
-		<Stack gap={theme.spacing(LAYOUT.XS)}>
-			{showNoTrafficNotice && (
-				<NoticeBanner severity="warning">
-					{t("pages.infrastructure.charts.labels.netNoTraffic")}
-				</NoticeBanner>
-			)}
-			<Grid
-				container
-				spacing={theme.spacing(LAYOUT.MD)}
-			>
-				{chartConfigs.map((config) => {
-					return (
-						<Grid
-							size={isSmall ? 12 : 6}
-							key={`${config.type}-${config.interfaceName ?? config.idx ?? ""}`}
-						>
-							<HistogramInfrastructure
-								dateRange={dateRange}
-								title={config.title}
-								type={config.type}
-								idx={config.idx}
-								checks={checks}
-								xKey="bucketDate"
-								dataKeys={config.dataKeys}
-								gradient={true}
-								gradientStartColor={config.gradientStartColor}
-								gradientEndColor="#ffffff"
-								strokeColor={config.strokeColor}
-								yAxisFormatter={formatBytesToMB}
-							/>
-						</Grid>
-					);
-				})}
-			</Grid>
-		</Stack>
+		<Grid
+			container
+			spacing={theme.spacing(8)}
+		>
+			{chartConfigs.map((config) => {
+				return (
+					<Grid
+						size={isSmall ? 12 : 6}
+						key={`${config.type}-${config.interfaceName ?? config.idx ?? ""}`}
+					>
+						<HistogramInfrastructure
+							dateRange={dateRange}
+							title={config.title}
+							type={config.type}
+							idx={config.idx}
+							checks={checks}
+							xKey="bucketDate"
+							dataKeys={config.dataKeys}
+							gradient={true}
+							gradientStartColor={config.gradientStartColor}
+							gradientEndColor="#ffffff"
+							strokeColor={config.strokeColor}
+							yAxisFormatter={formatBytesToMB}
+						/>
+					</Grid>
+				);
+			})}
+		</Grid>
 	);
 };

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

@@ -1,5 +1,4 @@
 import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { Table, Pagination, StatusLabel, Gauge } from "@/Components/design-elements";
 import type { Header } from "@/Components/design-elements/Table";
@@ -13,24 +12,6 @@ import { useNavigate } from "react-router-dom";
 import { usePost } from "@/Hooks/UseApi";
 
 import type { Monitor } from "@/Types/Monitor";
-import { Checkbox } from "@/Components/inputs";
-
-interface InfraMonitorsTableProps {
-	monitors: Monitor[];
-	refetch: () => void;
-	setSelectedMonitor: (monitor: Monitor | null) => void;
-	sortField: string;
-	setSortField: (field: string) => void;
-	sortOrder: "asc" | "desc";
-	setSortOrder: (order: "asc" | "desc") => void;
-	count: number;
-	page: number;
-	setPage: (page: number) => void;
-	rowsPerPage: number;
-	setRowsPerPage: (rowsPerPage: number) => void;
-	selectedRows?: string[];
-	onSelectionChange?: (selected: string[]) => void;
-}
 
 export const InfraMonitorsTable = ({
 	monitors,
@@ -45,32 +26,29 @@ export const InfraMonitorsTable = ({
 	setPage,
 	rowsPerPage,
 	setRowsPerPage,
-	selectedRows = [],
-	onSelectionChange,
-}: InfraMonitorsTableProps) => {
+}: {
+	monitors: Monitor[];
+	refetch: Function;
+	setSelectedMonitor: Function;
+	sortField: string;
+	setSortField: (field: string) => void;
+	sortOrder: "asc" | "desc";
+	setSortOrder: (order: "asc" | "desc") => void;
+	count: number;
+	page: number;
+	setPage: (page: number) => void;
+	rowsPerPage: number;
+	setRowsPerPage: (rowsPerPage: number) => void;
+}) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const navigate = useNavigate();
-	const { post } = usePost<Record<string, never>, Monitor>();
-
-	const selectedSet = new Set(selectedRows);
-	const isAllSelected =
-		monitors.length > 0 && monitors.every((m) => selectedSet.has(m.id));
-	const isSomeSelected = selectedRows.length > 0 && !isAllSelected;
-
-	const handleSelectAll = (checked: boolean) => {
-		onSelectionChange?.(checked ? monitors.map((m) => m.id) : []);
-	};
-
-	const handleSelectRow = (id: string, checked: boolean) => {
-		if (!onSelectionChange) return;
-		onSelectionChange(
-			checked ? [...selectedRows, id] : selectedRows.filter((rowId) => rowId !== id)
-		);
-	};
-
-	const isRowSelected = (id: string) => selectedSet.has(id);
+	const {
+		post,
+		// loading: isPatching,
+		// error: postError,
+	} = usePost<any, Monitor>();
 
 	const handlePageChange = (
 		_e: React.MouseEvent<HTMLButtonElement> | null,
@@ -87,7 +65,7 @@ export const InfraMonitorsTable = ({
 		setRowsPerPage(value);
 	};
 
-	const handleSort = (e: React.MouseEvent, field: string) => {
+	const handleSort = (e: any, field: string) => {
 		e.preventDefault();
 		e.stopPropagation();
 		if (sortField === field) {
@@ -123,6 +101,13 @@ export const InfraMonitorsTable = ({
 					navigate(`/infrastructure/configure/${monitor.id}`);
 				},
 			},
+			// {
+			//   id: 5,
+			//   label: "Clone",
+			//   action: () => {
+
+			//   },
+			// },
 			{
 				id: 6,
 				label:
@@ -167,35 +152,8 @@ export const InfraMonitorsTable = ({
 			</Box>
 		);
 		const headers: Header<Monitor>[] = [
-			{
-				id: "selection",
-				content: (
-					<Checkbox
-						aria-label={t("pages.common.monitors.actions.selectAll")}
-						indeterminate={isSomeSelected}
-						checked={isAllSelected}
-						onChange={(e) => handleSelectAll(e.target.checked)}
-					/>
-				),
-				hideMobileLabel: true,
-				render: (row) => (
-					<Checkbox
-						aria-label={t("pages.common.monitors.actions.selectMonitor", {
-							name: row.name,
-						})}
-						checked={isRowSelected(row.id)}
-						onChange={(e) => {
-							handleSelectRow(row.id, e.target.checked);
-						}}
-						onClick={(e) => e.stopPropagation()}
-					/>
-				),
-				onClick: (e) => e?.stopPropagation(),
-			},
 			{
 				id: "name",
-				align: "left",
-				mobileLabel: t("common.table.headers.name"),
 				content: (
 					<Typography
 						component="div"
@@ -215,20 +173,18 @@ export const InfraMonitorsTable = ({
 			},
 			{
 				id: "status",
-				mobileLabel: t("common.table.headers.status"),
 				content: (
-					<Stack
+					<Typography
+						component="div"
+						display="inline-flex"
+						alignItems="center"
 						gap={theme.spacing(4)}
-						direction={"row"}
-						justifyContent={"center"}
-						alignItems={"center"}
 						onClick={(e) => handleSort(e, "status")}
 						sx={{ cursor: "pointer" }}
 					>
-						<Box width={theme.spacing(8)} />
 						{t("common.table.headers.status")}
 						{renderSortIcon(sortField === "status")}
-					</Stack>
+					</Typography>
 				),
 				render: (row) => {
 					return <StatusLabel status={row.status} />;
@@ -292,11 +248,6 @@ export const InfraMonitorsTable = ({
 				onRowClick={(row) => {
 					navigate(`/infrastructure/${row.id}`);
 				}}
-				getRowSx={(row) => ({
-					backgroundColor: isRowSelected(row.id)
-						? theme.palette.action.selected
-						: "inherit",
-				})}
 			/>
 			<Pagination
 				component="div"

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

@@ -2,13 +2,8 @@ import Stack from "@mui/material/Stack";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { MonitorBasePageWithStates } from "@/Components/design-elements";
 import { HeaderCreate } from "@/Components/common";
-import {
-	ControlsFilter,
-	HeaderMonitorsSummary,
-	BulkActionsBar,
-} from "@/Components/monitors";
-import { TextField, Dialog, Button } from "@/Components/inputs";
-import { Play, Pause } from "lucide-react";
+import { ControlsFilter, HeaderMonitorsSummary } from "@/Components/monitors";
+import { TextField, Dialog } from "@/Components/inputs";
 
 import { useGet, useDelete } from "@/Hooks/UseApi";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
@@ -21,7 +16,6 @@ import { setRowsPerPage } from "@/Features/UI/uiSlice.js";
 import type { RootState } from "@/Types/state";
 import { InfraMonitorsTable } from "./Components/MonitorsTable";
 import useDebounce from "@/Hooks/useDebounce";
-import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
 
 const InfrastructureMonitors = () => {
 	const { t } = useTranslation();
@@ -43,7 +37,6 @@ const InfrastructureMonitors = () => {
 	const [sortField, setSortField] = useState<string>("");
 	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
 	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
-
 	const isDialogOpen = Boolean(selectedMonitor);
 
 	const debouncedSearch = useDebounce<string>(search, 300);
@@ -104,15 +97,6 @@ const InfrastructureMonitors = () => {
 	const { summary, count } = monitorsWithChecksData ?? { summary: null, count: 0 };
 	const isLoading = monitorsWithChecksLoading;
 
-	// Bulk actions
-	const {
-		selectedRows,
-		setSelectedRows,
-		handleBulkPause,
-		handleBulkResume,
-		handleCancelSelection,
-	} = useBulkMonitorActions(refetch, page);
-
 	// Check if any filters are active
 	const hasActiveFilters = Boolean(selectedStatus || selectedState || search);
 
@@ -175,29 +159,6 @@ const InfrastructureMonitors = () => {
 					}}
 				/>
 			</Stack>
-
-			{!isLoading && (
-				<BulkActionsBar
-					selectedCount={selectedRows.length}
-					onCancel={handleCancelSelection}
-				>
-					<Button
-						size="small"
-						startIcon={<Play size={16} />}
-						onClick={handleBulkResume}
-					>
-						{t("common.buttons.resume")}
-					</Button>
-					<Button
-						size="small"
-						startIcon={<Pause size={16} />}
-						onClick={handleBulkPause}
-					>
-						{t("common.buttons.pause")}
-					</Button>
-				</BulkActionsBar>
-			)}
-
 			<InfraMonitorsTable
 				monitors={monitorsWithChecksData?.monitors || []}
 				refetch={refetch}
@@ -219,8 +180,6 @@ const InfrastructureMonitors = () => {
 					);
 					setPage(0);
 				}}
-				selectedRows={selectedRows}
-				onSelectionChange={setSelectedRows}
 			/>
 			<Dialog
 				open={isDialogOpen}

client/src/Pages/Logs/TabQueue.tsx

@@ -10,7 +10,6 @@ import type { QueueData } from "@/Types/Queue";
 import { Metrics } from "@/Pages/Logs/components/Metrics";
 import { Button } from "@/Components/inputs";
 import { EmptyState } from "@/Components/design-elements";
-import { SPACING } from "@/Utils/Theme/constants";
 
 export const TabQueue = () => {
 	const theme = useTheme();
@@ -20,7 +19,7 @@ export const TabQueue = () => {
 		isLoading,
 		// error,
 		refetch,
-	} = useGet<QueueData>("/queue/all-metrics", {}, { refreshInterval: 1000 });
+	} = useGet<QueueData>("/queue/all-metrics", {}, { refreshInterval: 5000 });
 
 	const { post, loading: isFlushing } = usePost();
 
@@ -50,22 +49,32 @@ export const TabQueue = () => {
 				<Stack gap={theme.spacing(1)}>
 					<Typography
 						variant="eyebrow"
-						color={theme.palette.text.secondary}
+						color="text.secondary"
 					>
 						{t("pages.logs.jobQueue")}
 					</Typography>
-					<Typography color={theme.palette.text.secondary}>
+					<Typography
+						sx={{
+							fontSize: 13,
+							color: theme.palette.text.secondary,
+						}}
+					>
 						<Trans
 							i18nKey="pages.logs.jobQueueExplainer"
 							components={{
 								highlight: (
 									<Box
 										component="span"
-										bgcolor={theme.palette.rowStatus.running}
-										color={theme.palette.text.primary}
-										px={SPACING.SM}
-										py={SPACING.XXS}
-										borderRadius={theme.shape.borderRadius}
+										sx={{
+											backgroundColor:
+												theme.palette.mode === "dark"
+													? "rgba(19, 113, 91, 0.18)"
+													: "#ECF7F2",
+											color: theme.palette.text.primary,
+											px: 1,
+											py: 0.25,
+											borderRadius: 0.5,
+										}}
 									/>
 								),
 							}}
@@ -78,11 +87,16 @@ export const TabQueue = () => {
 				<Stack gap={theme.spacing(1)}>
 					<Typography
 						variant="eyebrow"
-						color={theme.palette.text.secondary}
+						color="text.secondary"
 					>
 						{t("pages.logs.failedJobs")}
 					</Typography>
-					<Typography color={theme.palette.text.secondary}>
+					<Typography
+						sx={{
+							fontSize: 13,
+							color: theme.palette.text.secondary,
+						}}
+					>
 						{t("pages.logs.failedJobsExplainer")}
 					</Typography>
 				</Stack>

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

@@ -30,22 +30,6 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 	};
 
 	const headers: Header<QueueJobWithId>[] = [
-		{
-			id: "state",
-			content: t("pages.logs.table.headers.state"),
-			render: (row) => {
-				if (row.lockedAt) {
-					return t("common.labels.running");
-				}
-				if (row.monitorActive === true) {
-					return t("common.labels.active");
-				}
-				if (row.monitorActive === false) {
-					return t("common.labels.paused");
-				}
-				return t("common.labels.idle");
-			},
-		},
 		{
 			id: "id",
 			content: t("common.table.headers.monitorId"),
@@ -63,10 +47,7 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 			id: "url",
 			content: t("common.table.headers.url"),
 			render: (row) => (
-				<Typography
-					title={row.monitorUrl ?? ""}
-					sx={cellSx}
-				>
+				<Typography title={row.monitorUrl ?? ""} sx={cellSx}>
 					{row.monitorUrl}
 				</Typography>
 			),
@@ -79,15 +60,9 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 		{
 			id: "interval",
 			content: t("common.table.headers.interval"),
-			render: (row) => {
-				let interval;
-				if (row.monitorId.toString().includes("geo")) {
-					interval = row.monitorGeoInterval ?? 0;
-				} else {
-					interval = row.repeat ?? 0;
-				}
-				return <Typography sx={cellSx}>{prettyMilliseconds(interval)}</Typography>;
-			},
+			render: (row) => (
+				<Typography sx={cellSx}>{prettyMilliseconds(row.monitorInterval ?? 0)}</Typography>
+			),
 		},
 		{
 			id: "lastRun",
@@ -95,10 +70,7 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 			render: (row) => {
 				const v = formatTimestamp(row.lastRunAt) ?? "-";
 				return (
-					<Typography
-						title={v}
-						sx={cellSx}
-					>
+					<Typography title={v} sx={cellSx}>
 						{v}
 					</Typography>
 				);
@@ -118,10 +90,7 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 			render: (row) => {
 				const v = formatTimestamp(row.lockedAt) ?? "-";
 				return (
-					<Typography
-						title={v}
-						sx={cellSx}
-					>
+					<Typography title={v} sx={cellSx}>
 						{v}
 					</Typography>
 				);
@@ -129,16 +98,16 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 		},
 	];
 
+	const isDark = theme.palette.mode === "dark";
+	const runningBg = isDark ? "rgba(19, 113, 91, 0.18)" : "#ECF7F2";
+
 	return (
 		<Table
 			headers={headers}
 			data={jobsWithId}
 			getRowSx={(row) => ({
 				...(row.lockedAt && {
-					"& td": { backgroundColor: theme.palette.rowStatus.running },
-				}),
-				...(row.monitorActive === false && {
-					"& td": { backgroundColor: theme.palette.rowStatus.paused },
+					"& td": { backgroundColor: runningBg },
 				}),
 			})}
 		/>

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

@@ -22,7 +22,6 @@ import type { MaintenanceWindowFormData } from "@/Validation/maintenanceWindow";
 import { repeatOptions, durationUnitOptions } from "@/Validation/maintenanceWindow";
 import { useMaintenanceWindowForm } from "@/Hooks/useMaintenanceWindowForm";
 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, Controller } from "react-hook-form";
@@ -86,6 +85,10 @@ const CreateMaintenanceWindowPage = () => {
 			repeat,
 		};
 
+		if (repeat === 0) {
+			payload.expiry = endDateTime.toISOString();
+		}
+
 		return payload;
 	};
 
@@ -100,9 +103,6 @@ const CreateMaintenanceWindowPage = () => {
 		}
 
 		if (result?.success) {
-			await mutate(
-				(key) => typeof key === "string" && key.startsWith("/maintenance-window")
-			);
 			navigate("/maintenance");
 		}
 	};

client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx

@@ -1,13 +1,7 @@
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import {
-	Table,
-	Pagination,
-	StatusLabel,
-	StrategyBadge,
-} from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
+import { Table, Pagination, StatusLabel } from "@/Components/design-elements";
 import { HistogramPageSpeed } from "@/Components/monitors";
 import { ArrowDown, ArrowUp } from "lucide-react";
 import type { Header } from "@/Components/design-elements/Table";
@@ -185,19 +179,7 @@ export const PageSpeedMonitorsTable = ({
 					</Stack>
 				),
 				render: (row) => {
-					return (
-						<Stack
-							direction="row"
-							alignItems="center"
-							gap={LAYOUT.XS}
-						>
-							<Typography>{row.name}</Typography>
-							<StrategyBadge
-								strategy={row.strategy}
-								variant="caption"
-							/>
-						</Stack>
-					);
+					return row.name;
 				},
 			},
 			{

client/src/Pages/Settings/DummyChart.tsx

@@ -3,7 +3,6 @@ import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
 import { HeatmapResponseTime, HistogramResponseTime } from "@/Components/common";
 import type { CheckSnapshot } from "@/Types/Check";
-import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
 interface DummyChartProps {
 	chartType: string;
@@ -11,7 +10,7 @@ interface DummyChartProps {
 
 const generateDummyChecks = (): CheckSnapshot[] => {
 	const checks: CheckSnapshot[] = [];
-	for (let i = 0; i < MAX_RECENT_CHECKS; i++) {
+	for (let i = 0; i < 25; i++) {
 		const isUp = Math.random() > 0.1;
 		const responseTime = Math.floor(Math.random() * 80) + 20;
 		checks.push({

client/src/Pages/Settings/index.tsx

@@ -128,8 +128,8 @@ export const SettingsPage = () => {
 		timezoneOptions.find((tz) => tz.id === selectedTimezoneId) ?? null;
 
 	const handleTimezoneChange = (newValue: Timezone | null) => {
-		if (!newValue?.id) return;
-		dispatch(setTimezone({ timezone: newValue.id }));
+		const newId = newValue?.id ?? "";
+		dispatch(setTimezone({ timezone: newId }));
 	};
 
 	const handleModeChange = (e: SelectChangeEvent<ThemeMode>) => {
@@ -182,9 +182,6 @@ export const SettingsPage = () => {
 			systemEmailRequireTLS: formValues.systemEmailRequireTLS,
 			systemEmailRejectUnauthorized: formValues.systemEmailRejectUnauthorized,
 			...(formValues.systemEmailUser && { systemEmailUser: formValues.systemEmailUser }),
-			...(formValues.systemEmailDisplayName && {
-				systemEmailDisplayName: formValues.systemEmailDisplayName,
-			}),
 			...(formValues.systemEmailTLSServername && {
 				systemEmailTLSServername: formValues.systemEmailTLSServername,
 			}),
@@ -580,65 +577,44 @@ export const SettingsPage = () => {
 								href="https://nodemailer.com/smtp/"
 								target="_blank"
 							/>
-							{(() => {
-								const address = form.watch("systemEmailAddress") || "";
-								const displayName = form.watch("systemEmailDisplayName")?.trim();
-								return (
-									<>
-										<Box
-											component="pre"
-											p={2}
-											borderRadius={theme.shape.borderRadius}
-											bgcolor={theme.palette.action.hover}
-											sx={{
-												fontFamily: theme.typography.fontFamilyMonospace,
-												overflow: "auto",
-											}}
-										>
-											<code>
-												{JSON.stringify(
-													{
-														host: form.watch("systemEmailHost") || "",
-														port: form.watch("systemEmailPort") || "",
-														secure: form.watch("systemEmailSecure") ?? false,
-														auth: {
-															user: form.watch("systemEmailUser") || address,
-															pass: "<your_password>",
-														},
-														name: form.watch("systemEmailConnectionHost") || "localhost",
-														pool: form.watch("systemEmailPool") ?? false,
-														tls: {
-															rejectUnauthorized:
-																form.watch("systemEmailRejectUnauthorized") ?? true,
-															ignoreTLS: form.watch("systemEmailIgnoreTLS") ?? false,
-															requireTLS: form.watch("systemEmailRequireTLS") ?? false,
-															servername: form.watch("systemEmailTLSServername") || "",
-														},
-													},
-													null,
-													2
-												)}
-											</code>
-										</Box>
-										{address && (
-											<Box
-												component="pre"
-												p={2}
-												borderRadius={theme.shape.borderRadius}
-												bgcolor={theme.palette.action.hover}
-												sx={{
-													fontFamily: theme.typography.fontFamilyMonospace,
-													overflow: "auto",
-												}}
-											>
-												<code>
-													{`From: ${displayName ? `"${displayName}" <${address}>` : address}`}
-												</code>
-											</Box>
-										)}
-									</>
-								);
-							})()}
+							<Box
+								component="pre"
+								sx={{
+									fontFamily: theme.typography.fontFamilyMonospace,
+									p: 2,
+									borderRadius: 1,
+									overflow: "auto",
+									backgroundColor: theme.palette.action.hover,
+								}}
+							>
+								<code>
+									{JSON.stringify(
+										{
+											host: form.watch("systemEmailHost") || "",
+											port: form.watch("systemEmailPort") || "",
+											secure: form.watch("systemEmailSecure") ?? false,
+											auth: {
+												user:
+													form.watch("systemEmailUser") ||
+													form.watch("systemEmailAddress") ||
+													"",
+												pass: "<your_password>",
+											},
+											name: form.watch("systemEmailConnectionHost") || "localhost",
+											pool: form.watch("systemEmailPool") ?? false,
+											tls: {
+												rejectUnauthorized:
+													form.watch("systemEmailRejectUnauthorized") ?? true,
+												ignoreTLS: form.watch("systemEmailIgnoreTLS") ?? false,
+												requireTLS: form.watch("systemEmailRequireTLS") ?? false,
+												servername: form.watch("systemEmailTLSServername") || "",
+											},
+										},
+										null,
+										2
+									)}
+								</code>
+							</Box>
 						</Stack>
 					}
 					rightContent={
@@ -704,24 +680,6 @@ export const SettingsPage = () => {
 								)}
 							/>
 
-							{/* Email Display Name (Optional) */}
-							<Controller
-								name="systemEmailDisplayName"
-								control={form.control}
-								render={({ field, fieldState }) => (
-									<TextField
-										{...field}
-										value={field.value ?? ""}
-										fieldLabel={t("pages.settings.form.email.option.displayName.label")}
-										placeholder={t(
-											"pages.settings.form.email.option.displayName.placeholder"
-										)}
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message}
-									/>
-								)}
-							/>
-
 							{/* Email User (Optional) */}
 							<Controller
 								name="systemEmailUser"
@@ -1016,13 +974,7 @@ export const SettingsPage = () => {
 					setIsDemoMonitorsDialogOpen(false);
 				}}
 				loading={isDeletingAllMonitors}
-				confirmColor="error"
-				confirmText={t("common.buttons.removeMonitors")}
-			>
-				<Typography variant="body1">
-					{t("pages.settings.form.removeMonitors.dialog.paragraph")}
-				</Typography>
-			</Dialog>
+			/>
 
 			<Stack
 				direction="row"

client/src/Pages/StatusPage/Create/Components/ThemePicker.tsx

@@ -1,66 +0,0 @@
-import { useTranslation } from "react-i18next";
-import Stack from "@mui/material/Stack";
-import RadioGroup from "@mui/material/RadioGroup";
-import MenuItem from "@mui/material/MenuItem";
-import { useTheme } from "@mui/material/styles";
-import { RadioWithDescription, Select } from "@/Components/inputs";
-import {
-	STATUS_PAGE_THEMES,
-	STATUS_PAGE_THEME_MODES,
-	type StatusPageTheme,
-	type StatusPageThemeMode,
-} from "@/Types/StatusPage";
-
-interface Props {
-	theme: StatusPageTheme;
-	themeMode: StatusPageThemeMode;
-	onThemeChange: (value: StatusPageTheme) => void;
-	onThemeModeChange: (value: StatusPageThemeMode) => void;
-}
-
-export const ThemePicker = ({
-	theme,
-	themeMode,
-	onThemeChange,
-	onThemeModeChange,
-}: Props) => {
-	const { t } = useTranslation();
-	const muiTheme = useTheme();
-
-	return (
-		<Stack spacing={muiTheme.spacing(6)}>
-			<RadioGroup
-				value={theme}
-				onChange={(_, value) => onThemeChange(value as StatusPageTheme)}
-			>
-				<Stack spacing={muiTheme.spacing(4)}>
-					{STATUS_PAGE_THEMES.map((option) => (
-						<RadioWithDescription
-							key={option}
-							value={option}
-							label={t(`pages.statusPages.form.theme.options.${option}.name`)}
-							description={t(
-								`pages.statusPages.form.theme.options.${option}.description`
-							)}
-						/>
-					))}
-				</Stack>
-			</RadioGroup>
-
-			<Select
-				fieldLabel={t("pages.statusPages.form.themeMode.label")}
-				value={themeMode}
-				onChange={(e) => onThemeModeChange(e.target.value as StatusPageThemeMode)}
-			>
-				{STATUS_PAGE_THEME_MODES.map((mode) => (
-					<MenuItem
-						key={mode}
-						value={mode}
-					>
-						{t(`pages.statusPages.form.themeMode.${mode}`)}
-					</MenuItem>
-				))}
-			</Select>
-		</Stack>
-	);
-};

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

@@ -32,10 +32,8 @@ import type { MonitorDisplayType, StatusPageResponse } from "@/Types/StatusPage"
 import { getMonitorTypeLabel } from "@/Types/StatusPage";
 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";
 
 const monitorsUrl = (() => {
 	const params = new URLSearchParams();
@@ -50,9 +48,6 @@ interface TimezoneOption {
 	name: string;
 }
 
-const buildStatusPageKey = (slug: string | null | undefined) =>
-	slug ? `/status-page/${slug}?type=uptime&type=infrastructure` : null;
-
 const CreateStatusPage = () => {
 	const theme = useTheme();
 	const { t } = useTranslation();
@@ -63,7 +58,9 @@ const CreateStatusPage = () => {
 
 	// Fetch existing status page data when configuring
 	const { data: statusPageData, isLoading: isLoadingStatusPage } =
-		useGet<StatusPageResponse>(isCreate ? null : buildStatusPageKey(url));
+		useGet<StatusPageResponse>(
+			isCreate ? null : `/status-page/${url}?type=uptime&type=infrastructure`
+		);
 
 	const { data: monitorsResponse } = useGet<Monitor[]>(monitorsUrl);
 	const monitors = monitorsResponse ?? [];
@@ -142,8 +139,6 @@ const CreateStatusPage = () => {
 		fd.append("showUptimePercentage", String(data.showUptimePercentage));
 		fd.append("showAdminLoginLink", String(data.showAdminLoginLink));
 		fd.append("showInfrastructure", String(data.showInfrastructure));
-		if (data.theme) fd.append("theme", data.theme);
-		if (data.themeMode) fd.append("themeMode", data.themeMode);
 
 		data.monitors.forEach((monitorId) => {
 			fd.append("monitors[]", monitorId);
@@ -183,10 +178,6 @@ const CreateStatusPage = () => {
 		}
 
 		if (result) {
-			await mutate(buildStatusPageKey(data.url));
-			if (!isCreate && url !== data.url) {
-				await mutate(buildStatusPageKey(url));
-			}
 			navigate(`/status/${data.url}`);
 		}
 	};
@@ -447,30 +438,6 @@ const CreateStatusPage = () => {
 					</Stack>
 				}
 			/>
-			<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}
-									/>
-								)}
-							/>
-						)}
-					/>
-				}
-			/>
 			<ConfigBox
 				title={t("pages.statusPages.form.features.title")}
 				subtitle={t("pages.statusPages.form.features.description")}

client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx

@@ -8,7 +8,7 @@ import { Settings, ExternalLink } from "lucide-react";
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { PUBLIC_STATUS_PAGE_PREFIX, type StatusPage } from "@/Types/StatusPage";
+import type { StatusPage } from "@/Types/StatusPage";
 
 interface HeaderStatusPageControlsProps {
 	isAdmin: boolean;
@@ -50,7 +50,7 @@ export const HeaderStatusPageControls = ({
 						<Typography
 							onClick={() => {
 								window.open(
-									`${PUBLIC_STATUS_PAGE_PREFIX}/${statusPage.url}`,
+									`/status/public/${statusPage.url}`,
 									"_blank",
 									"noopener,noreferrer"
 								);

client/src/Pages/StatusPage/Status/Components/InfrastructureMetrics.tsx

@@ -0,0 +1,246 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { Gauge } from "@/Components/design-elements";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import prettyBytes from "pretty-bytes";
+import type { Monitor } from "@/Types/Monitor";
+import Grid from "@mui/material/Grid";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import Box from "@mui/material/Box";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
+
+const GAUGE_RADIUS = 60;
+const GAUGE_STROKE_WIDTH = 12;
+const PERCENTAGE_MULTIPLIER = 100;
+
+interface StatusPageMonitor extends Monitor {
+	checks?: Monitor["recentChecks"];
+}
+
+interface MetricDetail {
+	label: string;
+	value: string;
+}
+
+interface MetricConfig {
+	key: string;
+	label: string;
+	hasData: boolean;
+	progress: number;
+	details: MetricDetail[];
+}
+
+const MetricDetailRow = ({ label, value }: MetricDetail) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Typography
+				variant="body2"
+				color={theme.palette.text.secondary}
+			>
+				{label}
+			</Typography>
+			<Typography variant="body2">{value}</Typography>
+		</Stack>
+	);
+};
+
+interface MetricItemProps {
+	label: string;
+	progress: number;
+	details?: MetricDetail[];
+}
+
+const MetricItem = ({ label, progress, details }: MetricItemProps) => {
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	return (
+		<Grid
+			size={isSmall ? 12 : 4}
+			sx={{
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				textAlign: "center",
+				gap: theme.spacing(SPACING.LG),
+				padding: theme.spacing(LAYOUT.XS),
+				borderRight: isSmall ? "none" : `1px solid ${theme.palette.divider}`,
+				borderBottom: isSmall ? `1px solid ${theme.palette.divider}` : "none",
+				"&:last-child": {
+					borderRight: "none",
+					borderBottom: "none",
+					paddingBottom: theme.spacing(SPACING.LG),
+				},
+			}}
+		>
+			<Box
+				display="flex"
+				flexDirection="column"
+				alignItems="center"
+			>
+				<Gauge
+					progress={progress}
+					radius={GAUGE_RADIUS}
+					strokeWidth={GAUGE_STROKE_WIDTH}
+				/>
+				<Typography variant="body2">{label}</Typography>
+			</Box>
+			{details && details.length > 0 && (
+				<Box
+					width="100%"
+					paddingX={theme.spacing(LAYOUT.LG)}
+				>
+					{details.map((detail) => (
+						<MetricDetailRow
+							key={detail.label}
+							label={detail.label}
+							value={detail.value}
+						/>
+					))}
+				</Box>
+			)}
+		</Grid>
+	);
+};
+
+type LatestCheck = NonNullable<Monitor["recentChecks"]>[number];
+
+const buildCpuMetric = (
+	check: LatestCheck,
+	t: (key: string) => string
+): MetricConfig | null => {
+	if (!check.cpu || typeof check.cpu.usage_percent !== "number") {
+		return null;
+	}
+	const usagePercent = (check.cpu.usage_percent ?? 0) * PERCENTAGE_MULTIPLIER;
+	return {
+		key: "cpu",
+		label: t("pages.statusPages.monitorsList.infrastructure.cpu"),
+		hasData: true,
+		progress: usagePercent,
+		details: [
+			{
+				label: t("pages.statusPages.monitorsList.infrastructure.usage"),
+				value: `${usagePercent.toFixed(2)}%`,
+			},
+		],
+	};
+};
+
+const buildMemoryMetric = (
+	check: LatestCheck,
+	t: (key: string) => string
+): MetricConfig | null => {
+	if (
+		!check.memory ||
+		typeof check.memory.usage_percent !== "number" ||
+		typeof check.memory.used_bytes !== "number" ||
+		typeof check.memory.total_bytes !== "number"
+	) {
+		return null;
+	}
+	return {
+		key: "memory",
+		label: t("pages.statusPages.monitorsList.infrastructure.memory"),
+		hasData: true,
+		progress: (check.memory.usage_percent ?? 0) * PERCENTAGE_MULTIPLIER,
+		details: [
+			{
+				label: t("pages.statusPages.monitorsList.infrastructure.used"),
+				value: prettyBytes(check.memory.used_bytes ?? 0),
+			},
+			{
+				label: t("pages.statusPages.monitorsList.infrastructure.total"),
+				value: prettyBytes(check.memory.total_bytes ?? 0),
+			},
+		],
+	};
+};
+
+const buildDiskMetric = (
+	check: LatestCheck,
+	t: (key: string) => string
+): MetricConfig | null => {
+	if (!check.disk || check.disk.length === 0) {
+		return null;
+	}
+	const disks = check.disk;
+	const avgUsagePercent =
+		(disks.reduce((acc, disk) => acc + (disk?.usage_percent ?? 0), 0) / disks.length) *
+		PERCENTAGE_MULTIPLIER;
+	const totalUsedBytes = disks.reduce((acc, disk) => acc + (disk?.used_bytes ?? 0), 0);
+	const totalTotalBytes = disks.reduce((acc, disk) => acc + (disk?.total_bytes ?? 0), 0);
+
+	return {
+		key: "disk",
+		label: t("pages.statusPages.monitorsList.infrastructure.disk"),
+		hasData: true,
+		progress: avgUsagePercent,
+		details: [
+			{
+				label: t("pages.statusPages.monitorsList.infrastructure.used"),
+				value: prettyBytes(totalUsedBytes),
+			},
+			{
+				label: t("pages.statusPages.monitorsList.infrastructure.total"),
+				value: prettyBytes(totalTotalBytes),
+			},
+		],
+	};
+};
+
+export const InfrastructureMetrics = ({ monitor }: { monitor: StatusPageMonitor }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const latestCheck = monitor.recentChecks?.[0] ?? monitor.checks?.[0];
+
+	if (!latestCheck) {
+		return (
+			<Typography
+				variant="body2"
+				color={theme.palette.text.secondary}
+			>
+				{t("pages.statusPages.monitorsList.noData")}
+			</Typography>
+		);
+	}
+
+	const metrics: MetricConfig[] = [
+		buildCpuMetric(latestCheck, t),
+		buildMemoryMetric(latestCheck, t),
+		buildDiskMetric(latestCheck, t),
+	].filter((m): m is MetricConfig => m !== null);
+
+	if (metrics.length === 0) {
+		return (
+			<Typography
+				variant="body2"
+				color={theme.palette.text.secondary}
+			>
+				{t("pages.statusPages.monitorsList.noData")}
+			</Typography>
+		);
+	}
+
+	return (
+		<Grid
+			container
+			alignItems="center"
+			padding={theme.spacing(LAYOUT.XS)}
+		>
+			{metrics.map(({ key, label, progress, details }) => (
+				<MetricItem
+					key={key}
+					label={label}
+					progress={progress}
+					details={details}
+				/>
+			))}
+		</Grid>
+	);
+};

client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx

@@ -0,0 +1,171 @@
+import Stack from "@mui/material/Stack";
+import { useTranslation } from "react-i18next";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { HistogramResponseTime, HeatmapResponseTime } from "@/Components/common";
+import { StatusLabel, BaseBox } from "@/Components/design-elements";
+import { SwitchComponent } from "@/Components/inputs";
+import { InfrastructureMetrics } from "@/Pages/StatusPage/Status/Components/InfrastructureMetrics";
+
+import { useTheme, type Theme } from "@mui/material/styles";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import type { Monitor } from "@/Types/Monitor";
+import type { StatusPage } from "@/Types/StatusPage";
+import { getMonitorTypeLabel } from "@/Types/StatusPage";
+import type { RootState } from "@/Types/state";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
+
+interface StatusPageMonitor extends Monitor {
+	checks?: Monitor["recentChecks"];
+}
+
+interface MonitorsListProps {
+	statusPage: StatusPage;
+	monitors: StatusPageMonitor[];
+}
+
+const getMonitorBadgeStyles = (monitorType: string, theme: Theme) => {
+	const bg =
+		monitorType === "hardware" ? theme.palette.info.light : theme.palette.success.light;
+	return {
+		backgroundColor: bg,
+		color: theme.palette.background.paper,
+		padding: `${theme.spacing(SPACING.SM)} ${theme.spacing(SPACING.LG)}`,
+		borderRadius: theme.shape.borderRadius,
+	};
+};
+
+const MonitorHeader = ({
+	monitor,
+	showURL,
+}: {
+	monitor: StatusPageMonitor;
+	showURL: boolean;
+}) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			justifyContent="space-between"
+			gap={theme.spacing(LAYOUT.XS)}
+			mb={theme.spacing(LAYOUT.XS)}
+		>
+			<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1 }}>
+				<Stack
+					direction="row"
+					alignItems="center"
+					gap={theme.spacing(SPACING.LG)}
+					mb={theme.spacing(SPACING.SM)}
+				>
+					<Typography
+						variant="h6"
+						sx={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+					>
+						{monitor.name}
+					</Typography>
+					<Typography
+						variant="caption"
+						sx={getMonitorBadgeStyles(monitor.type ?? "", theme)}
+					>
+						{getMonitorTypeLabel(monitor.type, t)}
+					</Typography>
+				</Stack>
+				{showURL && monitor.url && (
+					<Typography
+						variant="body2"
+						color={theme.palette.text.secondary}
+						sx={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+					>
+						{monitor.url}
+					</Typography>
+				)}
+			</Box>
+			<StatusLabel status={monitor.status} />
+		</Stack>
+	);
+};
+
+const MonitorContent = ({
+	monitor,
+	statusPage,
+	chartType,
+}: {
+	monitor: StatusPageMonitor;
+	statusPage: StatusPage;
+	chartType: string;
+}) => {
+	const theme = useTheme();
+
+	if (monitor.type === "hardware") {
+		if (statusPage.showInfrastructure === false) return null;
+		return <InfrastructureMetrics monitor={monitor} />;
+	}
+
+	if (statusPage.showCharts === false) return null;
+
+	const checks = monitor.checks?.slice().reverse() ?? [];
+	return (
+		<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1, mb: theme.spacing(SPACING.LG) }}>
+			{chartType === "histogram" ? (
+				<HistogramResponseTime
+					height={{ xs: 50, md: 100 }}
+					gap={{ xs: theme.spacing(SPACING.SM), md: theme.spacing(LAYOUT.SM) }}
+					checks={checks}
+				/>
+			) : (
+				<HeatmapResponseTime checks={checks} />
+			)}
+		</Box>
+	);
+};
+
+export const MonitorsList = ({ statusPage, monitors }: MonitorsListProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const showURL = useSelector((state: RootState) => state.ui?.showURL);
+	const [chartType, setChartType] = useState<"histogram" | "heatmap">("histogram");
+
+	return (
+		<Stack gap={theme.spacing(LAYOUT.MD)}>
+			{statusPage.showCharts && (
+				<Stack
+					direction="row"
+					alignItems="center"
+					gap={theme.spacing(LAYOUT.SM)}
+				>
+					<Typography>{t("pages.statusPages.monitorsList.chartTypeHeatmap")}</Typography>
+					<SwitchComponent
+						dualOption
+						value={chartType}
+						checked={chartType === "histogram"}
+						onChange={(e) => setChartType(e.target.checked ? "histogram" : "heatmap")}
+					/>
+					<Typography>
+						{t("pages.statusPages.monitorsList.chartTypeHistogram")}
+					</Typography>
+				</Stack>
+			)}
+
+			{monitors.map((monitor) => (
+				<BaseBox
+					key={monitor.id}
+					padding={theme.spacing(LAYOUT.MD)}
+				>
+					<MonitorHeader
+						monitor={monitor}
+						showURL={showURL}
+					/>
+					<MonitorContent
+						monitor={monitor}
+						statusPage={statusPage}
+						chartType={chartType}
+					/>
+				</BaseBox>
+			))}
+		</Stack>
+	);
+};

client/src/Pages/StatusPage/Status/Components/StatusBar.tsx

@@ -0,0 +1,138 @@
+import {
+	AlertTriangle,
+	CircleCheck,
+	CircleX,
+	Loader,
+	PauseCircle,
+	ShieldAlert,
+	Wrench,
+} from "lucide-react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material";
+import type { Theme } from "@mui/material";
+import type { Monitor, MonitorStatus } from "@/Types/Monitor";
+
+interface StatusDisplay {
+	icon: JSX.Element;
+	msg?: string;
+	color?: string;
+}
+
+const getMonitorStatus = (monitors: Monitor[], theme: Theme, t: Function) => {
+	const monitorsStatus: StatusDisplay = {
+		icon: <AlertTriangle size={24} />,
+	};
+
+	// Handle empty monitors array
+	if (monitors.length === 0) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.noMonitors");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <CircleX size={24} />;
+		return monitorsStatus;
+	}
+
+	const allOf = (...statuses: MonitorStatus[]) =>
+		monitors.every((m) => statuses.includes(m.status));
+	const someOf = (...statuses: MonitorStatus[]) =>
+		monitors.some((m) => statuses.includes(m.status));
+	const noneOf = (...statuses: MonitorStatus[]) =>
+		monitors.every((m) => !statuses.includes(m.status));
+
+	// All monitors in a single state
+	if (allOf("up")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allUp");
+		monitorsStatus.color = theme.palette.success.main;
+		monitorsStatus.icon = <CircleCheck size={24} />;
+	} else if (allOf("breached")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allBreached");
+		monitorsStatus.color = theme.palette.error.main;
+		monitorsStatus.icon = <ShieldAlert size={24} />;
+	} else if (allOf("maintenance")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allMaintenance");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <Wrench size={24} />;
+	} else if (allOf("down")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allDown");
+		monitorsStatus.color = theme.palette.error.main;
+		monitorsStatus.icon = <CircleX size={24} />;
+	} else if (allOf("paused")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allPaused");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <PauseCircle size={24} />;
+	} else if (allOf("initializing")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allInitializing");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <Loader size={24} />;
+
+		// Breached takes highest priority in mixed states
+	} else if (someOf("breached") && someOf("down")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.breachedAndDown");
+		monitorsStatus.color = theme.palette.error.main;
+		monitorsStatus.icon = <ShieldAlert size={24} />;
+	} else if (someOf("breached")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.breached");
+		monitorsStatus.color = theme.palette.error.main;
+		monitorsStatus.icon = <ShieldAlert size={24} />;
+
+		// Maintenance combinations
+	} else if (someOf("maintenance") && someOf("down")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.maintenanceAndDown");
+		monitorsStatus.color = theme.palette.error.main;
+		monitorsStatus.icon = <Wrench size={24} />;
+	} else if (someOf("maintenance") && noneOf("down")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.maintenance");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <Wrench size={24} />;
+
+		// Degraded (some down, no maintenance/breached)
+	} else if (someOf("down")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.degraded");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <AlertTriangle size={24} />;
+
+		// Some Paused
+	} else if (someOf("paused")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.partiallyPaused");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <PauseCircle size={24} />;
+
+		// Initializing
+	} else if (someOf("initializing")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.initializing");
+		monitorsStatus.color = theme.palette.info.main;
+		monitorsStatus.icon = <Loader size={24} />;
+	} else {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.unknown");
+		monitorsStatus.color = theme.palette.warning.main;
+	}
+
+	return monitorsStatus;
+};
+
+interface StatusBarProps {
+	monitors: Monitor[];
+}
+
+export const StatusBar = ({ monitors }: StatusBarProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const monitorsStatus = getMonitorStatus(monitors, theme, t);
+
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			justifyContent="center"
+			gap={theme.spacing(2)}
+			height={theme.spacing(30)}
+			bgcolor={monitorsStatus.color}
+			borderRadius={theme.shape.borderRadius}
+		>
+			{monitorsStatus.icon}
+			<Typography>{monitorsStatus.msg}</Typography>
+		</Stack>
+	);
+};

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

@@ -1,64 +1,18 @@
 import { BasePage, BaseFallback } from "@/Components/design-elements";
+import { StatusBar } from "@/Pages/StatusPage/Status/Components/StatusBar";
+import { MonitorsList } from "@/Pages/StatusPage/Status/Components/MonitorsList";
 import Typography from "@mui/material/Typography";
 import { Link } from "react-router-dom";
 import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
 
-import { useTheme } from "@mui/material";
+import { useMediaQuery, useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useLocation, useParams } from "react-router-dom";
 import { useGet } from "@/Hooks/UseApi";
-import { resolveStatusPageTheme } from "@/Types/StatusPage";
-import {
-	PUBLIC_STATUS_PAGE_PREFIX,
-	type StatusPageResponse,
-	type StatusPageTheme,
-} from "@/Types/StatusPage";
-import { HeaderStatusPageControls } from "@/Pages/StatusPage/Status/Components/HeaderStatusPageControls";
-import { StatusPageThemeProvider } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
-import {
-	BaseStatusPage,
-	type ThemeConfig,
-} from "@/Pages/StatusPage/Status/themes/shared/BaseStatusPage";
-import { BrowserFrame } from "@/Pages/StatusPage/Status/themes/BrowserFrame";
-import { refinedStyles } from "@/Pages/StatusPage/Status/themes/refined/styles";
-import { RefinedHeader } from "@/Pages/StatusPage/Status/themes/refined/RefinedHeader";
-import { RefinedHero } from "@/Pages/StatusPage/Status/themes/refined/RefinedHero";
-import { modernStyles } from "@/Pages/StatusPage/Status/themes/modern/styles";
-import { ModernHeader } from "@/Pages/StatusPage/Status/themes/modern/ModernHeader";
-import { ModernHero } from "@/Pages/StatusPage/Status/themes/modern/ModernHero";
-import { boldStyles } from "@/Pages/StatusPage/Status/themes/bold/styles";
-import { BoldHeader } from "@/Pages/StatusPage/Status/themes/bold/BoldHeader";
-import { BoldHero } from "@/Pages/StatusPage/Status/themes/bold/BoldHero";
-import { editorialStyles } from "@/Pages/StatusPage/Status/themes/editorial/styles";
-import { EditorialHeader } from "@/Pages/StatusPage/Status/themes/editorial/EditorialHeader";
-import { EditorialHero } from "@/Pages/StatusPage/Status/themes/editorial/EditorialHero";
-
-const THEME_CONFIGS: Record<StatusPageTheme, ThemeConfig<any>> = {
-	refined: {
-		createStyles: refinedStyles,
-		HeaderSlot: RefinedHeader,
-		HeroSlot: RefinedHero,
-	},
-	modern: {
-		createStyles: modernStyles,
-		HeaderSlot: ModernHeader,
-		HeroSlot: ModernHero,
-		overallStatusOptions: { iconSize: 20 },
-	},
-	bold: {
-		createStyles: boldStyles,
-		HeaderSlot: BoldHeader,
-		HeroSlot: BoldHero,
-		overallStatusOptions: { iconSize: 18 },
-	},
-	editorial: {
-		createStyles: editorialStyles,
-		HeaderSlot: EditorialHeader,
-		HeroSlot: EditorialHero,
-		overallStatusOptions: { allUpKey: "pages.statusPages.editorial.allUp" },
-	},
-};
+import type { StatusPageResponse } from "@/Types/StatusPage";
+import { HeaderStatusPageControls } from "./Components/HeaderStatusPageControls";
 
 const StatusPageView = () => {
 	const theme = useTheme();
@@ -66,8 +20,8 @@ const StatusPageView = () => {
 	const { url } = useParams();
 	const isAdmin = useIsAdmin();
 	const location = useLocation();
-
-	const isPublic = location.pathname.startsWith(PUBLIC_STATUS_PAGE_PREFIX);
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const isPublic = location.pathname.startsWith("/status/public");
 
 	const apiUrl = url ? `/status-page/${url}?type=uptime&type=infrastructure` : null;
 
@@ -111,50 +65,48 @@ const StatusPageView = () => {
 		);
 	}
 
-	const themeConfig = THEME_CONFIGS[resolveStatusPageTheme(statusPage.theme)];
-	const themedRenderer = (
-		<BaseStatusPage
-			statusPage={statusPage}
-			monitors={monitors}
-			config={themeConfig}
-		/>
-	);
-
-	// Public route: render directly on the viewport, themed background covers everything.
+	let sx: React.CSSProperties = {};
 	if (isPublic) {
-		return (
-			<StatusPageThemeProvider
-				theme={statusPage.theme}
-				themeMode={statusPage.themeMode}
-				timezone={statusPage.timezone}
-				paintBody
-			>
-				{themedRenderer}
-			</StatusPageThemeProvider>
-		);
+		sx.paddingTop = theme.spacing(20);
+		sx.paddingLeft = isSmall ? "5vw" : "20vw";
+		sx.paddingRight = isSmall ? "5vw" : "20vw";
 	}
 
-	const publicUrl = `${window.location.origin}${PUBLIC_STATUS_PAGE_PREFIX}/${statusPage.url}`;
+	const logoSrc = statusPage.logo?.data
+		? `data:${statusPage.logo.contentType};base64,${statusPage.logo.data}`
+		: null;
+
 	return (
 		<BasePage
 			loading={isLoading}
 			error={error}
-			breadcrumbOverride={undefined}
-			sx={{ flex: 1, minHeight: 0 }}
+			sx={sx}
+			breadcrumbOverride={isPublic ? [] : undefined}
 		>
 			<HeaderStatusPageControls
 				isAdmin={isAdmin}
 				statusPage={statusPage}
-				isPublic={false}
+				isPublic={isPublic}
+			/>
+			{logoSrc && (
+				<Box
+					component="img"
+					src={logoSrc}
+					alignSelf={"flex-start"}
+					alt={statusPage.companyName}
+					sx={{
+						maxHeight: 120,
+						maxWidth: "100%",
+						objectFit: "contain",
+						mb: 2,
+					}}
+				/>
+			)}
+			<StatusBar monitors={monitors} />
+			<MonitorsList
+				statusPage={statusPage}
+				monitors={monitors}
 			/>
-			<StatusPageThemeProvider
-				theme={statusPage.theme}
-				themeMode={statusPage.themeMode}
-				timezone={statusPage.timezone}
-				transparent
-			>
-				<BrowserFrame url={publicUrl}>{themedRenderer}</BrowserFrame>
-			</StatusPageThemeProvider>
 		</BasePage>
 	);
 };

client/src/Pages/StatusPage/Status/themes/BrowserFrame.tsx

@@ -1,70 +0,0 @@
-import type { ReactNode } from "react";
-import Box from "@mui/material/Box";
-import { useStatusPageTheme } from "./StatusPageThemeProvider";
-
-interface Props {
-	url: string;
-	children: ReactNode;
-}
-
-export const BrowserFrame = ({ url, children }: Props) => {
-	const { tokens } = useStatusPageTheme();
-
-	return (
-		<Box
-			sx={{
-				width: "100%",
-				minHeight: "calc(100vh - 180px)",
-				display: "flex",
-				flexDirection: "column",
-				borderRadius: "12px",
-				overflow: "hidden",
-				border: `1px solid ${tokens.border}`,
-				background: tokens.surface,
-				color: tokens.text,
-			}}
-		>
-			<Box
-				sx={{
-					display: "flex",
-					alignItems: "center",
-					gap: 1.25,
-					padding: "10px 14px",
-					background: tokens.bg,
-					borderBottom: `1px solid ${tokens.border}`,
-				}}
-			>
-				<Box sx={{ display: "flex", gap: 0.75 }}>
-					<Box
-						sx={{ width: 12, height: 12, borderRadius: "50%", background: "#ff5f57" }}
-					/>
-					<Box
-						sx={{ width: 12, height: 12, borderRadius: "50%", background: "#febc2e" }}
-					/>
-					<Box
-						sx={{ width: 12, height: 12, borderRadius: "50%", background: "#28c840" }}
-					/>
-				</Box>
-				<Box
-					sx={{
-						flex: 1,
-						padding: "4px 12px",
-						marginLeft: 2,
-						borderRadius: "6px",
-						background: tokens.surface,
-						border: `1px solid ${tokens.border}`,
-						fontFamily: "ui-monospace, Menlo, monospace",
-						fontSize: 12,
-						color: tokens.textMuted,
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap",
-					}}
-				>
-					{url}
-				</Box>
-			</Box>
-			<Box sx={{ flex: 1, minHeight: 0 }}>{children}</Box>
-		</Box>
-	);
-};

client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx

@@ -1,153 +0,0 @@
-import {
-	createContext,
-	useContext,
-	useEffect,
-	useMemo,
-	useState,
-	type ReactNode,
-} from "react";
-import {
-	DEFAULT_STATUS_PAGE_THEME,
-	resolveStatusPageTheme,
-	resolveStatusPageThemeMode,
-	type StatusPageTheme,
-	type StatusPageThemeMode,
-} from "@/Types/StatusPage";
-import { resolveTimezone } from "@/Utils/TimeUtils";
-import { themeTokens, type StatusPageThemeTokens } from "./tokens";
-
-type ResolvedMode = "light" | "dark";
-
-interface StatusPageThemeContextValue {
-	theme: StatusPageTheme;
-	mode: ResolvedMode;
-	tokens: StatusPageThemeTokens;
-	timezone: string;
-}
-
-const StatusPageThemeContext = createContext<StatusPageThemeContextValue | null>(null);
-
-const resolveSystemMode = (): ResolvedMode => {
-	if (typeof window === "undefined" || !window.matchMedia) return "light";
-	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-};
-
-interface Props {
-	theme?: StatusPageTheme;
-	themeMode?: StatusPageThemeMode;
-	timezone?: string;
-	/**
-	 * When true, paint the document body with the theme background so it
-	 * covers beyond the provider's wrapper (useful on the public route
-	 * where no admin shell sits behind). Defaults to false for admin
-	 * previews that already have an app background.
-	 */
-	paintBody?: boolean;
-	/**
-	 * When true, the provider's wrapper div does NOT paint its own
-	 * background or set a min-height. Use this when the wrapper is
-	 * inside a clipped container (e.g. BrowserFrame) that already sets
-	 * the visible background, so the wrapper's bg doesn't bleed past the
-	 * container's rounded corners.
-	 */
-	transparent?: boolean;
-	children: ReactNode;
-}
-
-export const StatusPageThemeProvider = ({
-	theme,
-	themeMode,
-	timezone,
-	paintBody = false,
-	transparent = false,
-	children,
-}: Props) => {
-	const resolvedTheme = resolveStatusPageTheme(theme);
-	const resolvedThemeMode = resolveStatusPageThemeMode(themeMode);
-	const resolvedTimezone = resolveTimezone(timezone);
-
-	const [systemMode, setSystemMode] = useState<ResolvedMode>(resolveSystemMode);
-
-	useEffect(() => {
-		if (resolvedThemeMode !== "auto") return;
-		if (typeof window === "undefined" || !window.matchMedia) return;
-		const mq = window.matchMedia("(prefers-color-scheme: dark)");
-		// Reconcile on first paint whenever we (re-)enter auto mode — only
-		// when it disagrees with the stored value, so we don't trigger an
-		// extra render on the common hot path.
-		const next: ResolvedMode = mq.matches ? "dark" : "light";
-		setSystemMode((prev) => (prev === next ? prev : next));
-		const handler = (e: MediaQueryListEvent) =>
-			setSystemMode(e.matches ? "dark" : "light");
-		mq.addEventListener("change", handler);
-		return () => mq.removeEventListener("change", handler);
-	}, [resolvedThemeMode]);
-
-	useEffect(() => {
-		if (!paintBody || typeof document === "undefined") return;
-		const html = document.documentElement;
-		const body = document.body;
-		const prev = {
-			htmlBg: html.style.background,
-			bodyBg: body.style.background,
-			bodyMargin: body.style.margin,
-			htmlColorScheme: html.style.colorScheme,
-		};
-		const resolvedMode = resolvedThemeMode === "auto" ? systemMode : resolvedThemeMode;
-		const bg = themeTokens[resolvedTheme][resolvedMode].bg;
-		html.style.background = bg;
-		body.style.background = bg;
-		body.style.margin = "0";
-		html.style.colorScheme = resolvedMode;
-		return () => {
-			html.style.background = prev.htmlBg;
-			body.style.background = prev.bodyBg;
-			body.style.margin = prev.bodyMargin;
-			html.style.colorScheme = prev.htmlColorScheme;
-		};
-	}, [paintBody, resolvedTheme, resolvedThemeMode, systemMode]);
-
-	const resolvedMode: ResolvedMode =
-		resolvedThemeMode === "auto" ? systemMode : resolvedThemeMode;
-	const tokens = themeTokens[resolvedTheme][resolvedMode];
-
-	const value = useMemo(
-		() => ({
-			theme: resolvedTheme,
-			mode: resolvedMode,
-			tokens,
-			timezone: resolvedTimezone,
-		}),
-		[resolvedTheme, resolvedMode, tokens, resolvedTimezone]
-	);
-
-	return (
-		<StatusPageThemeContext.Provider value={value}>
-			<div
-				style={
-					transparent
-						? undefined
-						: {
-								background: tokens.bg,
-								minHeight: "100vh",
-							}
-				}
-			>
-				{children}
-			</div>
-		</StatusPageThemeContext.Provider>
-	);
-};
-
-export const useStatusPageTheme = (): StatusPageThemeContextValue => {
-	const ctx = useContext(StatusPageThemeContext);
-	if (!ctx) {
-		return {
-			theme: DEFAULT_STATUS_PAGE_THEME,
-			mode: resolveSystemMode(),
-			tokens: themeTokens[DEFAULT_STATUS_PAGE_THEME][resolveSystemMode()],
-			timezone: resolveTimezone(),
-		};
-	}
-	return ctx;
-};

client/src/Pages/StatusPage/Status/themes/bold/BoldHeader.tsx

@@ -1,20 +0,0 @@
-import Box from "@mui/material/Box";
-import { monoFirstChar } from "@/Pages/StatusPage/Status/themes/shared/overallStatus";
-import type { SlotProps } from "@/Pages/StatusPage/Status/themes/shared/BaseStatusPage";
-import type { BoldStyles } from "@/Pages/StatusPage/Status/themes/bold/styles";
-
-export const BoldHeader = ({ statusPage, logoSrc, styles }: SlotProps<BoldStyles>) => (
-	<Box sx={styles.brand}>
-		{logoSrc ? (
-			<Box
-				component="img"
-				src={logoSrc}
-				alt={statusPage.companyName}
-				sx={styles.logoImg}
-			/>
-		) : (
-			<Box sx={styles.logoConic}>{monoFirstChar(statusPage.companyName)}</Box>
-		)}
-		{statusPage.companyName}
-	</Box>
-);

client/src/Pages/StatusPage/Status/themes/bold/BoldHero.tsx

@@ -1,32 +0,0 @@
-import Box from "@mui/material/Box";
-import { useTranslation } from "react-i18next";
-import type { SlotProps } from "@/Pages/StatusPage/Status/themes/shared/BaseStatusPage";
-import type { BoldStyles } from "@/Pages/StatusPage/Status/themes/bold/styles";
-
-export const BoldHero = ({ overall, monitorCount, styles }: SlotProps<BoldStyles>) => {
-	const { t } = useTranslation();
-	return (
-		<Box sx={styles.hero}>
-			<Box
-				component="h1"
-				sx={styles.heroTitle}
-			>
-				<Box
-					component="span"
-					sx={styles.heroCheck(overall.tone)}
-				>
-					{overall.icon}
-				</Box>
-				{overall.message}
-			</Box>
-			<Box
-				component="p"
-				sx={styles.heroSub}
-			>
-				{t("pages.statusPages.statusBar.monitoringSummary", {
-					count: monitorCount,
-				})}
-			</Box>
-		</Box>
-	);
-};

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

@@ -1,405 +0,0 @@
-import type { SxProps, Theme } from "@mui/material/styles";
-import type { StatusPageThemeTokens } from "../tokens";
-import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
-import { BOLD_SANS_STACK, MONO_STACK } from "../shared/fontStacks";
-import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
-
-export type BoldHeatCell = "fast" | "med" | "slow" | "down" | "empty";
-export type BoldBarKind = "up" | "down" | "empty";
-export type BoldGaugeFill = "ok" | "warm" | "hot";
-
-export interface BoldStyles {
-	page: SxProps<Theme>;
-	top: SxProps<Theme>;
-	brand: SxProps<Theme>;
-	logoConic: SxProps<Theme>;
-	logoImg: SxProps<Theme>;
-	hero: SxProps<Theme>;
-	heroTitle: SxProps<Theme>;
-	heroCheck: (tone: OverallTone) => SxProps<Theme>;
-	heroSub: SxProps<Theme>;
-	chartSwitchWrap: SxProps<Theme>;
-	chartSwitch: SxProps<Theme>;
-	chartSwitchButton: (active: boolean) => SxProps<Theme>;
-	monitorList: SxProps<Theme>;
-	card: SxProps<Theme>;
-	cardRow: SxProps<Theme>;
-	cardLeft: SxProps<Theme>;
-	monitorName: SxProps<Theme>;
-	monitorMeta: SxProps<Theme>;
-	pill: SxProps<Theme>;
-	pillHardware: SxProps<Theme>;
-	monitorUrl: SxProps<Theme>;
-	badge: (tone: OverallTone) => SxProps<Theme>;
-	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: BoldHeatCell) => SxProps<Theme>;
-	histogram: SxProps<Theme>;
-	bar: (kind: BoldBarKind, heightPct: number) => SxProps<Theme>;
-	chartStats: SxProps<Theme>;
-	infra: SxProps<Theme>;
-	infraEmpty: SxProps<Theme>;
-	gauge: SxProps<Theme>;
-	gaugeLabel: SxProps<Theme>;
-	gaugeValue: SxProps<Theme>;
-	gaugeBar: SxProps<Theme>;
-	gaugeFill: (level: BoldGaugeFill, widthPct: number) => SxProps<Theme>;
-	gaugeSub: SxProps<Theme>;
-	footer: SxProps<Theme>;
-}
-
-export const boldStyles = (
-	tokens: StatusPageThemeTokens,
-	isDark: boolean
-): BoldStyles => {
-	const heatCellBg: Record<BoldHeatCell, string> = {
-		fast: tokens.up,
-		med: `color-mix(in srgb, ${tokens.up} 70%, #ffffff 30%)`,
-		slow: tokens.warn,
-		down: tokens.down,
-		empty: tokens.border,
-	};
-	const heatCellShadow: Record<BoldHeatCell, string> = {
-		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)`,
-		down: `0 0 6px color-mix(in srgb, ${tokens.down} 20%, transparent)`,
-		empty: "none",
-	};
-
-	const barBg: Record<BoldBarKind, string> = {
-		up: tokens.up,
-		down: tokens.down,
-		empty: tokens.border,
-	};
-
-	const gaugeFillBg: Record<BoldGaugeFill, string> = {
-		ok: `linear-gradient(90deg, ${tokens.up}, color-mix(in srgb, ${tokens.up} 70%, #ffffff 30%))`,
-		warm: `linear-gradient(90deg, ${tokens.warn}, #fbbf24)`,
-		hot: `linear-gradient(90deg, ${tokens.down}, #fb7185)`,
-	};
-
-	const heroBgLight = `linear-gradient(135deg, color-mix(in srgb, ${tokens.up} 8%, transparent), transparent 60%), ${tokens.surface}`;
-	const heroBgDark = `linear-gradient(135deg, color-mix(in srgb, ${tokens.up} 16%, transparent), transparent 60%), ${tokens.surface}`;
-
-	const heroGlowLight = `radial-gradient(400px 200px at 20% 30%, color-mix(in srgb, ${tokens.up} 14%, transparent), transparent 60%), radial-gradient(300px 200px at 90% 80%, color-mix(in srgb, ${tokens.upStrong} 10%, transparent), transparent 60%)`;
-	const heroGlowDark = `radial-gradient(400px 200px at 20% 30%, color-mix(in srgb, ${tokens.up} 32%, transparent), transparent 60%), radial-gradient(300px 200px at 90% 80%, color-mix(in srgb, ${tokens.upStrong} 22%, transparent), transparent 60%)`;
-
-	return {
-		page: {
-			flex: "1 0 auto",
-			maxWidth: 1040,
-			width: "100%",
-			mx: "auto",
-			p: "56px 24px 96px",
-			fontFamily: BOLD_SANS_STACK,
-			fontSize: 14,
-			lineHeight: 1.55,
-			color: tokens.text,
-			WebkitFontSmoothing: "antialiased",
-		},
-
-		top: {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "space-between",
-			mb: "36px",
-		},
-		brand: {
-			display: "flex",
-			alignItems: "center",
-			gap: "14px",
-			fontWeight: 700,
-			fontSize: 16,
-			letterSpacing: "-0.01em",
-			color: tokens.text,
-		},
-		logoConic: {
-			width: 36,
-			height: 36,
-			borderRadius: "12px",
-			background: `conic-gradient(from 140deg, ${tokens.up}, ${tokens.upStrong}, #0f766e, ${tokens.up})`,
-			display: "grid",
-			placeItems: "center",
-			color: "#05070a",
-			fontWeight: 900,
-			fontSize: 14,
-			boxShadow: `0 8px 24px color-mix(in srgb, ${tokens.up} 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2)`,
-		},
-		logoImg: { maxHeight: 36, maxWidth: 140, objectFit: "contain" },
-
-		hero: {
-			position: "relative",
-			borderRadius: "22px",
-			padding: "36px 36px 32px",
-			mb: "28px",
-			background: isDark ? heroBgDark : heroBgLight,
-			border: `1px solid ${tokens.border}`,
-			overflow: "hidden",
-			"&::before": {
-				content: '""',
-				position: "absolute",
-				inset: 0,
-				background: isDark ? heroGlowDark : heroGlowLight,
-				pointerEvents: "none",
-				opacity: 0.8,
-				zIndex: 0,
-				...(isDark ? { mixBlendMode: "screen" } : {}),
-			},
-			"& > *": { position: "relative", zIndex: 1 },
-		},
-		heroTitle: {
-			m: 0,
-			fontSize: 34,
-			fontWeight: 800,
-			letterSpacing: "-0.02em",
-			lineHeight: 1.1,
-			color: tokens.text,
-			display: "flex",
-			alignItems: "center",
-			gap: "10px",
-		},
-		heroCheck: (tone) => ({
-			display: "inline-grid",
-			placeItems: "center",
-			width: 32,
-			height: 32,
-			borderRadius: "50%",
-			background: toneColor(tone, tokens),
-			color: tone === "down" ? "#fff" : "#05070a",
-			flexShrink: 0,
-			boxShadow: `0 0 0 6px ${toneSoft(tone, tokens)}`,
-		}),
-		heroSub: { mt: "10px", mb: 0, color: tokens.textMuted, fontSize: 14 },
-
-		chartSwitchWrap: { display: "flex", justifyContent: "flex-end", mb: "16px" },
-		chartSwitch: {
-			display: "inline-flex",
-			border: `1px solid ${tokens.border}`,
-			borderRadius: "999px",
-			background: tokens.surface,
-			p: "3px",
-			gap: "2px",
-		},
-		chartSwitchButton: (active) => ({
-			border: 0,
-			background: active ? tokens.upSoft : "transparent",
-			fontFamily: "inherit",
-			fontSize: 11,
-			padding: "8px 18px",
-			cursor: "pointer",
-			color: active ? tokens.up : tokens.textMuted,
-			fontWeight: 700,
-			textTransform: "uppercase",
-			letterSpacing: "0.12em",
-			transition: "background 0.2s, color 0.2s",
-			borderRadius: "999px",
-			"&:hover": { color: active ? tokens.up : tokens.text },
-		}),
-
-		monitorList: {
-			listStyle: "none",
-			m: 0,
-			p: 0,
-			display: "flex",
-			flexDirection: "column",
-			gap: "14px",
-		},
-		card: {
-			background: tokens.surface,
-			border: `1px solid ${tokens.border}`,
-			borderRadius: "18px",
-			overflow: "hidden",
-			transition: "transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s",
-			"&:hover": {
-				transform: "translateY(-3px)",
-				borderColor: `color-mix(in srgb, ${tokens.up} 40%, ${tokens.border})`,
-			},
-		},
-		cardRow: {
-			display: "grid",
-			gridTemplateColumns: "1fr auto",
-			alignItems: "center",
-			gap: "24px",
-			p: "22px 28px",
-		},
-		cardLeft: { minWidth: 0 },
-		monitorName: {
-			fontWeight: 700,
-			fontSize: 17,
-			letterSpacing: "-0.01em",
-			color: tokens.text,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			whiteSpace: "nowrap",
-		},
-		monitorMeta: {
-			display: "flex",
-			gap: "10px",
-			alignItems: "center",
-			mt: "6px",
-			flexWrap: "wrap",
-		},
-		pill: {
-			fontSize: 10,
-			textTransform: "uppercase",
-			letterSpacing: "0.1em",
-			color: tokens.textMuted,
-			background: `color-mix(in srgb, ${tokens.surface} 80%, ${tokens.bg})`,
-			border: `1px solid ${tokens.border}`,
-			padding: "3px 10px",
-			borderRadius: "999px",
-			fontWeight: 700,
-		},
-		pillHardware: {
-			fontSize: 10,
-			textTransform: "uppercase",
-			letterSpacing: "0.1em",
-			padding: "3px 10px",
-			borderRadius: "999px",
-			fontWeight: 700,
-			color: tokens.up,
-			borderColor: `color-mix(in srgb, ${tokens.up} 40%, transparent)`,
-			border: `1px solid color-mix(in srgb, ${tokens.up} 40%, transparent)`,
-			background: tokens.upSoft,
-		},
-		monitorUrl: {
-			fontSize: 12,
-			color: tokens.textMuted,
-			fontFamily: MONO_STACK,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			whiteSpace: "nowrap",
-			maxWidth: 300,
-		},
-
-		badge: (tone) => ({
-			fontSize: 11,
-			fontWeight: 800,
-			padding: "6px 14px",
-			borderRadius: "999px",
-			display: "inline-flex",
-			alignItems: "center",
-			gap: "7px",
-			textTransform: "uppercase",
-			letterSpacing: "0.08em",
-			whiteSpace: "nowrap",
-			background: toneSoft(tone, tokens),
-			color: toneColor(tone, tokens),
-			"&::before": {
-				content: '""',
-				width: 6,
-				height: 6,
-				borderRadius: "50%",
-				background: "currentColor",
-				boxShadow: "0 0 8px currentColor",
-			},
-		}),
-
-		heatmap: {
-			padding: "0 28px 22px",
-			display: "grid",
-			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
-			gap: "3px",
-			height: 48,
-		},
-		heatmapCell: (kind) => ({
-			borderRadius: "3px",
-			background: heatCellBg[kind],
-			boxShadow: heatCellShadow[kind],
-			opacity: kind === "empty" ? 0.4 : 1,
-			transition: "transform 0.15s",
-			"&:hover": { transform: "scaleY(1.2)" },
-		}),
-
-		histogram: {
-			padding: "0 28px",
-			display: "grid",
-			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
-			gap: "3px",
-			alignItems: "flex-end",
-			height: 48,
-		},
-		bar: (kind, heightPct) => ({
-			background: barBg[kind],
-			borderRadius: "3px",
-			minHeight: 4,
-			opacity: kind === "empty" ? 0.4 : 1,
-			height: `${heightPct}%`,
-		}),
-		chartStats: {
-			padding: "0 28px 22px",
-			fontSize: 11,
-			color: tokens.textMuted,
-			fontVariantNumeric: "tabular-nums",
-			fontWeight: 700,
-			letterSpacing: "0.05em",
-		},
-
-		infra: {
-			padding: "18px 28px 26px",
-			display: "grid",
-			gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)" },
-			gap: "16px",
-		},
-		infraEmpty: {
-			padding: "18px 28px 26px",
-			color: tokens.textMuted,
-			fontSize: 13,
-		},
-		gauge: {
-			border: `1px solid ${tokens.border}`,
-			borderRadius: "16px",
-			p: "16px 18px",
-			background: `color-mix(in srgb, ${tokens.surface} 80%, ${tokens.bg})`,
-		},
-		gaugeLabel: {
-			fontSize: 10,
-			color: tokens.textMuted,
-			textTransform: "uppercase",
-			letterSpacing: "0.12em",
-			fontWeight: 700,
-		},
-		gaugeValue: {
-			fontSize: 30,
-			fontWeight: 800,
-			letterSpacing: "-0.02em",
-			mt: "6px",
-			fontVariantNumeric: "tabular-nums",
-			color: tokens.text,
-		},
-		gaugeBar: {
-			height: 6,
-			background: tokens.border,
-			borderRadius: "3px",
-			overflow: "hidden",
-			mt: "12px",
-		},
-		gaugeFill: (level, widthPct) => ({
-			display: "block",
-			height: "100%",
-			background: gaugeFillBg[level],
-			borderRadius: "3px",
-			transition: "width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1)",
-			width: `${Math.max(0, Math.min(100, widthPct))}%`,
-		}),
-		gaugeSub: {
-			fontSize: 11,
-			color: tokens.textMuted,
-			mt: "10px",
-			fontVariantNumeric: "tabular-nums",
-		},
-
-		footer: {
-			textAlign: "center",
-			color: tokens.textMuted,
-			fontSize: 12,
-			mt: "52px",
-			"& a": {
-				color: tokens.up,
-				textDecoration: "underline",
-				textUnderlineOffset: "3px",
-				fontWeight: 800,
-			},
-		},
-	};
-};

client/src/Pages/StatusPage/Status/themes/editorial/EditorialHeader.tsx

@@ -1,36 +0,0 @@
-import Box from "@mui/material/Box";
-import { useTranslation } from "react-i18next";
-import type { SlotProps } from "@/Pages/StatusPage/Status/themes/shared/BaseStatusPage";
-import type { EditorialStyles } from "@/Pages/StatusPage/Status/themes/editorial/styles";
-
-export const EditorialHeader = ({
-	statusPage,
-	logoSrc,
-	styles,
-}: SlotProps<EditorialStyles>) => {
-	const { t } = useTranslation();
-	return (
-		<Box sx={styles.brandWrap}>
-			{logoSrc && (
-				<Box
-					component="img"
-					src={logoSrc}
-					alt={statusPage.companyName}
-					sx={styles.logoImg}
-				/>
-			)}
-			<Box
-				component="h2"
-				sx={styles.brandEyebrow}
-			>
-				{statusPage.companyName}
-			</Box>
-			<Box
-				component="h1"
-				sx={styles.brandTitle}
-			>
-				{t("pages.statusPages.editorial.reportTitle")}
-			</Box>
-		</Box>
-	);
-};

client/src/Pages/StatusPage/Status/themes/editorial/EditorialHero.tsx

@@ -1,46 +0,0 @@
-import { useMemo } from "react";
-import Box from "@mui/material/Box";
-import { useTranslation } from "react-i18next";
-import type { SlotProps } from "@/Pages/StatusPage/Status/themes/shared/BaseStatusPage";
-import type { EditorialStyles } from "@/Pages/StatusPage/Status/themes/editorial/styles";
-
-export const EditorialHero = ({
-	overall,
-	monitorCount,
-	styles,
-}: SlotProps<EditorialStyles>) => {
-	const { t } = useTranslation();
-	const todayLabel = useMemo(
-		() =>
-			new Date().toLocaleDateString(undefined, {
-				year: "numeric",
-				month: "long",
-				day: "numeric",
-			}),
-		[]
-	);
-
-	return (
-		<>
-			<Box
-				component="p"
-				sx={styles.statusLine}
-			>
-				<Box
-					component="span"
-					sx={styles.statusDot(overall.tone)}
-				/>
-				{overall.message}
-			</Box>
-			<Box
-				component="p"
-				sx={styles.dateline}
-			>
-				{todayLabel} ·{" "}
-				{t("pages.statusPages.statusBar.monitoringSummary", {
-					count: monitorCount,
-				})}
-			</Box>
-		</>
-	);
-};

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

@@ -1,341 +0,0 @@
-import type { SxProps, Theme } from "@mui/material/styles";
-import type { StatusPageThemeTokens } from "../tokens";
-import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
-import {
-	EDITORIAL_SECONDARY_SANS_STACK,
-	MONO_STACK,
-	SERIF_STACK,
-} from "../shared/fontStacks";
-import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
-
-export type EditorialHeatCell = "fast" | "med" | "slow" | "down" | "empty";
-export type EditorialBarKind = "up" | "down" | "empty";
-export type EditorialGaugeFill = "ok" | "warm" | "hot";
-
-export interface EditorialStyles {
-	page: SxProps<Theme>;
-	top: SxProps<Theme>;
-	brandWrap: SxProps<Theme>;
-	logoImg: SxProps<Theme>;
-	brandEyebrow: SxProps<Theme>;
-	brandTitle: SxProps<Theme>;
-	statusLine: SxProps<Theme>;
-	statusDot: (tone: OverallTone) => SxProps<Theme>;
-	dateline: SxProps<Theme>;
-	chartSwitchWrap: SxProps<Theme>;
-	chartSwitch: SxProps<Theme>;
-	chartSwitchButton: (active: boolean) => SxProps<Theme>;
-	monitorList: SxProps<Theme>;
-	card: SxProps<Theme>;
-	cardRow: SxProps<Theme>;
-	cardLeft: SxProps<Theme>;
-	monitorName: SxProps<Theme>;
-	monitorMeta: SxProps<Theme>;
-	pill: SxProps<Theme>;
-	pillHardware: SxProps<Theme>;
-	monitorUrl: SxProps<Theme>;
-	badge: (tone: OverallTone) => SxProps<Theme>;
-	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: EditorialHeatCell) => SxProps<Theme>;
-	histogram: SxProps<Theme>;
-	bar: (kind: EditorialBarKind, heightPct: number) => SxProps<Theme>;
-	chartStats: SxProps<Theme>;
-	infra: SxProps<Theme>;
-	infraEmpty: SxProps<Theme>;
-	gauge: SxProps<Theme>;
-	gaugeLabel: SxProps<Theme>;
-	gaugeValue: SxProps<Theme>;
-	gaugeBar: SxProps<Theme>;
-	gaugeFill: (level: EditorialGaugeFill, widthPct: number) => SxProps<Theme>;
-	gaugeSub: SxProps<Theme>;
-	footer: SxProps<Theme>;
-}
-
-export const editorialStyles = (
-	tokens: StatusPageThemeTokens,
-	_isDark: boolean
-): EditorialStyles => {
-	const heatCellBg: Record<EditorialHeatCell, string> = {
-		fast: tokens.up,
-		med: `color-mix(in srgb, ${tokens.up} 60%, ${tokens.bg})`,
-		slow: tokens.warn,
-		down: tokens.down,
-		empty: tokens.border,
-	};
-
-	const barBg: Record<EditorialBarKind, string> = {
-		up: tokens.up,
-		down: tokens.down,
-		empty: tokens.border,
-	};
-
-	const gaugeFillBg: Record<EditorialGaugeFill, string> = {
-		ok: tokens.up,
-		warm: tokens.warn,
-		hot: tokens.down,
-	};
-
-	return {
-		page: {
-			flex: "1 0 auto",
-			maxWidth: 760,
-			width: "100%",
-			mx: "auto",
-			p: "64px 24px 96px",
-			fontFamily: SERIF_STACK,
-			fontSize: 15,
-			lineHeight: 1.6,
-			color: tokens.text,
-			WebkitFontSmoothing: "antialiased",
-		},
-
-		top: {
-			display: "flex",
-			alignItems: "flex-end",
-			justifyContent: "space-between",
-			mb: "48px",
-			borderBottom: `2px solid ${tokens.text}`,
-			pb: "18px",
-		},
-		brandWrap: { display: "flex", flexDirection: "column" },
-		logoImg: { maxHeight: 48, maxWidth: 160, objectFit: "contain", mb: "8px" },
-		brandEyebrow: {
-			m: 0,
-			fontSize: 11,
-			textTransform: "uppercase",
-			letterSpacing: "0.3em",
-			fontWeight: 700,
-			color: tokens.textMuted,
-			fontFamily: EDITORIAL_SECONDARY_SANS_STACK,
-		},
-		brandTitle: {
-			mt: "6px",
-			mb: 0,
-			fontSize: 40,
-			fontWeight: 700,
-			letterSpacing: "-0.02em",
-			lineHeight: 1,
-			color: tokens.text,
-		},
-
-		statusLine: {
-			fontSize: 22,
-			fontWeight: 400,
-			m: 0,
-			mb: "8px",
-			letterSpacing: "-0.01em",
-			lineHeight: 1.35,
-			color: tokens.text,
-			fontFamily: SERIF_STACK,
-		},
-		statusDot: (tone) => ({
-			display: "inline-block",
-			width: 10,
-			height: 10,
-			borderRadius: "50%",
-			background: toneColor(tone, tokens),
-			mr: "10px",
-			verticalAlign: "middle",
-		}),
-		dateline: {
-			fontFamily: EDITORIAL_SECONDARY_SANS_STACK,
-			fontSize: 11,
-			textTransform: "uppercase",
-			letterSpacing: "0.12em",
-			color: tokens.textMuted,
-			m: 0,
-			mb: "56px",
-		},
-
-		chartSwitchWrap: {
-			display: "flex",
-			justifyContent: "flex-end",
-			mb: "20px",
-			fontFamily: EDITORIAL_SECONDARY_SANS_STACK,
-		},
-		chartSwitch: {
-			display: "inline-flex",
-			border: `1px solid ${tokens.text}`,
-			"& > button + button": { borderLeft: `1px solid ${tokens.text}` },
-		},
-		chartSwitchButton: (active) => ({
-			fontFamily: "inherit",
-			fontSize: 10,
-			textTransform: "uppercase",
-			letterSpacing: "0.2em",
-			padding: "6px 14px",
-			border: 0,
-			background: active ? tokens.text : "transparent",
-			color: active ? tokens.bg : tokens.text,
-			cursor: "pointer",
-			fontWeight: 700,
-		}),
-
-		monitorList: {
-			listStyle: "none",
-			m: 0,
-			p: 0,
-			display: "flex",
-			flexDirection: "column",
-		},
-		card: {
-			background: "transparent",
-			border: 0,
-			borderBottom: `1px solid ${tokens.border}`,
-			mb: 0,
-			py: "20px",
-			"&:last-of-type": { borderBottom: 0 },
-		},
-		cardRow: {
-			display: "grid",
-			gridTemplateColumns: "1fr auto",
-			alignItems: "baseline",
-			gap: "20px",
-		},
-		cardLeft: { minWidth: 0 },
-		monitorName: {
-			fontSize: 20,
-			fontWeight: 700,
-			letterSpacing: "-0.015em",
-			color: tokens.text,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			whiteSpace: "nowrap",
-		},
-		monitorMeta: {
-			fontFamily: EDITORIAL_SECONDARY_SANS_STACK,
-			fontSize: 12,
-			color: tokens.textMuted,
-			mt: "6px",
-			display: "flex",
-			gap: "12px",
-			flexWrap: "wrap",
-			alignItems: "center",
-		},
-		pill: {
-			textTransform: "uppercase",
-			letterSpacing: "0.12em",
-			fontWeight: 700,
-			color: tokens.textMuted,
-		},
-		pillHardware: {
-			textTransform: "uppercase",
-			letterSpacing: "0.12em",
-			fontWeight: 700,
-			color: tokens.up,
-		},
-		monitorUrl: {
-			fontFamily: MONO_STACK,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			whiteSpace: "nowrap",
-			maxWidth: 280,
-			fontSize: 12,
-		},
-
-		badge: (tone) => ({
-			fontFamily: EDITORIAL_SECONDARY_SANS_STACK,
-			fontSize: 10,
-			fontWeight: 700,
-			padding: "4px 10px",
-			borderRadius: 0,
-			textTransform: "uppercase",
-			letterSpacing: "0.15em",
-			whiteSpace: "nowrap",
-			background: toneSoft(tone, tokens),
-			color: toneColor(tone, tokens),
-		}),
-
-		heatmap: {
-			mt: "16px",
-			display: "grid",
-			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
-			gap: "2px",
-			height: 40,
-		},
-		heatmapCell: (kind) => ({
-			background: heatCellBg[kind],
-			opacity: kind === "empty" ? 0.5 : 1,
-		}),
-
-		histogram: {
-			mt: "16px",
-			display: "grid",
-			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
-			gap: "2px",
-			alignItems: "flex-end",
-			height: 40,
-		},
-		bar: (kind, heightPct) => ({
-			background: barBg[kind],
-			minHeight: 3,
-			opacity: kind === "empty" ? 0.5 : 1,
-			height: `${heightPct}%`,
-		}),
-		chartStats: {
-			fontFamily: EDITORIAL_SECONDARY_SANS_STACK,
-			fontSize: 11,
-			color: tokens.textMuted,
-			fontVariantNumeric: "tabular-nums",
-			textTransform: "uppercase",
-			letterSpacing: "0.1em",
-		},
-
-		infra: {
-			display: "grid",
-			gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)" },
-			gap: "24px",
-			mt: "20px",
-			fontFamily: EDITORIAL_SECONDARY_SANS_STACK,
-		},
-		infraEmpty: { mt: "20px", color: tokens.textMuted, fontSize: 13 },
-		gauge: {},
-		gaugeLabel: {
-			fontSize: 10,
-			color: tokens.textMuted,
-			textTransform: "uppercase",
-			letterSpacing: "0.18em",
-			fontWeight: 700,
-		},
-		gaugeValue: {
-			fontSize: 28,
-			fontWeight: 700,
-			letterSpacing: "-0.02em",
-			mt: "4px",
-			fontVariantNumeric: "tabular-nums",
-			fontFamily: SERIF_STACK,
-			color: tokens.text,
-		},
-		gaugeBar: { height: 2, background: tokens.border, mt: "10px" },
-		gaugeFill: (level, widthPct) => ({
-			display: "block",
-			height: "100%",
-			background: gaugeFillBg[level],
-			transition: "width 0.8s",
-			width: `${Math.max(0, Math.min(100, widthPct))}%`,
-		}),
-		gaugeSub: {
-			fontSize: 11,
-			color: tokens.textMuted,
-			mt: "8px",
-			fontVariantNumeric: "tabular-nums",
-		},
-
-		footer: {
-			textAlign: "center",
-			color: tokens.textMuted,
-			fontSize: 11,
-			mt: "56px",
-			textTransform: "uppercase",
-			letterSpacing: "0.2em",
-			fontFamily: EDITORIAL_SECONDARY_SANS_STACK,
-			"& a": {
-				color: tokens.text,
-				textDecoration: "none",
-				borderBottom: `1px solid ${tokens.text}`,
-				pb: "2px",
-				fontWeight: 700,
-			},
-		},
-	};
-};

client/src/Pages/StatusPage/Status/themes/modern/ModernHeader.tsx

@@ -1,24 +0,0 @@
-import Box from "@mui/material/Box";
-import { monoFirstChar } from "@/Pages/StatusPage/Status/themes/shared/overallStatus";
-import type { SlotProps } from "@/Pages/StatusPage/Status/themes/shared/BaseStatusPage";
-import type { ModernStyles } from "@/Pages/StatusPage/Status/themes/modern/styles";
-
-export const ModernHeader = ({
-	statusPage,
-	logoSrc,
-	styles,
-}: SlotProps<ModernStyles>) => (
-	<Box sx={styles.brand}>
-		{logoSrc ? (
-			<Box
-				component="img"
-				src={logoSrc}
-				alt={statusPage.companyName}
-				sx={styles.logoImg}
-			/>
-		) : (
-			<Box sx={styles.logoGrad}>{monoFirstChar(statusPage.companyName)}</Box>
-		)}
-		{statusPage.companyName}
-	</Box>
-);

client/src/Pages/StatusPage/Status/themes/modern/ModernHero.tsx

@@ -1,34 +0,0 @@
-import Box from "@mui/material/Box";
-import { useTranslation } from "react-i18next";
-import type { SlotProps } from "@/Pages/StatusPage/Status/themes/shared/BaseStatusPage";
-import type { ModernStyles } from "@/Pages/StatusPage/Status/themes/modern/styles";
-
-export const ModernHero = ({
-	overall,
-	monitorCount,
-	styles,
-}: SlotProps<ModernStyles>) => {
-	const { t } = useTranslation();
-	return (
-		<Box sx={styles.hero}>
-			<Box sx={styles.pulse(overall.tone)} />
-			<Box sx={styles.statusCopy}>
-				<Box
-					component="h1"
-					sx={styles.heroTitle}
-				>
-					{overall.message}
-				</Box>
-				<Box
-					component="p"
-					sx={styles.heroSub}
-				>
-					{t("pages.statusPages.statusBar.monitoringSummary", {
-						count: monitorCount,
-					})}
-				</Box>
-			</Box>
-			<Box sx={styles.heroIcon(overall.tone)}>{overall.icon}</Box>
-		</Box>
-	);
-};

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

@@ -1,429 +0,0 @@
-import type { SxProps, Theme } from "@mui/material/styles";
-import { keyframes } from "@mui/system";
-import type { StatusPageThemeTokens } from "../tokens";
-import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
-import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
-import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
-
-export type ModernHeatCell = "fast" | "med" | "slow" | "down" | "empty";
-export type ModernBarKind = "up" | "down" | "empty";
-export type ModernGaugeFill = "ok" | "warm" | "hot";
-
-export interface ModernStyles {
-	page: SxProps<Theme>;
-	top: SxProps<Theme>;
-	brand: SxProps<Theme>;
-	logoGrad: SxProps<Theme>;
-	logoImg: SxProps<Theme>;
-	hero: SxProps<Theme>;
-	pulse: (tone: OverallTone) => SxProps<Theme>;
-	statusCopy: SxProps<Theme>;
-	heroTitle: SxProps<Theme>;
-	heroSub: SxProps<Theme>;
-	heroIcon: (tone: OverallTone) => SxProps<Theme>;
-	chartSwitchWrap: SxProps<Theme>;
-	chartSwitch: SxProps<Theme>;
-	chartSwitchButton: (active: boolean) => SxProps<Theme>;
-	monitorList: SxProps<Theme>;
-	card: SxProps<Theme>;
-	cardRow: SxProps<Theme>;
-	cardLeft: SxProps<Theme>;
-	monitorName: SxProps<Theme>;
-	monitorMeta: SxProps<Theme>;
-	pill: SxProps<Theme>;
-	pillHardware: SxProps<Theme>;
-	monitorUrl: SxProps<Theme>;
-	badge: (tone: OverallTone) => SxProps<Theme>;
-	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: ModernHeatCell) => SxProps<Theme>;
-	histogram: SxProps<Theme>;
-	bar: (kind: ModernBarKind, heightPct: number) => SxProps<Theme>;
-	chartStats: SxProps<Theme>;
-	infra: SxProps<Theme>;
-	infraEmpty: SxProps<Theme>;
-	gauge: SxProps<Theme>;
-	gaugeLabel: SxProps<Theme>;
-	gaugeValue: SxProps<Theme>;
-	gaugeBar: SxProps<Theme>;
-	gaugeFill: (level: ModernGaugeFill, widthPct: number) => SxProps<Theme>;
-	gaugeSub: SxProps<Theme>;
-	footer: SxProps<Theme>;
-}
-
-const lightShadow =
-	"0 2px 4px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.06)";
-const darkShadow = "0 2px 6px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.4)";
-const lightShadowHover =
-	"0 4px 8px rgba(16, 24, 40, 0.05), 0 16px 40px rgba(16, 24, 40, 0.08)";
-const darkShadowHover = "0 4px 10px rgba(0, 0, 0, 0.55), 0 24px 48px rgba(0, 0, 0, 0.45)";
-
-const pillBase = {
-	fontSize: 10,
-	textTransform: "uppercase" as const,
-	letterSpacing: "0.08em",
-	padding: "3px 9px",
-	borderRadius: "999px",
-	fontWeight: 600,
-};
-
-const pulseKeyframes = keyframes`
-	0% { transform: scale(1); opacity: 0.5; }
-	100% { transform: scale(2.4); opacity: 0; }
-`;
-
-const fadeInKeyframes = keyframes`
-	to { opacity: 1; transform: translateY(0); }
-`;
-
-export const modernStyles = (
-	tokens: StatusPageThemeTokens,
-	isDark: boolean
-): ModernStyles => {
-	const cardShadow = isDark ? darkShadow : lightShadow;
-	const cardHoverShadow = isDark ? darkShadowHover : lightShadowHover;
-
-	const heatCellBg: Record<ModernHeatCell, string> = {
-		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})`,
-		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,
-		down: tokens.down,
-		empty: tokens.border,
-	};
-
-	const gaugeFillBg: Record<ModernGaugeFill, string> = {
-		ok: `linear-gradient(90deg, ${tokens.up}, ${tokens.upStrong})`,
-		warm: `linear-gradient(90deg, ${tokens.warn}, ${tokens.degraded})`,
-		hot: `linear-gradient(90deg, ${tokens.down}, color-mix(in srgb, ${tokens.down} 70%, #000000 30%))`,
-	};
-
-	return {
-		page: {
-			flex: "1 0 auto",
-			maxWidth: 980,
-			width: "100%",
-			mx: "auto",
-			p: "56px 20px 80px",
-			fontFamily: SANS_STACK,
-			fontSize: 14,
-			lineHeight: 1.5,
-			color: tokens.text,
-			WebkitFontSmoothing: "antialiased",
-		},
-
-		top: {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "space-between",
-			mb: "32px",
-		},
-		brand: {
-			display: "flex",
-			alignItems: "center",
-			gap: "12px",
-			fontWeight: 700,
-			fontSize: 15,
-			letterSpacing: "-0.01em",
-			color: tokens.text,
-		},
-		logoGrad: {
-			width: 32,
-			height: 32,
-			borderRadius: "10px",
-			background: `linear-gradient(135deg, ${tokens.up}, ${tokens.upStrong})`,
-			display: "grid",
-			placeItems: "center",
-			color: "#fff",
-			fontWeight: 700,
-			fontSize: 14,
-			boxShadow: `0 4px 10px color-mix(in srgb, ${tokens.up} 40%, transparent)`,
-		},
-		logoImg: { maxHeight: 32, maxWidth: 120, objectFit: "contain" },
-
-		hero: {
-			position: "relative",
-			borderRadius: "20px",
-			padding: "28px 32px",
-			mb: "24px",
-			display: "flex",
-			alignItems: "center",
-			gap: "20px",
-			background: tokens.surface,
-			border: `1px solid ${tokens.border}`,
-			boxShadow: cardShadow,
-		},
-		pulse: (tone) => {
-			const c = toneColor(tone, tokens);
-			return {
-				position: "relative",
-				width: 14,
-				height: 14,
-				borderRadius: "50%",
-				background: c,
-				color: c,
-				flexShrink: 0,
-				"&::before, &::after": {
-					content: '""',
-					position: "absolute",
-					inset: 0,
-					borderRadius: "50%",
-					background: "currentColor",
-					opacity: 0.5,
-					animation: `${pulseKeyframes} 2s ease-out infinite`,
-				},
-				"&::after": { animationDelay: "1s" },
-				"@media (prefers-reduced-motion: reduce)": {
-					"&::before, &::after": { animation: "none" },
-				},
-			};
-		},
-		statusCopy: { flex: 1, minWidth: 0 },
-		heroTitle: {
-			m: 0,
-			mb: "4px",
-			fontSize: 22,
-			fontWeight: 700,
-			letterSpacing: "-0.02em",
-			color: tokens.text,
-		},
-		heroSub: { m: 0, color: tokens.textMuted, fontSize: 13 },
-		heroIcon: (tone) => ({
-			color: toneColor(tone, tokens),
-			display: "flex",
-			alignItems: "center",
-		}),
-
-		chartSwitchWrap: { display: "flex", justifyContent: "flex-end", mb: "14px" },
-		chartSwitch: {
-			display: "inline-flex",
-			border: `1px solid ${tokens.border}`,
-			borderRadius: "999px",
-			background: tokens.surface,
-			p: "3px",
-			gap: "2px",
-		},
-		chartSwitchButton: (active) => ({
-			border: 0,
-			background: active ? tokens.upSoft : "transparent",
-			fontFamily: "inherit",
-			fontSize: 11,
-			padding: "6px 16px",
-			cursor: "pointer",
-			color: active ? tokens.up : tokens.textMuted,
-			fontWeight: 600,
-			textTransform: "uppercase",
-			letterSpacing: "0.08em",
-			transition: "background 0.2s, color 0.2s",
-			borderRadius: "999px",
-			"&:hover": { color: active ? tokens.up : tokens.text },
-		}),
-
-		monitorList: {
-			listStyle: "none",
-			m: 0,
-			p: 0,
-			display: "flex",
-			flexDirection: "column",
-			gap: "14px",
-		},
-		card: {
-			background: tokens.surface,
-			border: `1px solid ${tokens.border}`,
-			borderRadius: "16px",
-			boxShadow: cardShadow,
-			overflow: "hidden",
-			transition: "transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s",
-			opacity: 0,
-			transform: "translateY(8px)",
-			animation: `${fadeInKeyframes} 0.5s forwards`,
-			"&:nth-of-type(1)": { animationDelay: "0.05s" },
-			"&:nth-of-type(2)": { animationDelay: "0.1s" },
-			"&:nth-of-type(3)": { animationDelay: "0.15s" },
-			"&:nth-of-type(4)": { animationDelay: "0.2s" },
-			"&:nth-of-type(5)": { animationDelay: "0.25s" },
-			"&:nth-of-type(n+6)": { animationDelay: "0.3s" },
-			"&:hover": { transform: "translateY(-2px)", boxShadow: cardHoverShadow },
-			"@media (prefers-reduced-motion: reduce)": {
-				animation: "none",
-				opacity: 1,
-				transform: "none",
-			},
-		},
-		cardRow: {
-			display: "grid",
-			gridTemplateColumns: "1fr auto",
-			alignItems: "center",
-			gap: "20px",
-			p: "18px 24px",
-		},
-		cardLeft: { minWidth: 0 },
-		monitorName: {
-			fontWeight: 600,
-			fontSize: 15,
-			letterSpacing: "-0.005em",
-			color: tokens.text,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			whiteSpace: "nowrap",
-		},
-		monitorMeta: {
-			display: "flex",
-			gap: "10px",
-			alignItems: "center",
-			mt: "6px",
-			flexWrap: "wrap",
-		},
-		pill: {
-			...pillBase,
-			color: tokens.textMuted,
-			background: tokens.bg,
-		},
-		pillHardware: {
-			...pillBase,
-			color: tokens.up,
-			background: tokens.upSoft,
-		},
-		monitorUrl: {
-			fontSize: 12,
-			color: tokens.textMuted,
-			fontFamily: MONO_STACK,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			whiteSpace: "nowrap",
-			maxWidth: 280,
-		},
-
-		badge: (tone) => ({
-			fontSize: 11,
-			fontWeight: 700,
-			padding: "5px 12px",
-			borderRadius: "999px",
-			display: "inline-flex",
-			alignItems: "center",
-			gap: "6px",
-			whiteSpace: "nowrap",
-			background: toneSoft(tone, tokens),
-			color: toneColor(tone, tokens),
-			"&::before": {
-				content: '""',
-				width: 6,
-				height: 6,
-				borderRadius: "50%",
-				background: "currentColor",
-			},
-		}),
-
-		heatmap: {
-			padding: "0 24px 20px",
-			display: "grid",
-			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
-			gap: "3px",
-			height: 46,
-		},
-		heatmapCell: (kind) => ({
-			borderRadius: "3px",
-			background: heatCellBg[kind],
-			opacity: kind === "empty" ? 0.4 : 1,
-			transition: "transform 0.15s",
-			"&:hover": { transform: "scaleY(1.2)" },
-		}),
-
-		histogram: {
-			padding: "0 24px",
-			display: "grid",
-			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
-			gap: "3px",
-			alignItems: "flex-end",
-			height: 46,
-		},
-		bar: (kind, heightPct) => ({
-			background: barBg[kind],
-			borderRadius: "3px",
-			minHeight: 4,
-			opacity: kind === "empty" ? 0.4 : 1,
-			height: `${heightPct}%`,
-			transition: "transform 0.15s",
-			"&:hover": { transform: "scaleY(1.08)" },
-		}),
-		chartStats: {
-			padding: "0 24px 20px",
-			fontSize: 11,
-			color: tokens.textMuted,
-			fontVariantNumeric: "tabular-nums",
-			fontWeight: 600,
-		},
-
-		infra: {
-			padding: "16px 24px 22px",
-			display: "grid",
-			gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)" },
-			gap: "14px",
-		},
-		infraEmpty: {
-			padding: "16px 24px 22px",
-			color: tokens.textMuted,
-			fontSize: 13,
-		},
-		gauge: {
-			border: `1px solid ${tokens.border}`,
-			borderRadius: "14px",
-			p: "14px 16px",
-			background: `linear-gradient(135deg, ${tokens.bg}, ${tokens.surface})`,
-		},
-		gaugeLabel: {
-			fontSize: 10,
-			color: tokens.textMuted,
-			textTransform: "uppercase",
-			letterSpacing: "0.1em",
-			fontWeight: 700,
-		},
-		gaugeValue: {
-			fontSize: 26,
-			fontWeight: 700,
-			letterSpacing: "-0.02em",
-			mt: "4px",
-			fontVariantNumeric: "tabular-nums",
-			color: tokens.text,
-		},
-		gaugeBar: {
-			height: 6,
-			background: tokens.border,
-			borderRadius: "3px",
-			overflow: "hidden",
-			mt: "10px",
-		},
-		gaugeFill: (level, widthPct) => ({
-			display: "block",
-			height: "100%",
-			background: gaugeFillBg[level],
-			borderRadius: "3px",
-			transition: "width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)",
-			width: `${Math.max(0, Math.min(100, widthPct))}%`,
-		}),
-		gaugeSub: {
-			fontSize: 11,
-			color: tokens.textMuted,
-			mt: "8px",
-			fontVariantNumeric: "tabular-nums",
-		},
-
-		footer: {
-			textAlign: "center",
-			color: tokens.textMuted,
-			fontSize: 12,
-			mt: "48px",
-			"& a": {
-				color: tokens.up,
-				textDecoration: "underline",
-				textUnderlineOffset: "3px",
-				fontWeight: 700,
-				"&:hover": { color: tokens.upStrong },
-			},
-		},
-	};
-};

client/src/Pages/StatusPage/Status/themes/refined/RefinedHeader.tsx

@@ -1,29 +0,0 @@
-import Box from "@mui/material/Box";
-import { monoFirstChar } from "@/Pages/StatusPage/Status/themes/shared/overallStatus";
-import type { SlotProps } from "@/Pages/StatusPage/Status/themes/shared/BaseStatusPage";
-import type { RefinedStyles } from "@/Pages/StatusPage/Status/themes/refined/styles";
-
-export const RefinedHeader = ({
-	statusPage,
-	logoSrc,
-	styles,
-}: SlotProps<RefinedStyles>) => (
-	<Box sx={styles.brand}>
-		{logoSrc ? (
-			<Box
-				component="img"
-				src={logoSrc}
-				alt={statusPage.companyName}
-				sx={styles.logoImg}
-			/>
-		) : (
-			<Box sx={styles.logoMono}>{monoFirstChar(statusPage.companyName)}</Box>
-		)}
-		<Box
-			component="span"
-			sx={styles.company}
-		>
-			{statusPage.companyName}
-		</Box>
-	</Box>
-);

client/src/Pages/StatusPage/Status/themes/refined/RefinedHero.tsx

@@ -1,34 +0,0 @@
-import Box from "@mui/material/Box";
-import { useTranslation } from "react-i18next";
-import type { SlotProps } from "@/Pages/StatusPage/Status/themes/shared/BaseStatusPage";
-import type { RefinedStyles } from "@/Pages/StatusPage/Status/themes/refined/styles";
-
-export const RefinedHero = ({
-	overall,
-	monitorCount,
-	styles,
-}: SlotProps<RefinedStyles>) => {
-	const { t } = useTranslation();
-	return (
-		<Box sx={styles.hero}>
-			<Box sx={styles.statusDot(overall.tone)} />
-			<Box sx={styles.statusCopy}>
-				<Box
-					component="h1"
-					sx={styles.heroTitle}
-				>
-					{overall.message}
-				</Box>
-				<Box
-					component="p"
-					sx={styles.heroSub}
-				>
-					{t("pages.statusPages.statusBar.monitoringSummary", {
-						count: monitorCount,
-					})}
-				</Box>
-			</Box>
-			<Box sx={styles.heroIcon(overall.tone)}>{overall.icon}</Box>
-		</Box>
-	);
-};

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

@@ -1,368 +0,0 @@
-import type { SxProps, Theme } from "@mui/material/styles";
-import type { StatusPageThemeTokens } from "../tokens";
-import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
-import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
-
-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";
-
-export interface RefinedStyles {
-	page: SxProps<Theme>;
-	top: SxProps<Theme>;
-	brand: SxProps<Theme>;
-	logoMono: SxProps<Theme>;
-	logoImg: SxProps<Theme>;
-	company: SxProps<Theme>;
-	hero: SxProps<Theme>;
-	statusDot: (tone: OverallTone) => SxProps<Theme>;
-	statusCopy: SxProps<Theme>;
-	heroTitle: SxProps<Theme>;
-	heroSub: SxProps<Theme>;
-	heroIcon: (tone: OverallTone) => SxProps<Theme>;
-	chartSwitchWrap: SxProps<Theme>;
-	chartSwitch: SxProps<Theme>;
-	chartSwitchButton: (active: boolean) => SxProps<Theme>;
-	monitorList: SxProps<Theme>;
-	card: SxProps<Theme>;
-	cardRow: SxProps<Theme>;
-	cardLeft: SxProps<Theme>;
-	monitorName: SxProps<Theme>;
-	monitorMeta: SxProps<Theme>;
-	pill: SxProps<Theme>;
-	pillHardware: SxProps<Theme>;
-	monitorUrl: SxProps<Theme>;
-	badge: (tone: OverallTone) => SxProps<Theme>;
-	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: RefinedHeatCell) => SxProps<Theme>;
-	histogram: SxProps<Theme>;
-	bar: (kind: RefinedBarKind, heightPct: number) => SxProps<Theme>;
-	chartStats: SxProps<Theme>;
-	infra: SxProps<Theme>;
-	infraEmpty: SxProps<Theme>;
-	gauge: SxProps<Theme>;
-	gaugeLabel: SxProps<Theme>;
-	gaugeValue: SxProps<Theme>;
-	gaugeBar: SxProps<Theme>;
-	gaugeFill: (level: RefinedGaugeFill, widthPct: number) => SxProps<Theme>;
-	gaugeSub: SxProps<Theme>;
-	footer: SxProps<Theme>;
-}
-
-const cardShadow = "0 1px 2px rgba(10, 16, 32, 0.06), 0 6px 18px rgba(10, 16, 32, 0.08)";
-const cardShadowHover =
-	"0 2px 4px rgba(16, 24, 40, 0.06), 0 10px 24px rgba(16, 24, 40, 0.06)";
-
-const pillBase = {
-	fontSize: 10,
-	textTransform: "uppercase" as const,
-	letterSpacing: "0.08em",
-	padding: "2px 8px",
-	borderRadius: "999px",
-	fontWeight: 600,
-};
-
-export const refinedStyles = (
-	tokens: StatusPageThemeTokens,
-	_isDark: boolean
-): RefinedStyles => {
-	const heatCellBg: Record<RefinedHeatCell, string> = {
-		fast: tokens.up,
-		med: `color-mix(in srgb, ${tokens.up} 60%, #ffffff 40%)`,
-		slow: tokens.warn,
-		down: tokens.down,
-		empty: tokens.border,
-	};
-
-	const barBg: Record<RefinedBarKind, string> = {
-		up: tokens.up,
-		down: tokens.down,
-		empty: tokens.border,
-	};
-
-	const gaugeFillBg: Record<RefinedGaugeFill, string> = {
-		ok: tokens.up,
-		warm: tokens.warn,
-		hot: tokens.down,
-	};
-
-	return {
-		page: {
-			flex: "1 0 auto",
-			maxWidth: 960,
-			width: "100%",
-			mx: "auto",
-			p: "48px 20px 80px",
-			fontFamily: SANS_STACK,
-			fontSize: 14,
-			lineHeight: 1.5,
-			color: tokens.text,
-			WebkitFontSmoothing: "antialiased",
-		},
-
-		top: {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "space-between",
-			mb: "28px",
-		},
-		brand: {
-			display: "flex",
-			alignItems: "center",
-			gap: "10px",
-			fontWeight: 600,
-			letterSpacing: "-0.01em",
-			color: tokens.text,
-		},
-		logoMono: {
-			width: 28,
-			height: 28,
-			borderRadius: "8px",
-			background: tokens.up,
-			display: "grid",
-			placeItems: "center",
-			color: "#fff",
-			fontWeight: 700,
-			fontSize: 13,
-		},
-		logoImg: { maxHeight: 32, maxWidth: 120, objectFit: "contain" },
-		company: { fontSize: 14 },
-
-		hero: {
-			background: tokens.surface,
-			border: `1px solid ${tokens.border}`,
-			borderRadius: tokens.radius,
-			padding: "22px 24px",
-			display: "flex",
-			alignItems: "center",
-			gap: "16px",
-			boxShadow: cardShadow,
-			mb: "20px",
-		},
-		statusDot: (tone) => ({
-			width: 10,
-			height: 10,
-			borderRadius: "50%",
-			background: toneColor(tone, tokens),
-			boxShadow: `0 0 0 4px ${toneSoft(tone, tokens)}`,
-			flexShrink: 0,
-		}),
-		statusCopy: { flex: 1, minWidth: 0 },
-		heroTitle: {
-			m: 0,
-			mb: "2px",
-			fontSize: 17,
-			fontWeight: 600,
-			letterSpacing: "-0.01em",
-			color: tokens.text,
-		},
-		heroSub: { m: 0, color: tokens.textMuted, fontSize: 13 },
-		heroIcon: (tone) => ({
-			color: toneColor(tone, tokens),
-			display: "flex",
-			alignItems: "center",
-		}),
-
-		chartSwitchWrap: { display: "flex", justifyContent: "flex-end", mb: "12px" },
-		chartSwitch: {
-			display: "inline-flex",
-			border: `1px solid ${tokens.border}`,
-			borderRadius: "8px",
-			background: tokens.surface,
-			p: "3px",
-			gap: "2px",
-		},
-		chartSwitchButton: (active) => ({
-			border: 0,
-			background: active ? tokens.upSoft : "transparent",
-			fontFamily: "inherit",
-			fontSize: 11,
-			padding: "5px 14px",
-			cursor: "pointer",
-			color: active ? tokens.up : tokens.textMuted,
-			borderRadius: "5px",
-			transition: "background 0.15s ease, color 0.15s ease",
-			fontWeight: active ? 600 : 500,
-			"&:hover": { color: active ? tokens.up : tokens.text },
-		}),
-
-		monitorList: {
-			listStyle: "none",
-			m: 0,
-			p: 0,
-			display: "flex",
-			flexDirection: "column",
-			gap: "12px",
-		},
-		card: {
-			background: tokens.surface,
-			border: `1px solid ${tokens.border}`,
-			borderRadius: tokens.radius,
-			boxShadow: cardShadow,
-			overflow: "hidden",
-			position: "relative",
-			transition: "transform 0.15s, box-shadow 0.15s",
-			"&:hover": { transform: "translateY(-1px)", boxShadow: cardShadowHover },
-		},
-		cardRow: {
-			display: "grid",
-			gridTemplateColumns: "1fr auto",
-			alignItems: "center",
-			gap: "16px",
-			p: "16px 20px",
-		},
-		cardLeft: { minWidth: 0 },
-		monitorName: {
-			fontWeight: 600,
-			fontSize: 14,
-			letterSpacing: "-0.005em",
-			color: tokens.text,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			whiteSpace: "nowrap",
-		},
-		monitorMeta: {
-			display: "flex",
-			gap: "10px",
-			alignItems: "center",
-			mt: "4px",
-			flexWrap: "wrap",
-		},
-		pill: {
-			...pillBase,
-			color: tokens.textMuted,
-			border: `1px solid ${tokens.border}`,
-		},
-		pillHardware: {
-			...pillBase,
-			color: tokens.up,
-			border: `1px solid ${tokens.border}`,
-			background: tokens.upSoft,
-		},
-		monitorUrl: {
-			fontSize: 12,
-			color: tokens.textMuted,
-			fontFamily: MONO_STACK,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			whiteSpace: "nowrap",
-			maxWidth: 280,
-		},
-
-		badge: (tone) => ({
-			fontSize: 11,
-			fontWeight: 600,
-			padding: "4px 10px",
-			borderRadius: "999px",
-			whiteSpace: "nowrap",
-			background: toneSoft(tone, tokens),
-			color: toneColor(tone, tokens),
-		}),
-
-		heatmap: {
-			padding: "0 20px 16px",
-			display: "grid",
-			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
-			gap: "3px",
-			height: 42,
-		},
-		heatmapCell: (kind) => ({
-			borderRadius: "2px",
-			background: heatCellBg[kind],
-			opacity: kind === "empty" ? 0.4 : 1,
-			transition: "transform 0.15s",
-			"&:hover": { transform: "scaleY(1.15)" },
-		}),
-
-		histogram: {
-			padding: "0 20px",
-			display: "grid",
-			gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
-			gap: "3px",
-			alignItems: "flex-end",
-			height: 42,
-		},
-		bar: (kind, heightPct) => ({
-			background: barBg[kind],
-			borderRadius: "2px",
-			minHeight: 3,
-			opacity: kind === "empty" ? 0.4 : 1,
-			height: `${heightPct}%`,
-		}),
-		chartStats: {
-			padding: "0 20px 16px",
-			fontSize: 11,
-			color: tokens.textMuted,
-			fontVariantNumeric: "tabular-nums",
-		},
-
-		infra: {
-			padding: "14px 20px 18px",
-			display: "grid",
-			gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)" },
-			gap: "12px",
-		},
-		infraEmpty: {
-			padding: "14px 20px 18px",
-			color: tokens.textMuted,
-			fontSize: 13,
-		},
-		gauge: {
-			border: `1px solid ${tokens.border}`,
-			borderRadius: "10px",
-			p: "12px 14px",
-			background: tokens.bg,
-		},
-		gaugeLabel: {
-			fontSize: 11,
-			color: tokens.textMuted,
-			textTransform: "uppercase",
-			letterSpacing: "0.08em",
-			fontWeight: 600,
-		},
-		gaugeValue: {
-			fontSize: 20,
-			fontWeight: 600,
-			letterSpacing: "-0.01em",
-			mt: "2px",
-			fontVariantNumeric: "tabular-nums",
-			color: tokens.text,
-		},
-		gaugeBar: {
-			height: 4,
-			background: tokens.border,
-			borderRadius: "2px",
-			overflow: "hidden",
-			mt: "8px",
-		},
-		gaugeFill: (level, widthPct) => ({
-			display: "block",
-			height: "100%",
-			background: gaugeFillBg[level],
-			borderRadius: "2px",
-			transition: "width 0.6s",
-			width: `${Math.max(0, Math.min(100, widthPct))}%`,
-		}),
-		gaugeSub: {
-			fontSize: 11,
-			color: tokens.textMuted,
-			mt: "6px",
-			fontVariantNumeric: "tabular-nums",
-		},
-
-		footer: {
-			textAlign: "center",
-			color: tokens.textMuted,
-			fontSize: 12,
-			mt: "40px",
-			"& a": {
-				color: tokens.up,
-				textDecoration: "underline",
-				textUnderlineOffset: "3px",
-				fontWeight: 600,
-				"&:hover": { color: tokens.upStrong || tokens.up },
-			},
-		},
-	};
-};

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

@@ -1,250 +0,0 @@
-import { useMemo, useState } from "react";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import { useTranslation } from "react-i18next";
-import type { SxProps, Theme } from "@mui/material/styles";
-import type { Monitor } from "@/Types/Monitor";
-import type { StatusPage } from "@/Types/StatusPage";
-import { getMonitorTypeLabel } from "@/Types/StatusPage";
-import type { StatusPageThemeTokens } from "@/Pages/StatusPage/Status/themes/tokens";
-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,
-} from "@/Pages/StatusPage/Status/themes/shared/ThemedInfrastructure";
-import {
-	type OverallStatus,
-	type OverallTone,
-	monitorBadgeTone,
-	resolveOverallStatus,
-	statusBadgeKey,
-} from "@/Pages/StatusPage/Status/themes/shared/overallStatus";
-import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
-
-type StatusPageMonitor = Monitor & { checks?: Monitor["recentChecks"] };
-
-export interface BaseStyles {
-	page: SxProps<Theme>;
-	top: SxProps<Theme>;
-	chartSwitchWrap: SxProps<Theme>;
-	chartSwitch: SxProps<Theme>;
-	chartSwitchButton: (active: boolean) => SxProps<Theme>;
-	monitorList: SxProps<Theme>;
-	card: SxProps<Theme>;
-	cardRow: SxProps<Theme>;
-	cardLeft: SxProps<Theme>;
-	monitorName: SxProps<Theme>;
-	monitorMeta: SxProps<Theme>;
-	pill: SxProps<Theme>;
-	pillHardware: SxProps<Theme>;
-	monitorUrl: SxProps<Theme>;
-	badge: (tone: OverallTone) => SxProps<Theme>;
-	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: HeatCellKind) => SxProps<Theme>;
-	histogram: SxProps<Theme>;
-	bar: (kind: BarKind, heightPct: number) => SxProps<Theme>;
-	chartStats: SxProps<Theme>;
-	infra: SxProps<Theme>;
-	infraEmpty: SxProps<Theme>;
-	gauge: SxProps<Theme>;
-	gaugeLabel: SxProps<Theme>;
-	gaugeValue: SxProps<Theme>;
-	gaugeBar: SxProps<Theme>;
-	gaugeFill: (level: GaugeFillLevel, widthPct: number) => SxProps<Theme>;
-	gaugeSub: SxProps<Theme>;
-	footer: SxProps<Theme>;
-}
-
-export interface SlotProps<S extends BaseStyles = BaseStyles> {
-	statusPage: StatusPage;
-	logoSrc: string | null;
-	overall: OverallStatus;
-	monitorCount: number;
-	styles: S;
-}
-
-export interface ThemeConfig<S extends BaseStyles = BaseStyles> {
-	createStyles: (tokens: StatusPageThemeTokens, isDark: boolean) => S;
-	HeaderSlot: React.ComponentType<SlotProps<S>>;
-	HeroSlot: React.ComponentType<SlotProps<S>>;
-	overallStatusOptions?: { iconSize?: number; allUpKey?: string };
-}
-
-interface Props {
-	statusPage: StatusPage;
-	monitors: StatusPageMonitor[];
-	config: ThemeConfig<any>;
-}
-
-export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
-	const { t } = useTranslation();
-	const { tokens, mode } = useStatusPageTheme();
-	const styles = useMemo(
-		() => config.createStyles(tokens, mode === "dark"),
-		[config, tokens, mode]
-	);
-	const [chartMode, setChartMode] = useState<"heatmap" | "histogram">("heatmap");
-
-	const overall = resolveOverallStatus(monitors, t, config.overallStatusOptions);
-	const logoSrc = statusPage.logo?.data
-		? `data:${statusPage.logo.contentType};base64,${statusPage.logo.data}`
-		: null;
-
-	const { HeaderSlot, HeroSlot } = config;
-
-	return (
-		<Box sx={styles.page}>
-			<Box
-				component="header"
-				sx={styles.top}
-			>
-				<HeaderSlot
-					statusPage={statusPage}
-					logoSrc={logoSrc}
-					overall={overall}
-					monitorCount={monitors.length}
-					styles={styles}
-				/>
-			</Box>
-
-			<HeroSlot
-				statusPage={statusPage}
-				logoSrc={logoSrc}
-				overall={overall}
-				monitorCount={monitors.length}
-				styles={styles}
-			/>
-
-			{statusPage.showCharts && (
-				<Box sx={styles.chartSwitchWrap}>
-					<Box
-						sx={styles.chartSwitch}
-						role="radiogroup"
-					>
-						<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>
-					</Box>
-				</Box>
-			)}
-
-			<Stack
-				component="ul"
-				sx={styles.monitorList}
-			>
-				{monitors.map((monitor) => {
-					const isHardware = monitor.type === "hardware";
-					const showInfra = isHardware && statusPage.showInfrastructure !== false;
-					const showChart = !isHardware && statusPage.showCharts !== false;
-					const badgeTone = monitorBadgeTone(monitor.status);
-
-					return (
-						<Box
-							component="li"
-							key={monitor.id}
-							sx={styles.card}
-						>
-							<Box sx={styles.cardRow}>
-								<Box sx={styles.cardLeft}>
-									<Box sx={styles.monitorName}>{monitor.name}</Box>
-									<Box sx={styles.monitorMeta}>
-										<Box
-											component="span"
-											sx={isHardware ? styles.pillHardware : styles.pill}
-										>
-											{getMonitorTypeLabel(monitor.type, t)}
-										</Box>
-										{monitor.url && (
-											<Box
-												component="span"
-												sx={styles.monitorUrl}
-												title={monitor.url}
-											>
-												{monitor.url}
-											</Box>
-										)}
-									</Box>
-								</Box>
-								<Box
-									component="span"
-									sx={styles.badge(badgeTone)}
-								>
-									{t(statusBadgeKey[monitor.status])}
-								</Box>
-							</Box>
-
-							{showInfra && (
-								<ThemedInfrastructure
-									monitor={monitor}
-									sxApi={{
-										containerSx: styles.infra,
-										emptySx: styles.infraEmpty,
-										gaugeSx: styles.gauge,
-										gaugeLabelSx: styles.gaugeLabel,
-										gaugeValueSx: styles.gaugeValue,
-										gaugeBarSx: styles.gaugeBar,
-										gaugeFillSx: styles.gaugeFill,
-										gaugeSubSx: styles.gaugeSub,
-									}}
-								/>
-							)}
-							{showChart &&
-								(chartMode === "heatmap" ? (
-									<ThemedHeatmap
-										checks={monitor.recentChecks ?? []}
-										containerSx={styles.heatmap}
-										cellSx={styles.heatmapCell}
-									/>
-								) : (
-									<ThemedHistogram
-										checks={monitor.recentChecks ?? []}
-										containerSx={styles.histogram}
-										barSx={styles.bar}
-										statsSx={styles.chartStats}
-									/>
-								))}
-						</Box>
-					);
-				})}
-			</Stack>
-
-			<Box
-				component="footer"
-				sx={styles.footer}
-			>
-				{t("pages.statusPages.footer.poweredBy")}{" "}
-				<a
-					href="https://checkmate.so"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					Checkmate
-				</a>
-			</Box>
-		</Box>
-	);
-};

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

@@ -1,90 +0,0 @@
-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 { 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 {
-	checks: CheckSnapshot[];
-	containerSx: SxProps<Theme>;
-	cellSx: (kind: HeatCellKind) => SxProps<Theme>;
-}
-
-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={containerSx}
-			role="img"
-			aria-label={t("pages.statusPages.monitorsList.chart.heatmapAria")}
-		>
-			{padded.map((check, i) => {
-				if (!check) {
-					return (
-						<Box
-							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={check.id ?? i}
-						title={tooltipContent}
-						arrow
-						placement="top"
-					>
-						<Box
-							sx={cellSx(kind)}
-							aria-label={`${check.responseTime} ms, ${check.status ? "up" : "down"}`}
-						/>
-					</Tooltip>
-				);
-			})}
-		</Box>
-	);
-};

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

@@ -1,115 +0,0 @@
-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 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 {
-	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 = ({
-	checks,
-	containerSx,
-	barSx,
-	statsSx,
-	statsGap = 1,
-}: Props) => {
-	const { t } = useTranslation();
-	const { timezone } = useStatusPageTheme();
-
-	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
-			? Math.round(valid.reduce((s, c) => s + c.responseTime, 0) / valid.length)
-			: 0;
-		return { padded: out, max: maxRt, avg: avgRt, peak: valid.length ? maxRt : 0 };
-	}, [checks]);
-
-	return (
-		<Stack gap={statsGap}>
-			<Box sx={containerSx}>
-				{padded.map((check, i) => {
-					if (!check) {
-						return (
-							<Box
-								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={check.id ?? i}
-							title={tooltipContent}
-							arrow
-							placement="top"
-						>
-							<Box
-								sx={barSx(tone(check), height)}
-								aria-label={`${check.responseTime} ms`}
-							/>
-						</Tooltip>
-					);
-				})}
-			</Box>
-			<Stack
-				direction="row"
-				justifyContent="space-between"
-				sx={statsSx}
-			>
-				<span>{t("pages.statusPages.monitorsList.chart.avg", { value: avg })}</span>
-				<span>{t("pages.statusPages.monitorsList.chart.max", { value: peak })}</span>
-			</Stack>
-		</Stack>
-	);
-};

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

@@ -1,105 +0,0 @@
-import Box from "@mui/material/Box";
-import prettyBytes from "pretty-bytes";
-import type { SxProps, Theme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import type { Monitor } from "@/Types/Monitor";
-
-export type GaugeFillLevel = "ok" | "warm" | "hot";
-
-export interface InfraSx {
-	containerSx: SxProps<Theme>;
-	emptySx: SxProps<Theme>;
-	gaugeSx: SxProps<Theme>;
-	gaugeLabelSx: SxProps<Theme>;
-	gaugeValueSx: SxProps<Theme>;
-	gaugeBarSx: SxProps<Theme>;
-	gaugeFillSx: (level: GaugeFillLevel, widthPct: number) => SxProps<Theme>;
-	gaugeSubSx: SxProps<Theme>;
-}
-
-interface Props {
-	monitor: Monitor & { checks?: Monitor["recentChecks"] };
-	sxApi: InfraSx;
-}
-
-interface Gauge {
-	key: string;
-	label: string;
-	value: number;
-	sub: string;
-}
-
-const PCT = 100;
-
-const heatLevel = (value: number): GaugeFillLevel =>
-	value > 85 ? "hot" : value > 70 ? "warm" : "ok";
-
-export const ThemedInfrastructure = ({ monitor, sxApi }: Props) => {
-	const { t } = useTranslation();
-	const latest = monitor.recentChecks?.[0] ?? monitor.checks?.[0];
-
-	const renderEmpty = () => (
-		<Box sx={sxApi.emptySx}>{t("pages.statusPages.monitorsList.noData")}</Box>
-	);
-
-	if (!latest) return renderEmpty();
-
-	const gauges: Gauge[] = [];
-
-	if (typeof latest.cpu?.usage_percent === "number") {
-		const pct = latest.cpu.usage_percent * PCT;
-		gauges.push({
-			key: "cpu",
-			label: t("pages.statusPages.monitorsList.infrastructure.cpu"),
-			value: pct,
-			sub: `${pct.toFixed(0)}%`,
-		});
-	}
-
-	if (
-		typeof latest.memory?.usage_percent === "number" &&
-		typeof latest.memory?.used_bytes === "number" &&
-		typeof latest.memory?.total_bytes === "number"
-	) {
-		gauges.push({
-			key: "memory",
-			label: t("pages.statusPages.monitorsList.infrastructure.memory"),
-			value: latest.memory.usage_percent * PCT,
-			sub: `${prettyBytes(latest.memory.used_bytes)} / ${prettyBytes(latest.memory.total_bytes)}`,
-		});
-	}
-
-	if (latest.disk && latest.disk.length > 0) {
-		const disks = latest.disk;
-		const avg =
-			(disks.reduce((acc, d) => acc + (d?.usage_percent ?? 0), 0) / disks.length) * PCT;
-		const used = disks.reduce((acc, d) => acc + (d?.used_bytes ?? 0), 0);
-		const total = disks.reduce((acc, d) => acc + (d?.total_bytes ?? 0), 0);
-		gauges.push({
-			key: "disk",
-			label: t("pages.statusPages.monitorsList.infrastructure.disk"),
-			value: avg,
-			sub: `${prettyBytes(used)} / ${prettyBytes(total)}`,
-		});
-	}
-
-	if (gauges.length === 0) return renderEmpty();
-
-	return (
-		<Box sx={sxApi.containerSx}>
-			{gauges.map((g) => (
-				<Box
-					key={g.key}
-					sx={sxApi.gaugeSx}
-				>
-					<Box sx={sxApi.gaugeLabelSx}>{g.label}</Box>
-					<Box sx={sxApi.gaugeValueSx}>{g.value.toFixed(0)}%</Box>
-					<Box sx={sxApi.gaugeBarSx}>
-						<Box sx={sxApi.gaugeFillSx(heatLevel(g.value), Math.min(100, g.value))} />
-					</Box>
-					<Box sx={sxApi.gaugeSubSx}>{g.sub}</Box>
-				</Box>
-			))}
-		</Box>
-	);
-};

client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts

@@ -1,11 +0,0 @@
-export const SANS_STACK =
-	'-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif';
-
-export const BOLD_SANS_STACK = `ui-sans-serif, ${SANS_STACK}`;
-
-export const SERIF_STACK = 'Georgia, "Iowan Old Style", "Palatino Linotype", serif';
-
-export const EDITORIAL_SECONDARY_SANS_STACK =
-	'-apple-system, "Helvetica Neue", Arial, sans-serif';
-
-export const MONO_STACK = "ui-monospace, Menlo, monospace";

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

@@ -1,167 +0,0 @@
-import type { ReactNode } from "react";
-import {
-	AlertTriangle,
-	CircleCheck,
-	CircleX,
-	Loader,
-	PauseCircle,
-	ShieldAlert,
-	Wrench,
-} from "lucide-react";
-import type { Monitor, MonitorStatus } from "@/Types/Monitor";
-import type { StatusPageThemeTokens } from "../tokens";
-
-export type OverallTone = "up" | "warn" | "down";
-
-export const toneColor = (tone: OverallTone, t: StatusPageThemeTokens): string =>
-	tone === "down" ? t.down : tone === "warn" ? t.warn : t.up;
-
-export const toneSoft = (tone: OverallTone, t: StatusPageThemeTokens): string =>
-	tone === "down" ? t.downSoft : tone === "warn" ? t.warnSoft : t.upSoft;
-
-export interface OverallStatus {
-	tone: OverallTone;
-	message: string;
-	icon: ReactNode;
-}
-
-type StatusPageMonitor = Pick<Monitor, "status">;
-
-interface Options {
-	iconSize?: number;
-	// Optional override for the `allUp` message key (editorial uses a more
-	// formal sentence).
-	allUpKey?: string;
-}
-
-export const resolveOverallStatus = (
-	monitors: StatusPageMonitor[],
-	t: (key: string) => string,
-	options: Options = {}
-): OverallStatus => {
-	const size = options.iconSize ?? 18;
-	const allUpMessage = t(options.allUpKey ?? "pages.statusPages.statusBar.allUp");
-
-	if (monitors.length === 0) {
-		return {
-			tone: "warn",
-			message: t("pages.statusPages.statusBar.noMonitors"),
-			icon: <CircleX size={size} />,
-		};
-	}
-
-	const allOf = (...statuses: MonitorStatus[]) =>
-		monitors.every((m) => statuses.includes(m.status));
-	const someOf = (...statuses: MonitorStatus[]) =>
-		monitors.some((m) => statuses.includes(m.status));
-	const noneOf = (...statuses: MonitorStatus[]) =>
-		monitors.every((m) => !statuses.includes(m.status));
-
-	if (allOf("up")) {
-		return { tone: "up", message: allUpMessage, icon: <CircleCheck size={size} /> };
-	}
-	if (allOf("breached")) {
-		return {
-			tone: "down",
-			message: t("pages.statusPages.statusBar.allBreached"),
-			icon: <ShieldAlert size={size} />,
-		};
-	}
-	if (allOf("maintenance")) {
-		return {
-			tone: "warn",
-			message: t("pages.statusPages.statusBar.allMaintenance"),
-			icon: <Wrench size={size} />,
-		};
-	}
-	if (allOf("down")) {
-		return {
-			tone: "down",
-			message: t("pages.statusPages.statusBar.allDown"),
-			icon: <CircleX size={size} />,
-		};
-	}
-	if (allOf("paused")) {
-		return {
-			tone: "warn",
-			message: t("pages.statusPages.statusBar.allPaused"),
-			icon: <PauseCircle size={size} />,
-		};
-	}
-	if (allOf("initializing")) {
-		return {
-			tone: "warn",
-			message: t("pages.statusPages.statusBar.allInitializing"),
-			icon: <Loader size={size} />,
-		};
-	}
-	if (someOf("breached") && someOf("down")) {
-		return {
-			tone: "down",
-			message: t("pages.statusPages.statusBar.breachedAndDown"),
-			icon: <ShieldAlert size={size} />,
-		};
-	}
-	if (someOf("breached")) {
-		return {
-			tone: "down",
-			message: t("pages.statusPages.statusBar.breached"),
-			icon: <ShieldAlert size={size} />,
-		};
-	}
-	if (someOf("maintenance") && someOf("down")) {
-		return {
-			tone: "down",
-			message: t("pages.statusPages.statusBar.maintenanceAndDown"),
-			icon: <Wrench size={size} />,
-		};
-	}
-	if (someOf("maintenance") && noneOf("down")) {
-		return {
-			tone: "warn",
-			message: t("pages.statusPages.statusBar.maintenance"),
-			icon: <Wrench size={size} />,
-		};
-	}
-	if (someOf("down")) {
-		return {
-			tone: "warn",
-			message: t("pages.statusPages.statusBar.degraded"),
-			icon: <AlertTriangle size={size} />,
-		};
-	}
-	if (someOf("paused")) {
-		return {
-			tone: "warn",
-			message: t("pages.statusPages.statusBar.partiallyPaused"),
-			icon: <PauseCircle size={size} />,
-		};
-	}
-	if (someOf("initializing")) {
-		return {
-			tone: "up",
-			message: t("pages.statusPages.statusBar.initializing"),
-			icon: <Loader size={size} />,
-		};
-	}
-	return {
-		tone: "warn",
-		message: t("pages.statusPages.statusBar.unknown"),
-		icon: <AlertTriangle size={size} />,
-	};
-};
-
-export const statusBadgeKey: Record<MonitorStatus, string> = {
-	up: "pages.statusPages.monitorsList.status.up",
-	down: "pages.statusPages.monitorsList.status.down",
-	breached: "pages.statusPages.monitorsList.status.breached",
-	maintenance: "pages.statusPages.monitorsList.status.maintenance",
-	paused: "pages.statusPages.monitorsList.status.paused",
-	initializing: "pages.statusPages.monitorsList.status.initializing",
-};
-
-export const monoFirstChar = (s?: string): string =>
-	(s?.trim().charAt(0) || "?").toUpperCase();
-
-export const monitorBadgeTone = (status: MonitorStatus): OverallTone =>
-	status === "up" ? "up" : status === "down" || status === "breached" ? "down" : "warn";

client/src/Pages/StatusPage/Status/themes/tokens.ts

@@ -1,199 +0,0 @@
-import type { StatusPageTheme } from "@/Types/StatusPage";
-
-export interface StatusPageThemeTokens {
-	bg: string;
-	surface: string;
-	border: string;
-	text: string;
-	textMuted: string;
-	up: string;
-	upStrong: string;
-	upSoft: string;
-	degraded: string;
-	degradedSoft: string;
-	down: string;
-	downSoft: string;
-	warn: string;
-	warnSoft: string;
-	radius: string;
-	fontFamily?: string;
-	headingFontFamily?: string;
-	headingWeight?: number;
-	headingLetterSpacing?: string;
-	chartBarRadius?: string;
-	pulseStatusDot?: boolean;
-	staggeredCardFadeIn?: boolean;
-	conicLogo?: boolean;
-	heroSize?: "default" | "large";
-	cardStyle?: "card" | "hairline";
-}
-
-type ThemeVariants = { light: StatusPageThemeTokens; dark: StatusPageThemeTokens };
-
-const refined: ThemeVariants = {
-	light: {
-		bg: "#f4f6fa",
-		surface: "#ffffff",
-		border: "#dce1ea",
-		text: "#0a1020",
-		textMuted: "#4b5768",
-		up: "#0f8a6d",
-		upStrong: "#0c7359",
-		upSoft: "#d6f1e6",
-		degraded: "#c2630a",
-		degradedSoft: "#fde7bf",
-		down: "#d11f2f",
-		downSoft: "#fdd9dc",
-		warn: "#e08a0b",
-		warnSoft: "#fdebc5",
-		radius: "12px",
-	},
-	dark: {
-		bg: "#070b11",
-		surface: "#131a24",
-		border: "#253142",
-		text: "#f1f5fb",
-		textMuted: "#9aa7bd",
-		up: "#2fd7a2",
-		upStrong: "#1fb487",
-		upSoft: "rgba(47,215,162,0.15)",
-		degraded: "#e69138",
-		degradedSoft: "rgba(230,145,56,0.18)",
-		down: "#ff5b6b",
-		downSoft: "rgba(255,91,107,0.18)",
-		warn: "#f0a837",
-		warnSoft: "rgba(240,168,55,0.18)",
-		radius: "12px",
-	},
-};
-
-const modern: ThemeVariants = {
-	light: {
-		bg: "#fafbfc",
-		surface: "#ffffff",
-		border: "#eceef2",
-		text: "#0b1220",
-		textMuted: "#6b7280",
-		up: "#10a37f",
-		upStrong: "#0b8a6a",
-		upSoft: "#d7f3e9",
-		degraded: "#d97706",
-		degradedSoft: "#fef3c7",
-		down: "#dc2626",
-		downSoft: "#fee2e2",
-		warn: "#f59e0b",
-		warnSoft: "#fef3c7",
-		radius: "16px",
-		pulseStatusDot: true,
-		staggeredCardFadeIn: true,
-	},
-	dark: {
-		bg: "#0a0d12",
-		surface: "#10151c",
-		border: "#1b2430",
-		text: "#e8edf5",
-		textMuted: "#8a95a8",
-		up: "#10a37f",
-		upStrong: "#0b8a6a",
-		upSoft: "rgba(16,163,127,0.18)",
-		degraded: "#d97706",
-		degradedSoft: "rgba(217,119,6,0.22)",
-		down: "#dc2626",
-		downSoft: "rgba(220,38,38,0.22)",
-		warn: "#f59e0b",
-		warnSoft: "rgba(245,158,11,0.2)",
-		radius: "16px",
-		pulseStatusDot: true,
-		staggeredCardFadeIn: true,
-	},
-};
-
-const bold: ThemeVariants = {
-	light: {
-		bg: "#f5f6f9",
-		surface: "#ffffff",
-		border: "#e6e8ee",
-		text: "#0b1220",
-		textMuted: "#6b7280",
-		up: "#10a37f",
-		upStrong: "#0b8a6a",
-		upSoft: "rgba(16,163,127,0.12)",
-		degraded: "#f59e0b",
-		degradedSoft: "rgba(245,158,11,0.14)",
-		down: "#f43f5e",
-		downSoft: "rgba(244,63,94,0.12)",
-		warn: "#f59e0b",
-		warnSoft: "rgba(245,158,11,0.14)",
-		radius: "18px",
-		heroSize: "large",
-		conicLogo: true,
-	},
-	dark: {
-		bg: "#05070a",
-		surface: "#0c1117",
-		border: "#1a2330",
-		text: "#eef2f7",
-		textMuted: "#7a8699",
-		up: "#22d3a6",
-		upStrong: "#10a37f",
-		upSoft: "rgba(34,211,166,0.14)",
-		degraded: "#f59e0b",
-		degradedSoft: "rgba(245,158,11,0.14)",
-		down: "#f43f5e",
-		downSoft: "rgba(244,63,94,0.16)",
-		warn: "#f59e0b",
-		warnSoft: "rgba(245,158,11,0.14)",
-		radius: "18px",
-		heroSize: "large",
-		conicLogo: true,
-	},
-};
-
-const editorial: ThemeVariants = {
-	light: {
-		bg: "#fbfaf7",
-		surface: "#ffffff",
-		// Darkened from mockup's #e9e4d8 (~1.3:1 on #fbfaf7) to pass WCAG AA 3:1 for UI borders.
-		border: "#d4cdb8",
-		text: "#1a1a1a",
-		textMuted: "#6b675e",
-		up: "#2c6a4f",
-		upStrong: "#205239",
-		upSoft: "#dfeee4",
-		degraded: "#a46200",
-		degradedSoft: "#f7ecd4",
-		down: "#9a2a2a",
-		downSoft: "#f5dede",
-		warn: "#a46200",
-		warnSoft: "#f7ecd4",
-		radius: "6px",
-		headingFontFamily: 'Georgia, "Iowan Old Style", "Palatino Linotype", serif',
-		cardStyle: "hairline",
-	},
-	dark: {
-		bg: "#141310",
-		surface: "#1c1a15",
-		border: "#3a352b",
-		text: "#f0ece3",
-		textMuted: "#9e988a",
-		up: "#6fbf96",
-		upStrong: "#4fa37a",
-		upSoft: "rgba(44,106,79,0.22)",
-		degraded: "#d79a3b",
-		degradedSoft: "rgba(164,98,0,0.22)",
-		down: "#d87a7a",
-		downSoft: "rgba(154,42,42,0.22)",
-		warn: "#d79a3b",
-		warnSoft: "rgba(164,98,0,0.22)",
-		radius: "6px",
-		headingFontFamily: 'Georgia, "Iowan Old Style", "Palatino Linotype", serif',
-		cardStyle: "hairline",
-	},
-};
-
-export const themeTokens: Record<StatusPageTheme, ThemeVariants> = {
-	refined,
-	modern,
-	bold,
-	editorial,
-};

client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 
-import { PUBLIC_STATUS_PAGE_PREFIX, type StatusPage } from "@/Types/StatusPage";
+import type { StatusPage } from "@/Types/StatusPage";
 
 interface StatusPagesTableProps {
 	data: StatusPage[];
@@ -53,7 +53,7 @@ export const StatusPagesTable = ({
 	const handleUrlClick = (e: React.MouseEvent, row: StatusPage) => {
 		if (row.isPublished) {
 			e.stopPropagation();
-			const url = `${PUBLIC_STATUS_PAGE_PREFIX}/${row.url}`;
+			const url = `/status/public/${row.url}`;
 			window.open(url, "_blank", "noopener,noreferrer");
 		}
 	};

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

@@ -1,9 +1,4 @@
-import {
-	Table,
-	Pagination,
-	StatusLabel,
-	StatusCodeLabel,
-} from "@/Components/design-elements";
+import { Table, Pagination, StatusLabel } from "@/Components/design-elements";
 import Box from "@mui/material/Box";
 import type { Header } from "@/Components/design-elements";
 import type { Check } from "@/Types/Check";
@@ -14,25 +9,7 @@ import { formatDateWithTz } from "@/Utils/TimeUtils";
 import type { RootState } from "@/Types/state";
 import { useSelector } from "react-redux";
 
-export const ChecksTable = ({
-	checks,
-	count,
-	page,
-	setPage,
-	rowsPerPage,
-	setRowsPerPage,
-}: {
-	checks: Check[];
-	count: number;
-	page: number;
-	setPage: (page: number) => void;
-	rowsPerPage: number;
-	setRowsPerPage: (rowsPerPage: number) => void;
-}) => {
-	const navigate = useNavigate();
-	const { t } = useTranslation();
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-
+const getHeaders = (t: Function, uiTimezone: string) => {
 	const headers: Header<Check>[] = [
 		{
 			id: "status",
@@ -59,15 +36,32 @@ export const ChecksTable = ({
 			id: "statusCode",
 			content: t("pages.checks.table.headers.statusCode"),
 			render: (row) => {
-				return (
-					<StatusCodeLabel
-						statusCode={row.statusCode}
-						message={row.message}
-					/>
-				);
+				return row.statusCode || "N/A";
 			},
 		},
 	];
+	return headers;
+};
+
+export const ChecksTable = ({
+	checks,
+	count,
+	page,
+	setPage,
+	rowsPerPage,
+	setRowsPerPage,
+}: {
+	checks: Check[];
+	count: number;
+	page: number;
+	setPage: (page: number) => void;
+	rowsPerPage: number;
+	setRowsPerPage: (rowsPerPage: number) => void;
+}) => {
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
+	const headers = getHeaders(t, uiTimezone);
 
 	const handlePageChange = (
 		_e: React.MouseEvent<HTMLButtonElement> | null,

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

@@ -1,9 +1,4 @@
-import {
-	Table,
-	Pagination,
-	StatusLabel,
-	StatusCodeLabel,
-} from "@/Components/design-elements";
+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";
@@ -13,24 +8,7 @@ import type { RootState } from "@/Types/state";
 import { useSelector } from "react-redux";
 import prettyMilliseconds from "pretty-ms";
 
-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 getHeaders = (t: Function, uiTimezone: string) => {
 	const headers: Header<FlatGeoCheck>[] = [
 		{
 			id: "status",
@@ -51,7 +29,7 @@ export const GeoChecksTable = ({
 			id: "statusCode",
 			content: t("pages.checks.table.headers.statusCode"),
 			render: (row) => {
-				return <StatusCodeLabel statusCode={row.statusCode} />;
+				return row.statusCode || "N/A";
 			},
 		},
 		{
@@ -73,6 +51,27 @@ export const GeoChecksTable = ({
 			},
 		},
 	];
+	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,

client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx

@@ -13,7 +13,6 @@ import { ArrowDown, ArrowUp } from "lucide-react";
 
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
 import { useNavigate } from "react-router-dom";
 import { usePost } from "@/Hooks/UseApi";
 import { useSelector } from "react-redux";
@@ -21,25 +20,6 @@ import { useSelector } from "react-redux";
 import type { Monitor } from "@/Types/Monitor";
 import type { ActionMenuItem } from "@/Components/actions-menu";
 import type { RootState } from "@/Types/state";
-import { Checkbox } from "@/Components/inputs";
-import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
-
-interface MonitorTableProps {
-	monitors: Monitor[];
-	refetch: () => void;
-	setSelectedMonitor: (monitor: Monitor | null) => void;
-	sortField: string;
-	setSortField: (field: string) => void;
-	sortOrder: "asc" | "desc";
-	setSortOrder: (order: "asc" | "desc") => void;
-	count: number;
-	page: number;
-	setPage: (page: number) => void;
-	rowsPerPage: number;
-	setRowsPerPage: (rowsPerPage: number) => void;
-	selectedRows?: string[];
-	onSelectionChange?: (selected: string[]) => void;
-}
 
 export const MonitorTable = ({
 	monitors,
@@ -54,35 +34,31 @@ export const MonitorTable = ({
 	setPage,
 	rowsPerPage,
 	setRowsPerPage,
-	selectedRows = [],
-	onSelectionChange,
-}: MonitorTableProps) => {
+}: {
+	monitors: Monitor[];
+	refetch: Function;
+	setSelectedMonitor: (monitor: Monitor | null) => void;
+	sortField: string;
+	setSortField: (field: string) => void;
+	sortOrder: "asc" | "desc";
+	setSortOrder: (order: "asc" | "desc") => void;
+	count: number;
+	page: number;
+	setPage: (page: number) => void;
+	rowsPerPage: number;
+	setRowsPerPage: (rowsPerPage: number) => void;
+}) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const navigate = useNavigate();
 	const chartType = useSelector((state: RootState) => state.ui?.chartType ?? "histogram");
-	const { post } = usePost<Record<string, never>, Monitor>();
+	const {
+		post,
+		// loading: isPosting,
+		// error: postError,
+	} = usePost<any, Monitor>();
 
-	const selectedSet = new Set(selectedRows);
-	const isAllSelected =
-		monitors.length > 0 && monitors.every((m) => selectedSet.has(m.id));
-	const isSomeSelected = selectedRows.length > 0 && !isAllSelected;
-
-	const handleSelectAll = (checked: boolean) => {
-		onSelectionChange?.(checked ? monitors.map((m) => m.id) : []);
-	};
-
-	const handleSelectRow = (id: string, checked: boolean) => {
-		if (!onSelectionChange) return;
-		onSelectionChange(
-			checked ? [...selectedRows, id] : selectedRows.filter((rowId) => rowId !== id)
-		);
-	};
-
-	const isRowSelected = (id: string) => selectedSet.has(id);
-
-	const handleSort = (e: React.MouseEvent, field: string) => {
+	const handleSort = (e: any, field: string) => {
 		e.preventDefault();
 		e.stopPropagation();
 		if (sortField === field) {
@@ -134,6 +110,13 @@ export const MonitorTable = ({
 					navigate(`/uptime/configure/${monitor.id}`);
 				},
 			},
+			// {
+			//   id: 5,
+			//   label: "Clone",
+			//   action: () => {
+
+			//   },
+			// },
 			{
 				id: 6,
 				label:
@@ -177,38 +160,11 @@ export const MonitorTable = ({
 			</Box>
 		);
 		const headers: Header<Monitor>[] = [
-			{
-				id: "selection",
-				content: (
-					<Checkbox
-						aria-label={t("pages.common.monitors.actions.selectAll")}
-						indeterminate={isSomeSelected}
-						checked={isAllSelected}
-						onChange={(e) => handleSelectAll(e.target.checked)}
-					/>
-				),
-				hideMobileLabel: true,
-				render: (row) => (
-					<Checkbox
-						aria-label={t("pages.common.monitors.actions.selectMonitor", {
-							name: row.name,
-						})}
-						checked={isRowSelected(row.id)}
-						onChange={(e) => {
-							handleSelectRow(row.id, e.target.checked);
-						}}
-						onClick={(e) => e.stopPropagation()}
-					/>
-				),
-				onClick: (e) => e?.stopPropagation(),
-			},
 			{
 				id: "name",
-				align: "left",
-				mobileLabel: t("common.table.headers.name"),
 				content: (
 					<Stack
-						gap={theme.spacing(LAYOUT.XS)}
+						gap={theme.spacing(4)}
 						direction={"row"}
 						alignItems={"center"}
 						onClick={(e) => handleSort(e, "name")}
@@ -225,17 +181,16 @@ export const MonitorTable = ({
 			},
 			{
 				id: "status",
-				mobileLabel: t("common.table.headers.status"),
 				content: (
 					<Stack
-						gap={theme.spacing(LAYOUT.XS)}
+						gap={theme.spacing(4)}
 						direction={"row"}
 						justifyContent={"center"}
 						alignItems={"center"}
 						onClick={(e) => handleSort(e, "status")}
 						sx={{ cursor: "pointer" }}
 					>
-						<Box width={theme.spacing(LAYOUT.MD)} />
+						<Box width={theme.spacing(8)} />
 						{t("common.table.headers.status")}
 						{renderSortIcon(sortField === "status")}
 					</Stack>
@@ -257,17 +212,16 @@ export const MonitorTable = ({
 			},
 			{
 				id: "type",
-				mobileLabel: t("common.table.headers.type"),
 				content: (
 					<Stack
-						gap={theme.spacing(LAYOUT.XS)}
+						gap={theme.spacing(4)}
 						direction={"row"}
 						justifyContent={"center"}
 						alignItems={"center"}
 						onClick={(e) => handleSort(e, "type")}
 						sx={{ cursor: "pointer" }}
 					>
-						<Box width={theme.spacing(LAYOUT.MD)} />
+						<Box width={theme.spacing(8)} />
 						{t("common.table.headers.type")}
 						{renderSortIcon(sortField === "type")}
 					</Stack>
@@ -291,41 +245,12 @@ export const MonitorTable = ({
 
 	return (
 		<Box>
-			{isSmall && (
-				<Box
-					px={SPACING.SM}
-					pb={SPACING.LG}
-				>
-					<Stack
-						direction="row"
-						alignItems="center"
-						spacing={SPACING.SM}
-					>
-						<Checkbox
-							checked={isAllSelected}
-							indeterminate={isSomeSelected}
-							onChange={(e) => handleSelectAll(e.target.checked)}
-						/>
-						<Typography
-							variant="body2"
-							color="text.secondary"
-						>
-							{t("pages.common.monitors.bulkEdit.selectAll", "Select All")}
-						</Typography>
-					</Stack>
-				</Box>
-			)}
 			<Table
 				headers={headers}
 				data={monitors}
 				onRowClick={(row) => {
 					navigate(`/uptime/${row.id}`);
 				}}
-				getRowSx={(row) => ({
-					backgroundColor: isRowSelected(row.id)
-						? theme.palette.action.selected
-						: "inherit",
-				})}
 			/>
 			<Pagination
 				component="div"

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

@@ -1,15 +1,9 @@
-import {
-	ControlsFilter,
-	HeaderMonitorsSummary,
-	BulkActionsBar,
-} from "@/Components/monitors";
+import { ControlsFilter, HeaderMonitorsSummary } from "@/Components/monitors";
 import { MonitorBasePageWithStates } from "@/Components/design-elements";
-import { TextField, Dialog, Button } from "@/Components/inputs";
+import { TextField, Dialog } from "@/Components/inputs";
 import Stack from "@mui/material/Stack";
 import { MonitorTable } from "@/Pages/Uptime/Monitors/Components/UptimeMonitorsTable";
 import { HeaderCreate } from "@/Components/common";
-import { Play, Pause } from "lucide-react";
-import { BulkEditNotificationsModal } from "@/Components/monitors";
 
 import { useTranslation } from "react-i18next";
 import useMediaQuery from "@mui/material/useMediaQuery";
@@ -22,8 +16,6 @@ import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import type { RootState } from "@/Types/state";
 import { useTheme } from "@mui/material";
 import useDebounce from "@/Hooks/useDebounce";
-import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
-import { LAYOUT } from "@/Utils/Theme/constants";
 
 const UptimeMonitorsPage = () => {
 	const { t } = useTranslation();
@@ -45,7 +37,6 @@ const UptimeMonitorsPage = () => {
 	const [sortField, setSortField] = useState<string>("");
 	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
 	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
-	const [isBulkEditModalOpen, setIsBulkEditModalOpen] = useState(false);
 	const isDialogOpen = Boolean(selectedMonitor);
 
 	const debouncedSearch = useDebounce<string>(search, 300);
@@ -79,7 +70,7 @@ const UptimeMonitorsPage = () => {
 	const effectiveTypes =
 		selectedTypes.length > 0
 			? selectedTypes
-			: ["http", "ping", "docker", "port", "game", "grpc", "websocket", "dns"];
+			: ["http", "ping", "docker", "port", "game", "grpc", "websocket"];
 
 	// Build URL for monitors with checks
 	const monitorsWithChecksUrl = useMemo(() => {
@@ -111,15 +102,6 @@ const UptimeMonitorsPage = () => {
 		count,
 	} = monitorsWithChecksData ?? { monitors: null, summary: null, count: 0 };
 
-	// Bulk actions
-	const {
-		selectedRows,
-		setSelectedRows,
-		handleBulkPause,
-		handleBulkResume,
-		handleCancelSelection,
-	} = useBulkMonitorActions(refetch, page);
-
 	// Delete hook
 	const { deleteFn, loading: isDeleting } = useDelete();
 
@@ -138,14 +120,6 @@ const UptimeMonitorsPage = () => {
 		refetch();
 	};
 
-	const handleBulkEditComplete = (success: boolean) => {
-		setIsBulkEditModalOpen(false);
-		if (success) {
-			setSelectedRows([]);
-			refetch();
-		}
-	};
-
 	const handleCancel = () => {
 		setSelectedMonitor(null);
 	};
@@ -184,7 +158,7 @@ const UptimeMonitorsPage = () => {
 			<Stack
 				direction={isSmall ? "column" : "row"}
 				justifyContent={isSmall ? "flex-start" : "space-between"}
-				gap={theme.spacing(LAYOUT.XS)}
+				gap={theme.spacing(4)}
 			>
 				<ControlsFilter
 					selectedTypes={selectedTypes}
@@ -203,47 +177,13 @@ const UptimeMonitorsPage = () => {
 					}}
 				/>
 			</Stack>
-
-			{!isLoading && (
-				<BulkActionsBar
-					selectedCount={selectedRows.length}
-					onCancel={handleCancelSelection}
-				>
-					<Button
-						size="small"
-						startIcon={<Play size={16} />}
-						onClick={handleBulkResume}
-					>
-						{t("common.buttons.resume")}
-					</Button>
-					<Button
-						size="small"
-						startIcon={<Pause size={16} />}
-						onClick={handleBulkPause}
-					>
-						{t("common.buttons.pause")}
-					</Button>
-					<Button
-						size="small"
-						onClick={() => setIsBulkEditModalOpen(true)}
-					>
-						{t("pages.common.monitors.bulkEdit.editButton", {
-							defaultValue: "Edit Notifications",
-						})}
-					</Button>
-				</BulkActionsBar>
-			)}
-
 			<MonitorTable
-				page={page}
 				monitors={monitorsWithChecks || []}
 				refetch={refetch}
 				setSelectedMonitor={setSelectedMonitor}
 				count={count || 0}
-				setPage={(newPage) => {
-					setPage(newPage);
-					setSelectedRows([]);
-				}}
+				page={page}
+				setPage={setPage}
 				rowsPerPage={rowsPerPage}
 				sortField={sortField}
 				setSortField={setSortField}
@@ -257,10 +197,7 @@ const UptimeMonitorsPage = () => {
 						})
 					);
 					setPage(0);
-					setSelectedRows([]);
 				}}
-				selectedRows={selectedRows}
-				onSelectionChange={setSelectedRows}
 			/>
 			<Dialog
 				open={isDialogOpen}
@@ -270,12 +207,6 @@ const UptimeMonitorsPage = () => {
 				onCancel={handleCancel}
 				loading={isDeleting}
 			/>
-			<BulkEditNotificationsModal
-				open={isBulkEditModalOpen}
-				onClose={() => setIsBulkEditModalOpen(false)}
-				selectedMonitors={selectedRows}
-				onComplete={handleBulkEditComplete}
-			/>
 		</MonitorBasePageWithStates>
 	);
 };

client/src/Types/MaintenanceWindow.ts

@@ -2,7 +2,7 @@ export type DurationUnit = "seconds" | "minutes" | "hours" | "days";
 
 export interface MaintenanceWindow {
 	id: string;
-	monitorIds: string[];
+	monitorId: string;
 	teamId: string;
 	active: boolean;
 	name: string;

client/src/Types/Monitor.ts

@@ -3,8 +3,6 @@ import type { PageSpeedGroupedCheck } from "@/Types/Check";
 import type { GeoContinent } from "@/Types/GeoCheck";
 export type { GeoContinent } from "@/Types/GeoCheck";
 
-export const MAX_RECENT_CHECKS = 50;
-
 export const MonitorTypes = [
 	"http",
 	"ping",
@@ -15,14 +13,10 @@ export const MonitorTypes = [
 	"game",
 	"grpc",
 	"websocket",
-	"dns",
 	"unknown",
 ] as const;
 export type MonitorType = (typeof MonitorTypes)[number];
 
-export const DnsRecordTypes = ["A", "AAAA", "CNAME", "MX", "TXT", "NS"] as const;
-export type DnsRecordType = (typeof DnsRecordTypes)[number];
-
 export const GeoCheckSupportedTypes: readonly MonitorType[] = ["http", "ping"] as const;
 
 export const supportsGeoCheck = (type: MonitorType | undefined): boolean => {
@@ -44,10 +38,6 @@ export type MonitorStatus = (typeof MonitorStatuses)[number];
 
 export type MonitorMatchMethod = "equal" | "include" | "regex" | "";
 
-export const PageSpeedStrategies = ["desktop", "mobile"] as const;
-export type PageSpeedStrategy = (typeof PageSpeedStrategies)[number];
-export const DefaultPageSpeedStrategy: PageSpeedStrategy = "desktop";
-
 export interface Monitor {
 	id: string;
 	userId: string;
@@ -82,13 +72,10 @@ export interface Monitor {
 	selectedDisks: string[];
 	gameId?: string;
 	grpcServiceName?: string;
-	strategy?: PageSpeedStrategy;
 	group: string | null;
 	geoCheckEnabled?: boolean;
 	geoCheckLocations?: GeoContinent[];
 	geoCheckInterval?: number;
-	dnsServer?: string;
-	dnsRecordType?: DnsRecordType;
 	recentChecks: CheckSnapshot[];
 	createdAt: string;
 	updatedAt: string;

client/src/Types/Queue.ts

@@ -23,8 +23,6 @@ export interface QueueJobSummary {
 	monitorUrl: string | null;
 	monitorType: MonitorType | null;
 	monitorInterval: number | null;
-	monitorGeoInterval: number | null;
-	monitorActive: boolean | null;
 	active: boolean;
 	lockedAt: number | null;
 	runCount: number;
@@ -34,7 +32,6 @@ export interface QueueJobSummary {
 	lastFinishedAt: number | null;
 	lastRunTook: number | null;
 	lastFailedAt: number | null;
-	repeat: number | null;
 }
 
 export interface QueueData {

client/src/Types/Settings.ts

@@ -12,7 +12,6 @@ export interface Settings {
 	systemEmailHost?: string;
 	systemEmailPort?: number;
 	systemEmailAddress?: string;
-	systemEmailDisplayName?: string;
 	systemEmailUser?: string;
 	systemEmailConnectionHost?: string;
 	systemEmailTLSServername?: string;

client/src/Types/StatusPage.ts

@@ -21,25 +21,6 @@ export const getMonitorTypeLabel = (
 	return key ? t(key) : type;
 };
 
-export const STATUS_PAGE_THEMES = ["refined", "modern", "bold", "editorial"] as const;
-export type StatusPageTheme = (typeof STATUS_PAGE_THEMES)[number];
-export const DEFAULT_STATUS_PAGE_THEME: StatusPageTheme = "refined";
-
-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 resolveStatusPageTheme = (
-	value: string | null | undefined
-): StatusPageTheme =>
-	STATUS_PAGE_THEMES.find((t) => t === value) ?? DEFAULT_STATUS_PAGE_THEME;
-
-export const resolveStatusPageThemeMode = (
-	value: string | null | undefined
-): StatusPageThemeMode =>
-	STATUS_PAGE_THEME_MODES.find((m) => m === value) ?? DEFAULT_STATUS_PAGE_THEME_MODE;
-export const PUBLIC_STATUS_PAGE_PREFIX = "/status/public";
-
 export interface StatusPage {
 	id: string;
 	userId: string;
@@ -62,8 +43,6 @@ export interface StatusPage {
 	showAdminLoginLink: boolean;
 	showInfrastructure: boolean;
 	customCSS: string;
-	theme: StatusPageTheme;
-	themeMode: StatusPageThemeMode;
 	createdAt: string;
 	updatedAt: string;
 }

client/src/Utils/MonitorUtils.ts

@@ -10,7 +10,6 @@ export const getMonitorPath = (type: MonitorType): string => {
 		game: "uptime",
 		grpc: "uptime",
 		websocket: "uptime",
-		dns: "uptime",
 		unknown: "uptime",
 		docker: "uptime",
 		hardware: "infrastructure",

client/src/Utils/Theme/Palette.ts

@@ -1,15 +1,12 @@
-import { alpha } from "@mui/material/styles";
-
 const typographyBase = 13;
 
 export const typographyLevels = {
-	base: typographyBase, // 13px
-	xs: `${(typographyBase - 4) / 16}rem`, // 9px
-	s: `${(typographyBase - 2) / 16}rem`, // 11px
-	m: `${typographyBase / 16}rem`, // 13px
-	l: `${(typographyBase + 2) / 16}rem`, // 15px
-	xl: `${(typographyBase + 5) / 16}rem`, // 18px
-	xxl: `${(typographyBase + 10) / 16}rem`, // 23px
+	base: typographyBase,
+	xs: `${(typographyBase - 4) / 16}rem`,
+	s: `${(typographyBase - 2) / 16}rem`,
+	m: `${typographyBase / 16}rem`,
+	l: `${(typographyBase + 2) / 16}rem`,
+	xl: `${(typographyBase + 10) / 16}rem`,
 };
 
 export const colors = {
@@ -19,9 +16,6 @@ export const colors = {
 	gray850: "#1c1c21",
 	brandGreen: "#13715B",
 	brandGreenLight: "#4DAF94",
-	green200: "#ECF7F2",
-	yellow200: "#FFF4E5",
-	orange500: "#FFA500",
 };
 
 export const lightPalette = {
@@ -34,10 +28,6 @@ export const lightPalette = {
 	sidebar: {
 		accent: colors.brandGreen,
 	},
-	rowStatus: {
-		running: colors.green200,
-		paused: colors.yellow200,
-	},
 };
 
 export const darkPalette = {
@@ -54,8 +44,4 @@ export const darkPalette = {
 	sidebar: {
 		accent: colors.brandGreenLight,
 	},
-	rowStatus: {
-		running: alpha(colors.brandGreen, 0.18),
-		paused: alpha(colors.orange500, 0.18),
-	},
 };

client/src/Utils/Theme/Theme.ts

@@ -15,11 +15,9 @@ declare module "@mui/material/styles" {
 	}
 	interface Palette {
 		sidebar: { accent: string };
-		rowStatus: { running: string; paused: string };
 	}
 	interface PaletteOptions {
 		sidebar?: { accent: string };
-		rowStatus?: { running: string; paused: string };
 	}
 }
 
@@ -60,7 +58,7 @@ export const theme = (mode: string, palette: any) =>
 			fontFamilyMonospace,
 			fontSize: typographyLevels.base,
 			h1: {
-				fontSize: typographyLevels.xxl,
+				fontSize: typographyLevels.xl,
 				fontWeight: 500,
 			},
 			h2: {

client/src/Utils/Theme/constants.ts

@@ -1,5 +1,4 @@
 export const SPACING = {
-	XXS: 0.25,
 	XS: 0.5,
 	SM: 1,
 	MD: 1.5,
@@ -9,7 +8,6 @@ export const SPACING = {
 } as const;
 
 export const LAYOUT = {
-	XXS: 2,
 	XS: 4,
 	SM: 6,
 	MD: 8,
@@ -17,7 +15,3 @@ export const LAYOUT = {
 	XL: 12,
 	XXL: 16,
 } as const;
-
-export const HOVER = {
-	DARKEN: 0.06, // This is a coefficient for darkening function
-} as const;

client/src/Utils/TimeUtils.ts

@@ -15,33 +15,12 @@ export const MS_PER_HOUR = 60 * MS_PER_MINUTE;
 export const MS_PER_DAY = 24 * MS_PER_HOUR;
 export const MS_PER_WEEK = MS_PER_DAY * 7;
 
-const resolveSystemTimezone = (): string => {
-	try {
-		return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
-	} catch {
-		return "UTC";
-	}
-};
-
-export const SYSTEM_TIMEZONE = resolveSystemTimezone();
-
-export const resolveTimezone = (preferred?: string | null): string =>
-	preferred?.trim() || SYSTEM_TIMEZONE;
-
-export const formatDateWithTz = (
-	timestamp: string,
-	format: string,
-	timezone?: string
-) => {
+export const formatDateWithTz = (timestamp: string, format: string, timezone: string) => {
 	if (!timestamp) {
 		return "Unknown time";
 	}
-	const tz = resolveTimezone(timezone);
-	try {
-		return dayjs(timestamp).tz(tz).format(format);
-	} catch {
-		return dayjs(timestamp).utc().format(format);
-	}
+	const formattedDate = dayjs(timestamp).tz(timezone).format(format);
+	return formattedDate;
 };
 
 export const tickDateFormatLookup = (range: string) => {

client/src/Utils/statusCode.ts

@@ -1,76 +0,0 @@
-import type { ValueType } from "@/Components/design-elements/StatusLabel";
-
-export const NETWORK_ERROR_CODE = 5000;
-
-export const NETWORK_ERROR_SUBTYPES = [
-	"timeout",
-	"dns",
-	"refused",
-	"tls",
-	"reset",
-	"unknown",
-] as const;
-export type NetworkErrorSubtype = (typeof NETWORK_ERROR_SUBTYPES)[number];
-
-type TranslateFn = (key: string) => string;
-
-export const isNetworkError = (code?: number | null): boolean =>
-	code === NETWORK_ERROR_CODE;
-
-const ERROR_CODE_PATTERN =
-	/\b(E[A-Z_]{2,}|CERT_[A-Z_]+|UNABLE_TO_VERIFY[A-Z_]*|DEPTH_ZERO_SELF_SIGNED[A-Z_]*|SELF_SIGNED[A-Z_]*)\b/;
-
-export const extractErrorCode = (message?: string | null): string | null => {
-	if (!message) return null;
-	const match = message.match(ERROR_CODE_PATTERN);
-	return match ? match[1] : null;
-};
-
-export const getNetworkErrorSubtype = (message?: string | null): NetworkErrorSubtype => {
-	if (!message) return "unknown";
-	const m = message.toUpperCase();
-	if (m.includes("ETIMEDOUT") || m.includes("TIMEOUT") || m.includes("ESOCKETTIMEDOUT"))
-		return "timeout";
-	if (m.includes("ENOTFOUND") || m.includes("EAI_AGAIN") || m.includes("DNS"))
-		return "dns";
-	if (m.includes("ECONNREFUSED")) return "refused";
-	if (
-		m.includes("CERT_") ||
-		m.includes("UNABLE_TO_VERIFY") ||
-		m.includes("DEPTH_ZERO_SELF_SIGNED") ||
-		m.includes("SELF_SIGNED") ||
-		m.includes("TLS") ||
-		m.includes("SSL")
-	)
-		return "tls";
-	if (m.includes("ECONNRESET")) return "reset";
-	return "unknown";
-};
-
-export const formatStatusCode = (
-	code: number | null | undefined,
-	t: TranslateFn
-): string => {
-	if (isNetworkError(code)) return t("common.statusCode.down");
-	return String(code);
-};
-
-export const getStatusCodeTooltip = (
-	code: number | null | undefined,
-	message: string | null | undefined,
-	t: TranslateFn
-): string | null => {
-	if (!isNetworkError(code)) return null;
-	const description = t(
-		`common.statusCode.networkError.${getNetworkErrorSubtype(message)}`
-	);
-	const errorCode = extractErrorCode(message);
-	return errorCode ? `${description} (${errorCode})` : description;
-};
-
-export const getStatusCodeValueType = (code: number): ValueType => {
-	if (isNetworkError(code)) return "negative";
-	if (code < 300) return "positive";
-	if (code < 400) return "neutral";
-	return "negative";
-};

client/src/Validation/maintenanceWindow.ts

@@ -14,32 +14,30 @@ export const durationUnitOptions = [
 	{ id: "days", name: "days", multiplier: 86400000 },
 ] as const;
 
-const maintenanceWindowBaseSchema = z.object({
-	name: z
-		.string()
-		.min(1, "Name is required")
-		.max(100, "Name must be at most 100 characters"),
-	repeat: z.string(),
-	startDate: z.string().min(1, "Start date is required"),
-	startTime: z.string().min(1, "Start time is required"),
-	duration: z.number().int().min(1, "Duration must be at least 1"),
-	durationUnit: z.string(),
-	monitors: z.array(z.string()).min(1, "At least one monitor is required"),
-});
-
-export const maintenanceWindowSchema = maintenanceWindowBaseSchema.refine(
-	(data) => {
-		const startDateTime = dayjs(data.startDate)
-			.set("hour", parseInt(data.startTime.split(":")[0], 10))
-			.set("minute", parseInt(data.startTime.split(":")[1], 10));
-		return startDateTime.isAfter(dayjs());
-	},
-	{
-		message: "Start date and time must be in the future",
-		path: ["startDate"],
-	}
-);
-
-export const maintenanceWindowEditSchema = maintenanceWindowBaseSchema;
+export const maintenanceWindowSchema = z
+	.object({
+		name: z
+			.string()
+			.min(1, "Name is required")
+			.max(100, "Name must be at most 100 characters"),
+		repeat: z.string(),
+		startDate: z.string().min(1, "Start date is required"),
+		startTime: z.string().min(1, "Start time is required"),
+		duration: z.number().int().min(1, "Duration must be at least 1"),
+		durationUnit: z.string(),
+		monitors: z.array(z.string()).min(1, "At least one monitor is required"),
+	})
+	.refine(
+		(data) => {
+			const startDateTime = dayjs(data.startDate)
+				.set("hour", parseInt(data.startTime.split(":")[0], 10))
+				.set("minute", parseInt(data.startTime.split(":")[1], 10));
+			return startDateTime.isAfter(dayjs());
+		},
+		{
+			message: "Start date and time must be in the future",
+			path: ["startDate"],
+		}
+	);
 
 export type MaintenanceWindowFormData = z.infer<typeof maintenanceWindowSchema>;

client/src/Validation/monitor.ts

@@ -1,6 +1,5 @@
 import { z } from "zod";
 import { GeoContinents } from "@/Types/GeoCheck";
-import { DnsRecordTypes, PageSpeedStrategies } from "@/Types/Monitor";
 
 // URL schema with custom error message
 const urlSchema = z.url({ message: "Please enter a valid URL" });
@@ -90,7 +89,6 @@ const grpcSchema = baseSchema.extend({
 const pagespeedSchema = baseSchema.extend({
 	type: z.literal("pagespeed"),
 	url: urlSchema,
-	strategy: z.enum(PageSpeedStrategies),
 });
 
 // Hardware/Infrastructure monitor schema
@@ -124,29 +122,6 @@ const websocketSchema = baseSchema.extend({
 	ignoreTlsErrors: z.boolean(),
 });
 
-// Hostname (FQDN) — labels of 1-63 alphanumerics/hyphens separated by dots,
-// optionally prefixed with `_` for service labels (e.g. _dmarc, _imaps._tcp).
-// No scheme, port, path, or whitespace. Total length ≤ 253.
-const hostnameRegex =
-	/^(?=.{1,253}$)([a-zA-Z0-9_](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,63}$/;
-
-// DNS monitor schema
-const dnsSchema = baseSchema.extend({
-	type: z.literal("dns"),
-	url: z
-		.string()
-		.min(1, "Domain is required")
-		.regex(hostnameRegex, "Enter a valid domain (e.g. www.example.com)"),
-	dnsServer: z
-		.string()
-		.min(1, "DNS server is required")
-		.refine(
-			(v) => z.ipv4().safeParse(v).success || z.ipv6().safeParse(v).success,
-			"Enter a valid IPv4 or IPv6 address (e.g. 8.8.8.8)"
-		),
-	dnsRecordType: z.enum(DnsRecordTypes),
-});
-
 // Discriminated union of all monitor types
 export const monitorSchema = z.discriminatedUnion("type", [
 	httpSchema,
@@ -158,7 +133,6 @@ export const monitorSchema = z.discriminatedUnion("type", [
 	pagespeedSchema,
 	hardwareSchema,
 	websocketSchema,
-	dnsSchema,
 ]);
 
 export type MonitorFormData = z.infer<typeof monitorSchema>;

client/src/Validation/settings.ts

@@ -32,11 +32,6 @@ export const settingsSchema = z.object({
 		.or(z.literal(""))
 		.transform((val) => (val === "" ? null : val.toLowerCase().trim()))
 		.optional(),
-	systemEmailDisplayName: z
-		.string()
-		.max(100, "Display name must be 100 characters or fewer")
-		.transform((val) => (val.trim() === "" ? null : val.trim()))
-		.optional(),
 	systemEmailUser: z
 		.string()
 		.transform((val) => (val.trim() === "" ? null : val.trim()))

client/src/Validation/statusPage.ts

@@ -1,5 +1,4 @@
 import { z } from "zod";
-import { STATUS_PAGE_THEMES, STATUS_PAGE_THEME_MODES } from "@/Types/StatusPage";
 
 export const statusPageSchema = z.object({
 	companyName: z
@@ -26,8 +25,6 @@ export const statusPageSchema = z.object({
 	showAdminLoginLink: z.boolean(),
 	showInfrastructure: z.boolean(),
 	customCSS: z.string().optional(),
-	theme: z.enum(STATUS_PAGE_THEMES).optional(),
-	themeMode: z.enum(STATUS_PAGE_THEME_MODES).optional(),
 	logo: z
 		.object({
 			data: z.string(),