From e5b347e14b18f7a0baad93347da6e9d52b8fdc99 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 2 Sep 2024 18:46:51 -0400
Subject: [PATCH] Revamped chart cards 1/2

---
 Client/src/Pages/Monitors/Details/index.css   |   7 -
 Client/src/Pages/Monitors/Details/index.jsx   | 122 +++++++++++++++---
 Client/src/Pages/Monitors/Details/styled.jsx  |  61 +++++++++
 .../assets/icons/average-response-icon.svg    |   3 +
 .../src/assets/icons/response-time-icon.svg   |   3 +
 Client/src/assets/icons/uptime-icon.svg       |   3 +
 6 files changed, 171 insertions(+), 28 deletions(-)
 create mode 100644 Client/src/Pages/Monitors/Details/styled.jsx
 create mode 100644 Client/src/assets/icons/average-response-icon.svg
 create mode 100644 Client/src/assets/icons/response-time-icon.svg
 create mode 100644 Client/src/assets/icons/uptime-icon.svg

diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css
index 108f09b21..528ec1b92 100644
--- a/Client/src/Pages/Monitors/Details/index.css
+++ b/Client/src/Pages/Monitors/Details/index.css
@@ -1,10 +1,3 @@
-.monitor-details h2.MuiTypography-root {
-  font-size: var(--env-var-font-size-large);
-}
-.monitor-details button.MuiButtonBase-root {
-  height: var(--env-var-height-2);
-  line-height: 1;
-}
 .monitor-details p.MuiTypography-root,
 .monitor-details p.MuiTypography-root span.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 922231036..20979d863 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -23,10 +23,15 @@ import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAr
 import ButtonGroup from "@mui/material/ButtonGroup";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import CertificateIcon from "../../../assets/icons/certificate.svg?react";
+import UptimeIcon from "../../../assets/icons/uptime-icon.svg?react";
+import ResponseTimeIcon from "../../../assets/icons/response-time-icon.svg?react";
+import AverageResponseIcon from "../../../assets/icons/average-response-icon.svg?react";
+import IncidentsIcon from "../../../assets/icons/incidents.svg?react";
 import PaginationTable from "./PaginationTable";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import "./index.css";
+import { ChartBox, IconBox } from "./styled";
 
 const StatBox = ({ title, value }) => {
   const theme = useTheme();
@@ -228,7 +233,7 @@ const DetailsPage = ({ isAdmin }) => {
               { name: "details", path: `/monitors/${monitorId}` },
             ]}
           />
-          <Stack gap={theme.spacing(12)} mt={theme.spacing(10)}>
+          <Stack gap={theme.spacing(16)} mt={theme.spacing(10)}>
             <Stack direction="row" gap={theme.spacing(2)}>
               <Box>
                 <Typography
@@ -307,33 +312,15 @@ const DetailsPage = ({ isAdmin }) => {
                   alignSelf: "flex-end",
                 }}
               >
-                <Box
-                  height="100%"
-                  position="relative"
-                  minWidth={34}
-                  border={1}
-                  borderColor={theme.palette.border.dark}
-                  borderRadius={theme.shape.borderRadius}
-                  backgroundColor={theme.palette.background.accent}
+                <IconBox
                   mr={theme.spacing(4)}
                   onClick={openCertificate}
                   sx={{
                     cursor: "pointer",
-                    "& svg": {
-                      position: "absolute",
-                      top: "50%",
-                      left: "50%",
-                      transform: "translate(-50%, -50%)",
-                      width: 20,
-                      height: 20,
-                      "& path": {
-                        stroke: theme.palette.text.tertiary,
-                      },
-                    },
                   }}
                 >
                   <CertificateIcon />
-                </Box>
+                </IconBox>
                 <Popover
                   id="certificate-dropdown"
                   anchorEl={anchorEl}
@@ -389,6 +376,99 @@ const DetailsPage = ({ isAdmin }) => {
                 )}
               </Stack>
             </Stack>
