Monitor summary now displays correct data

Client/src/Components/Charts/Servers/ServerStatus.jsx

@@ -7,7 +7,7 @@ import { useTheme } from "@mui/material";
  * @component
  * @param {Object} props
  * @param {string} props.title - The title text for the server status (required)
- * @param {string} props.value - The value text to be displayed (required)
+ * @param {number} props.value - The value text to be displayed (required)
  * @param {string} props.state - The state of the server (e.g., "online", "offline", "warning") (required)
  * @returns {JSX.Element} - Renders the server status component
  */
@@ -30,7 +30,7 @@ const ServerStatus = ({ title, value, state }) => {
 
 ServerStatus.propTypes = {
   title: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
+  value: PropTypes.number.isRequired,
   state: PropTypes.string.isRequired,
 };
 

Client/src/Pages/Monitors/CurrentStats.jsx

@@ -11,6 +11,18 @@ import PropTypes from "prop-types";
  */
 
 const CurrentStats = ({ monitors }) => {
+  const up = monitors.reduce((acc, cur) => {
+    if (cur.checks) {
+      return cur.checks[cur.checks.length - 1].status === true ? acc + 1 : acc;
+    }
+  }, 0);
+
+  const down = monitors.reduce((acc, cur) => {
+    if (cur.checks) {
+      return cur.checks[cur.checks.length - 1].status === false ? acc + 1 : acc;
+    }
+  }, 0);
+
   return (
     <div>
       <div className="monitors-gaps-medium"></div>
@@ -25,9 +37,9 @@ const CurrentStats = ({ monitors }) => {
       </div>
       <div className="monitors-gaps-medium"></div>
       <div className="monitors-stats">
-        <ServerStatus title="Up" value="4" state="up" />
-        <ServerStatus title="Down" value="0" state="down" />
-        <ServerStatus title="Paused" value="0" state="pause" />
+        <ServerStatus title="Up" value={up} state="up" />
+        <ServerStatus title="Down" value={down} state="down" />
+        <ServerStatus title="Paused" value={0} state="pause" />
       </div>
       <div className="monitors-gaps-medium"></div>
       <CurrentMonitors monitors={monitors} />