Implemented basic bar chart

Client/src/Components/Animated/PulseDot.jsx

@@ -23,8 +23,8 @@ const PulseDot = ({ color }) => {
       justifyContent="center"
     >
       <Box
-        minWidth="16px"
-        minHeight="16px"
+        minWidth="18px"
+        minHeight="18px"
         sx={{
           position: "relative",
           backgroundColor: color,

Client/src/Components/BasicTable/index.css

@@ -128,6 +128,7 @@
 .MuiTablePagination-root p {
   color: var(--env-var-color-2);
   font-weight: 500;
+  font-size: var(--env-var-font-size-small-plus);
 }
 .MuiTablePagination-root button,
 .MuiTablePagination-root .MuiSelect-select {

Client/src/Components/Charts/BarChart/index.jsx

@@ -0,0 +1,40 @@
+import { useTheme } from "@emotion/react";
+import { Box, Stack } from "@mui/material";
+
+const BarChart = ({ checks = [] }) => {
+  const theme = useTheme();
+
+  return (
+    <Stack direction="row" flexWrap="nowrap" gap={theme.gap.xs} height="50px">
+      {checks.map((check) => (
+        <Box
+          key={`check-${check?._id}`}
+          position="relative"
+          width="8px"
+          height="100%"
+          backgroundColor="#f4f4f4"
+          sx={{
+            borderRadius: theme.gap.xs,
+          }}
+        >
+          <Box
+            position="absolute"
+            bottom={0}
+            width="100%"
+            height={`${check.responseTime}%`}
+            backgroundColor={
+              check.status === true
+                ? "var(--env-var-color-23)"
+                : "var(--env-var-color-24)"
+            }
+            sx={{
+              borderRadius: theme.gap.xs,
+            }}
+          />
+        </Box>
+      ))}
+    </Stack>
+  );
+};
+
+export default BarChart;

Client/src/Components/Sidebar/index.jsx

@@ -310,7 +310,7 @@ function Sidebar() {
                         gap: theme.gap.small,
                         borderRadius: `${theme.shape.borderRadius}px`,
                         pl: theme.gap.small,
-                        mb:"1px"
+                        mb: "1px",
                       }}
                     >
                       {child.icon}