+            <Box>
+              <Stack
+                direction="row"
+                alignItems="center"
+                gap={theme.spacing(4)}
+                mb={theme.spacing(10)}
+              >
+                <ButtonGroup sx={{ height: 30 }}>
+                  <Button
+                    variant="group"
+                    filled={(dateRange === "day").toString()}
+                    onClick={() => setDateRange("day")}
+                  >
+                    Day
+                  </Button>
+                  <Button
+                    variant="group"
+                    filled={(dateRange === "week").toString()}
+                    onClick={() => setDateRange("week")}
+                  >
+                    Week
+                  </Button>
+                  <Button
+                    variant="group"
+                    filled={(dateRange === "month").toString()}
+                    onClick={() => setDateRange("month")}
+                  >
+                    Month
+                  </Button>
+                </ButtonGroup>
+                <Typography color={theme.palette.text.tertiary}>
+                  Showing statistics for past{" "}
+                  {dateRange === "day"
+                    ? "24 hours"
+                    : dateRange === "week"
+                    ? "7 days"
+                    : "30 days"}
+                  .
+                </Typography>
+              </Stack>
+              <Stack direction="row" flexWrap="wrap" gap={theme.spacing(8)}>
+                <ChartBox>
+                  <Stack>
+                    <IconBox>
+                      <UptimeIcon />
+                    </IconBox>
+                    <Typography component="h2">Uptime</Typography>
+                  </Stack>
+                  <Stack justifyContent="space-between" mt={theme.spacing(8)}>
+                    <Box>
+                      <Typography>Total Checks</Typography>
+                      <Typography component="span">87</Typography>
+                    </Box>
+                    <Box>
+                      <Typography>Uptime Percentage</Typography>
+                      <Typography component="span">
+                        98.3<Typography component="span">%</Typography>
+                      </Typography>
+                    </Box>
+                  </Stack>
+                </ChartBox>
+                <ChartBox>
+                  <Stack>
+                    <IconBox>
+                      <IncidentsIcon />
+                    </IconBox>
+                    <Typography component="h2">Incidents</Typography>
+                  </Stack>
+                  <Box>
+                    <Typography>Total Incidents</Typography>
+                    <Typography component="span">0</Typography>
+                  </Box>
+                </ChartBox>
+                <ChartBox>
+                  <Stack>
+                    <IconBox>
+                      <AverageResponseIcon />
+                    </IconBox>
+                    <Typography component="h2">
+                      Average response time
+                    </Typography>
+                  </Stack>
+                </ChartBox>
+                <ChartBox>
+                  <Stack>
+                    <IconBox>
+                      <ResponseTimeIcon />
+                    </IconBox>
+                    <Typography component="h2">Response Times</Typography>
+                  </Stack>
+                </ChartBox>
+              </Stack>
+            </Box>
             <Stack
               direction="row"
               justifyContent="space-between"
