add placeholder

client/src/components/inputs/Select.tsx

@@ -4,22 +4,59 @@ import type { SelectProps } from "@mui/material/Select";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
 import { ChevronDown } from "lucide-react";
+import Typography from "@mui/material/Typography";
 
 interface SelectInputProps<T> extends Omit<SelectProps<T>, "label"> {
   fieldLabel?: string;
   required?: boolean;
+  placeholder?: string;
+  placeholderColor?: string;
 }
 
 export const SelectInput = <T,>({
   fieldLabel,
   required,
+  placeholder,
+  placeholderColor,
   ...props
 }: SelectInputProps<T>) => {
   const theme = useTheme();
+  const emptyPlaceholderColor = placeholderColor || theme.palette.text.disabled;
+
+  const renderValue = (selected: any) => {
+    const isMultiple = Boolean((props as any).multiple);
+    const isEmpty = isMultiple
+      ? !Array.isArray(selected) || selected.length === 0
+      : selected === undefined || selected === null || selected === "";
+
+    if (isEmpty && placeholder) {
+      return (
+        <Typography sx={{ color: emptyPlaceholderColor }}>
+          {placeholder}
+        </Typography>
+      );
+    }
+
+    if (isMultiple) {
+      const items: string[] = Array.isArray(selected) ? selected : [];
+      const capitalized = items.map(
+        (item) => item.charAt(0).toUpperCase() + item.slice(1)
+      );
+      return <Typography>{capitalized.join(" | ")}</Typography> as any;
+    }
+
+    return selected as any;
+  };
 
   const select = (
     <Select<T>
       {...props}
+      displayEmpty
+      renderValue={renderValue}
+      inputProps={{
+        ...(props.inputProps || {}),
+        "aria-placeholder": placeholder,
+      }}
       IconComponent={() => (
         <ChevronDown
           size={18}

client/src/components/monitors/HeaderFilter.tsx

@@ -12,16 +12,6 @@ import {
   type MonitorStatus,
 } from "@/types/monitor";
 
-const formatValue = (value: string[], fallback: string) => {
-  if (value.length === 0) {
-    return fallback;
-  }
-  const capitalized = value.map(
-    (item) => item.charAt(0).toUpperCase() + item.slice(1)
-  );
-  return capitalized.join(" | ");
-};
-
 type HeaderFilterProps = {
   selectedTypes: UptimeMonitorType[];
   selectedStatuses: MonitorStatus[];
@@ -56,12 +46,10 @@ export const HeaderFilter = ({
     <Stack spacing={theme.spacing(4)} direction={{ xs: "column", sm: "row" }}>
       <Select
         fieldLabel="Monitor type"
+        placeholder="Monitor type"
         multiple
         value={selectedTypes}
         onChange={handleTypeChange}
-        renderValue={(selected) => (
-          <Typography>{formatValue(selected, "All Monitor Types")}</Typography>
-        )}
       >
         {UptimeMonitorTypes.map((type) => (
           <MenuItem key={type} value={type}>
@@ -72,14 +60,10 @@ export const HeaderFilter = ({
       </Select>
       <Select
         fieldLabel="Monitor status"
+        placeholder="Monitor status"
         multiple
         value={selectedStatuses}
         onChange={handleStatusChange}
-        renderValue={(selected) => (
-          <Typography>
-            {formatValue(selected, "All Monitor Statuses")}
-          </Typography>
-        )}
       >
         {MonitorStatuses.map((status) => (
           <MenuItem key={status} value={status}>

client/src/pages/uptime/UptimeMonitors.tsx

@@ -139,7 +139,7 @@ const UptimeMonitors = () => {
         setSortField={setSortField}
         sortOrder={sortOrder}
         setSortOrder={setSortOrder}
-        count={count}
+        count={monitors?.length || 0}
         page={page}
         setPage={setPage}
         rowsPerPage={rowsPerPage}

server/package-lock.json

@@ -5379,7 +5379,6 @@
       "resolved": "https://registry.npmjs.org/express/-/express-5.1.0.tgz",
       "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.0",

server/src/controllers/MonitorController.ts

@@ -8,10 +8,11 @@ import {
 
 export interface IMonitorController {
   create(req: Request, res: Response, next: NextFunction): Promise<void>;
+  getSummary(req: Request, res: Response, next: NextFunction): Promise<void>;
+  get(req: Request, res: Response, next: NextFunction): Promise<void>;
   getAll(req: Request, res: Response, next: NextFunction): Promise<void>;
   getChecks(req: Request, res: Response, next: NextFunction): Promise<void>;
   togglePause(req: Request, res: Response, next: NextFunction): Promise<void>;
-  get(req: Request, res: Response, next: NextFunction): Promise<void>;
   update(req: Request, res: Response, next: NextFunction): Promise<void>;
   delete(req: Request, res: Response, next: NextFunction): Promise<void>;
   testNotifications(

server/src/services/business/MonitorService.ts

@@ -127,7 +127,7 @@ class MonitorService implements IMonitorService {
 
     const countResult = await Monitor.aggregate([
       {
-        $match: matchConditions,
+        $match: { teamId: teamObjectId },
       },
       {
         $group: {