From cf447beb416339a1a02b20a7aa63d6360b646e9f Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Fri, 5 Jul 2024 21:21:57 -0700
Subject: [PATCH] Added some functions to get the ball rolling on how we will
 tackle populating the table with the correct values.

---
 Client/src/Pages/Details/index.jsx | 90 +++++++++++++++++++++++++++++-
 1 file changed, 88 insertions(+), 2 deletions(-)

diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx
index 3cf527ac1..59b47a5af 100644
--- a/Client/src/Pages/Details/index.jsx
+++ b/Client/src/Pages/Details/index.jsx
@@ -1,6 +1,10 @@
+import React from 'react';
 import CustomizedTables from '../../Components/CustomizedTables';
+import { Box, Typography, useTheme } from '@mui/material';
 
 const DetailsPage = () => {
+  const theme = useTheme();
+
   const monitorData = {
     "_id": "66863aa2437936b46e225d1f",
     "userId": "66863a8f437936b46e225d1a",
@@ -40,10 +44,92 @@ const DetailsPage = () => {
     ]
   };
 
+  const calculateUptimeDuration = (checks) => {
+    if (!checks || checks.length === 0) {
+      return 'N/A'; 
+    }
+
+    checks.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+
+    const mostRecentCheck = checks[0];
+    const currentTime = new Date();
+    const lastCheckedTime = new Date(mostRecentCheck.createdAt);
+    let uptimeDuration = currentTime - lastCheckedTime;
+
+    let uptimeHours = Math.floor(uptimeDuration / (1000 * 60 * 60));
+    uptimeDuration %= (1000 * 60 * 60);
+    let uptimeMinutes = Math.floor(uptimeDuration / (1000 * 60));
+    uptimeDuration %= (1000 * 60);
+    let uptimeSeconds = Math.floor(uptimeDuration / 1000);
+
+    return `${uptimeHours}h ${uptimeMinutes}m ${uptimeSeconds}s`;
+  };
+
+  const getLastCheckedTimestamp = (checks) => {
+    if (!checks || checks.length === 0) {
+      return 'N/A';
+    }
+
+    checks.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+
+    const mostRecentCheck = checks[0];
+    return new Date(mostRecentCheck.createdAt).toLocaleString();
+  };
+
+  const countIncidents = (checks) => {
+    if (!checks || checks.length === 0) {
+      return 0;
+    }
+
+    const incidentCount = checks.filter(check => !check.status).length;
+    return incidentCount;
+  };
+
   return (
-    <div>
+    <Box>
       <CustomizedTables monitor={monitorData} />
-    </div>
+
+      <Typography
+        variant="body1"
+        sx={{
+          fontFamily: 'Roboto',
+          fontWeight: 600,
+          fontSize: '13px',
+          lineHeight: '20px',
+          color: '#344054',
+          marginTop: theme.spacing(2),
+        }}
+      >
+        Up for: {calculateUptimeDuration(monitorData.checks)}
+      </Typography>
+
+      <Typography
+        variant="body2"
+        sx={{
+          fontFamily: 'Roboto',
+          fontWeight: 400,
+          fontSize: '16px',
+          lineHeight: '24px',
+          color: '#1570EF',
+          marginBottom: theme.spacing(1),
+        }}
+      >
+        Last checked: {getLastCheckedTimestamp(monitorData.checks)}
+      </Typography>
+
+      <Typography
+        variant="body1"
+        sx={{
+          fontFamily: 'Roboto',
+          fontWeight: 600,
+          fontSize: '13px',
+          lineHeight: '20px',
+          color: '#344054',
+        }}
+      >
+        Incidents: {countIncidents(monitorData.checks)}
+      </Typography>
+    </Box>
   );
 };