diff --git a/Client/src/Pages/Monitors/Details/styled.jsx b/Client/src/Pages/Monitors/Details/styled.jsx
new file mode 100644
index 000000000..a5bec8f39
--- /dev/null
+++ b/Client/src/Pages/Monitors/Details/styled.jsx
@@ -0,0 +1,61 @@
+import { Box, styled } from "@mui/material";
+
+export const ChartBox = styled(Box)(({ theme }) => ({
+  flex: "1 30%",
+  height: 300,
+  minWidth: 250,
+  padding: theme.spacing(8),
+  border: 1,
+  borderStyle: "solid",
+  borderColor: theme.palette.border.light,
+  borderRadius: 4,
+  backgroundColor: theme.palette.background.main,
+  "& h2": {
+    color: theme.palette.text.secondary,
+    fontSize: 15,
+  },
+  "& p": {
+    color: theme.palette.text.tertiary,
+    fontSize: 13,
+  },
+  "& span": {
+    color: theme.palette.text.primary,
+    fontSize: 20,
+    "& span": {
+      opacity: 0.8,
+      marginLeft: 2,
+      fontSize: 15,
+    },
+  },
+  "& .MuiStack-root": {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing(6),
+  },
+  "& > .MuiBox-root:not(:first-of-type)": {
+    marginTop: theme.spacing(8),
+  },
+}));
+
+export const IconBox = styled(Box)(({ theme }) => ({
+  height: 34,
+  minWidth: 34,
+  width: 34,
+  position: "relative",
+  border: 1,
+  borderStyle: "solid",
+  borderColor: theme.palette.border.dark,
+  borderRadius: 4,
+  backgroundColor: theme.palette.background.accent,
+  "& svg": {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 20,
+    height: 20,
+    "& path": {
+      stroke: theme.palette.text.tertiary,
+    },
+  },
+}));
diff --git a/Client/src/assets/icons/average-response-icon.svg b/Client/src/assets/icons/average-response-icon.svg
new file mode 100644
index 000000000..572e2002f
--- /dev/null
+++ b/Client/src/assets/icons/average-response-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 20V13M12 20V10M4 20L4 16M13.4067 5.0275L18.5751 6.96567M10.7988 5.40092L5.20023 9.59983M21.0607 6.43934C21.6464 7.02513 21.6464 7.97487 21.0607 8.56066C20.4749 9.14645 19.5251 9.14645 18.9393 8.56066C18.3536 7.97487 18.3536 7.02513 18.9393 6.43934C19.5251 5.85355 20.4749 5.85355 21.0607 6.43934ZM5.06066 9.43934C5.64645 10.0251 5.64645 10.9749 5.06066 11.5607C4.47487 12.1464 3.52513 12.1464 2.93934 11.5607C2.35355 10.9749 2.35355 10.0251 2.93934 9.43934C3.52513 8.85355 4.47487 8.85355 5.06066 9.43934ZM13.0607 3.43934C13.6464 4.02513 13.6464 4.97487 13.0607 5.56066C12.4749 6.14645 11.5251 6.14645 10.9393 5.56066C10.3536 4.97487 10.3536 4.02513 10.9393 3.43934C11.5251 2.85355 12.4749 2.85355 13.0607 3.43934Z" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/icons/response-time-icon.svg b/Client/src/assets/icons/response-time-icon.svg
new file mode 100644
index 000000000..db5b2af38
--- /dev/null
+++ b/Client/src/assets/icons/response-time-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 7L14.1314 14.8686C13.7354 15.2646 13.5373 15.4627 13.309 15.5368C13.1082 15.6021 12.8918 15.6021 12.691 15.5368C12.4627 15.4627 12.2646 15.2646 11.8686 14.8686L9.13137 12.1314C8.73535 11.7354 8.53735 11.5373 8.30902 11.4632C8.10817 11.3979 7.89183 11.3979 7.69098 11.4632C7.46265 11.5373 7.26465 11.7354 6.86863 12.1314L2 17M22 7H15M22 7V14" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/icons/uptime-icon.svg b/Client/src/assets/icons/uptime-icon.svg
new file mode 100644
index 000000000..55706ae71
--- /dev/null
+++ b/Client/src/assets/icons/uptime-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 7H4.6C4.03995 7 3.75992 7 3.54601 7.10899C3.35785 7.20487 3.20487 7.35785 3.10899 7.54601C3 7.75992 3 8.03995 3 8.6V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H9M9 21H15M9 21L9 4.6C9 4.03995 9 3.75992 9.10899 3.54601C9.20487 3.35785 9.35785 3.20487 9.54601 3.10899C9.75992 3 10.0399 3 10.6 3L13.4 3C13.9601 3 14.2401 3 14.454 3.10899C14.6422 3.20487 14.7951 3.35785 14.891 3.54601C15 3.75992 15 4.03995 15 4.6V21M15 11H19.4C19.9601 11 20.2401 11 20.454 11.109C20.6422 11.2049 20.7951 11.3578 20.891 11.546C21 11.7599 21 12.0399 21 12.6V19.4C21 19.9601 21 20.2401 20.891 20.454C20.7951 20.6422 20.6422 20.7951 20.454 20.891C20.2401 21 19.9601 21 19.4 21H15" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>