Resolved conflict

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

@@ -0,0 +1,23 @@
+import React from "react";
+import "./barChart.css";
+import PropTypes from "prop-types";
+
+const BarChart = ({ checks = [] }) => {
+  return (
+    <div className="bar-chart">
+      {checks.map((value, index) => (
+        <div
+          key={index}
+          className={`bar ${value.status ? "green" : "red"}`}
+          style={{ height: `${value.responseTime / 3}%` }}
+        />
+      ))}
+    </div>
+  );
+};
+
+BarChart.propTypes = {
+  checks: PropTypes.array,
+};
+
+export default BarChart;

Client/src/Components/Charts/BarChart/barChart.css

@@ -0,0 +1,20 @@
+.bar-chart {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  height: 50px;
+  width: 300px;
+}
+
+.bar {
+  width: 7%;
+  transition: height 0.3s ease;
+}
+
+.green {
+  background-color: var(--env-var-color-23);
+}
+
+.red {
+  background-color: var(--env-var-color-24);
+}

Client/src/Components/Charts/Servers/serverStatus.css

@@ -12,7 +12,7 @@
 }
 
 .server-status-tile {
-  width: 230px;
+  width: 310px;
   padding: var(--spacing-general-1);
   border: 1px solid var(--color-border-0);
   border-radius: var(--border-radius-0);

Client/src/Components/ConfigBox/index.css

@@ -0,0 +1,24 @@
+.config-box {
+  display: flex;
+  padding: 30px 40px;
+  border: 1px solid var(--env-var-color-16);
+  border-radius: var(--env-var-radius-1);
+  justify-content: space-between;
+  padding-bottom: 50px;
+}
+
+.config-box-desc {
+  width: 35%;
+}
+
+.config-box-desc-title {
+  color: var(--env-var-color-5);
+  font-size: var(--env-var-font-size-large);
+  font-weight: 700;
+  margin-bottom: var(--env-var-spacing-1);
+}
+
+.config-box-desc-text {
+  color: var(--env-var-color-5);
+  font-size: var(--env-var-font-size-medium);
+}

Client/src/Components/ConfigBox/index.jsx

@@ -0,0 +1,13 @@
+import "./index.css";
+import React from "react";
+
+const ConfigBox = ({ leftLayout, rightLayout }) => {
+  return (
+    <div className="config-box">
+      {leftLayout}
+      {rightLayout}
+    </div>
+  );
+};
+
+export default ConfigBox;

Client/src/Components/CurrentMonitors/index.css

@@ -8,8 +8,110 @@
   display: flex;
 }
 
+.current-monitors-bar {
+  display: flex;
+  justify-content: space-between;
+}
+
 .current-monitors-title {
   font-size: 1rem;
   font-weight: bold;
-  margin-right: var();
+  margin-right: var(--env-var-spacing-1);
+}
+
+.current-monitors-counter {
+  width: var(--env-var-spacing-2);
+  height: var(--env-var-spacing-2);
+  background-color: var(--env-var-color-15);
+  border: 1px solid var(--env-var-color-6);
+  border-radius: 50%;
+  text-align: center;
+  align-items: center;
+}
+
+.monitors-v-gaping {
+  height: var(--env-var-spacing-3);
+}
+
+.current-monitors-table {
+  width: 100%;
+  text-align: left;
+}
+
+.current-monitors-table {
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+  border: 1px solid var(--env-var-color-16);
+  border-radius: var(--env-var-radius-1);
+}
+
+.current-monitors-table th,
+.current-monitors-table td {
+  border: 1px solid var(--env-var-color-16);
+  border-left: none;
+  border-right: none;
+  padding: 8px;
+}
+
+.theader-row {
+  background-color: var(--env-var-color-13);
+  color: var(--env-var-color-2);
+  font-weight: 500;
+}
+
+.theader-row td {
+  padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
+  font-size: var(--env-var-font-size-medium);
+}
+
+.host-list-item {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.host-list-item-open {
+  width: var(--env-var-img-width-2);
+  height: var(--env-var-img-width-2);
+  margin-right: 8px;
+}
+
+.host-list-item-name {
+  font-size: var(--env-var-font-size-medium);
+  font-weight: bold;
+  margin-right: var(--env-var-spacing-1);
+}
+
+.host-list-item-precentage {
+  font-size: var(--env-var-font-size-medium);
+}
+
+.tbody-row td {
+  padding: var(--env-var-spacing-2) var(--env-var-img-width-2);
+}
+
+.host-status-box {
+  display: flex;
+  width: fit-content;
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-2);
+  align-items: center;
+  padding: calc(var(--env-var-spacing-1) / 2);
+}
+
+.host-status-box-circle {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: calc(var(--env-var-spacing-1) / 2);
+}
+
+.host-actions {
+  margin: auto;
+  cursor: pointer;
+}
+
+.tbody-row-cell.actions-cell {
+  padding-left: 30px;
 }

Client/src/Components/CurrentMonitors/index.jsx

@@ -1,7 +1,10 @@
+import SearchTextField from "../TextFields/Search/SearchTextField";
 import "./index.css";
 import React from "react";
+import HostsTable from "../HostsTable";
+import Pagination from "../Pagination";
 
-const CurrentMonitors = () => {
+const CurrentMonitors = ({ monitors }) => {
   return (
     <div className="current-monitors">
       <div className="current-monitors-bar">
@@ -9,8 +12,14 @@ const CurrentMonitors = () => {
           <div className="current-monitors-title">Current monitors</div>
           <div className="current-monitors-counter">5</div>
         </div>
-        <div className="current-monitors-search-bar"></div>
+        <div className="current-monitors-search-bar">
+          <SearchTextField />
+        </div>
       </div>
+      <div className="monitors-v-gaping"></div>
+      <HostsTable monitors={monitors} />
+      <div className="monitors-v-gaping"></div>
+      <Pagination />
     </div>
   );
 };

Client/src/Components/DashboardSettingsIcon/index.css

@@ -0,0 +1,13 @@
+#dashboard-setting-menu-item {
+  width: 135px;
+  padding: 6px;
+  margin: 5px 12px;
+}
+
+#dashboard-setting-menu-item:hover {
+  color: var(--env-var-color-26);
+}
+
+#menu-appbar {
+  padding: var(--env-var-spacing-1);
+}

Client/src/Components/DashboardSettingsIcon/index.jsx

@@ -1,15 +1,22 @@
-import { useState } from 'react';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import Tooltip from '@mui/material/Tooltip';
-import MenuItem from '@mui/material/MenuItem';
-import Typography from '@mui/material/Typography';
-import SvgIcon from '@mui/material/SvgIcon';
-import SettingsIcon from '@mui/icons-material/Settings';
-import { useTheme } from '@mui/material/styles';
+import "./index.css";
+import { useState } from "react";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import Tooltip from "@mui/material/Tooltip";
+import MenuItem from "@mui/material/MenuItem";
+import Typography from "@mui/material/Typography";
+import SvgIcon from "@mui/material/SvgIcon";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { useTheme } from "@mui/material/styles";
 
-const settings = ['Open Site', 'Detailed View', 'Incidents', 'Configure', 'Remove'];
+const settings = [
+  "Open Site",
+  "Detailed View",
+  "Incidents",
+  "Configure",
+  "Remove",
+];
 
 /**
  * DashboardSettings component
@@ -54,20 +61,29 @@ function DashboardSettings() {
         id="menu-appbar"
         anchorEl={anchorElUser}
         anchorOrigin={{
-          vertical: 'top',
-          horizontal: 'right',
+          vertical: "top",
+          horizontal: "right",
         }}
         keepMounted
         transformOrigin={{
-          vertical: 'top',
-          horizontal: 'right',
+          vertical: "top",
+          horizontal: "right",
         }}
         open={Boolean(anchorElUser)}
         onClose={handleCloseUserMenu}
       >
         {settings.map((setting) => (
-          <MenuItem key={setting} onClick={handleCloseUserMenu}>
-            <Typography textAlign="center">{setting}</Typography>
+          <MenuItem
+            id="dashboard-setting-menu-item"
+            key={setting}
+            onClick={handleCloseUserMenu}
+          >
+            <Typography
+              style={{ fontSize: "var(--env-var-font-size-medium)" }}
+              textAlign="center"
+            >
+              {setting}
+            </Typography>
           </MenuItem>
         ))}
       </Menu>

Client/src/Components/Host/index.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import OpenIt from "../../assets/Images/Icon-open-in-tab-gray.png";
+
+function Host(title, precentage, statusColor, link) {
+  return (
+    <div className="host-list-item">
+      <a href={link} target="_blank">
+        <img className="host-list-item-open" src={OpenIt} alt="OpenIt" />
+      </a>
+      <div className="host-list-item-name">{title}</div>
+      <div className="host-list-item-precentage" style={{ color: statusColor }}>
+        {precentage}%
+      </div>
+    </div>
+  );
+}
+
+export default Host;

Client/src/Components/HostActions/index.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import DashboardSettings from "../DashboardSettingsIcon";
+
+function HostActions() {
+  return <DashboardSettings />;
+}
+
+export default HostActions;

Client/src/Components/HostStatus/index.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+function HostStatus(backgroundColor, status, dotColor) {
+  return (
+    <div
+      className="host-status-box"
+      style={{ backgroundColor: backgroundColor }}
+    >
+      <div
+        className="host-status-box-circle"
+        style={{ backgroundColor: dotColor }}
+      ></div>
+      <div className="host-status-box-text">{status}</div>
+    </div>
+  );
+}
+
+export default HostStatus;

Client/src/Components/HostsTable/index.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+const HostsTable = ({ monitors }) => {
+  return (
+    <div className="current-monitors-table-holder">
+      <table className="current-monitors-table">
+        <thead>
+          <tr className="theader-row">
+            <td className="theader-row-cell">Host</td>
+            <td className="theader-row-cell">Status</td>
+            <td className="theader-row-cell">Team</td>
+            <td className="theader-row-cell">Actions</td>
+          </tr>
+        </thead>
+        <tbody>
+          {monitors.map((monitor, index) => (
+            <tr className="tbody-row" key={index}>
+              <td className="tbody-row-cell">{monitor.host}</td>
+              <td className="tbody-row-cell">{monitor.status}</td>
+              <td className="tbody-row-cell">{monitor.team}</td>
+              <td className="tbody-row-cell actions-cell">{monitor.actions}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default HostsTable;

Client/src/Components/Pagination/index.css

@@ -0,0 +1,33 @@
+.pagination-holder {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.MuiPagination-root {
+  .MuiPagination-ul {
+    flex-wrap: nowrap;
+    li {
+      &:first-child {
+        flex-basis: 100%;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        > button::after {
+          margin-left: 10px;
+          content: "previous";
+        }
+      }
+      &:last-child {
+        flex-basis: 100%;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        > button::before {
+          margin-right: 10px;
+          content: "next";
+        }
+      }
+    }
+  }
+}

Client/src/Components/Pagination/index.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Pagination as MuiPagination } from "@mui/material";
+import "./index.css";
+
+const Pagination = () => {
+  return (
+    <div className="pagination-holder">
+      <MuiPagination count={10} variant="outlined" shape="rounded" />
+    </div>
+  );
+};
+
+export default Pagination;

Client/src/Components/RadioButton/index.jsx

@@ -0,0 +1,52 @@
+/**
+ * RadioButton component.
+ *
+ * @component
+ * @example
+ * // Usage:
+ * <RadioButton
+ *   title="Radio Button Title"
+ *   desc="Radio Button Description"
+ *   size="small"
+ * />
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.title - The title of the radio button.
+ * @param {string} [props.desc] - The description of the radio button.
+ * @param {string} [props.size="small"] - The size of the radio button.
+ * @returns {JSX.Element} - The rendered RadioButton component.
+ */
+
+import { FormControlLabel, Radio } from "@mui/material";
+import React from "react";
+import PropTypes from "prop-types";
+
+function RadioButton(props) {
+  return (
+    <div className="custom-radio-button">
+      <FormControlLabel
+        value="check"
+        control={<Radio size={props.size} />}
+        label={
+          <div>
+            <div className="service-check-list-title">{props.title}</div>
+            <div className="service-check-list-desc">{props.desc}</div>
+          </div>
+        }
+        labelPlacement="end"
+      />
+    </div>
+  );
+}
+
+RadioButton.propTypes = {
+  title: PropTypes.string.isRequired,
+  desc: PropTypes.string,
+  size: PropTypes.string,
+};
+
+RadioButton.defaultProps = {
+  size: "small",
+};
+
+export default RadioButton;

Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx

@@ -0,0 +1,17 @@
+import "./flexibileTextField.css";
+import React from "react";
+
+const FlexibileTextField = ({ title, type, placeholder }) => {
+  return (
+    <div className="flexibile-textfield">
+      <div className="flexibile-textfield-title">{title}</div>
+      <input
+        type={type}
+        className="flexibile-textfield-input"
+        placeholder={placeholder}
+      />
+    </div>
+  );
+};
+
+export default FlexibileTextField;

Client/src/Components/TextFields/Flexibile/flexibileTextField.css

@@ -0,0 +1,22 @@
+.flexibile-textfield-title {
+  color: var(--env-var-color-5);
+  font-size: var(--env-var-font-size-medium);
+}
+
+.flexibile-textfield-input {
+  width: 292.8px;
+  height: 6.8px;
+  padding: var(--env-var-spacing-1);
+  margin-top: 10px;
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-1);
+}
+
+.flexibile-textfield-input:focus {
+  outline: none;
+}
+
+.flexibile-textfield-input::placeholder {
+  color: var(--env-var-color-25);
+  font-size: var(--env-var-font-size-medium);
+}

Client/src/Components/TextFields/Search/SearchTextField.jsx

@@ -0,0 +1,14 @@
+import "./searchTextField.css";
+import React from "react";
+import Search from "../../../assets/Images/Icon-search-gray.png";
+
+const SearchTextField = () => {
+  return (
+    <div className="search-field-holder">
+      <img className="search-field-icon" src={Search} alt="Search" />
+      <input className="search-field" type="text" placeholder="Search" />
+    </div>
+  );
+};
+
+export default SearchTextField;

Client/src/Components/TextFields/Search/searchTextField.css

@@ -0,0 +1,26 @@
+.search-field-holder {
+  display: flex;
+  align-items: center;
+  width: 180px;
+  height: 9px;
+  padding: var(--env-var-spacing-1);
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-1);
+}
+
+.search-field-icon {
+  width: var(--env-var-img-width-2);
+  height: var(--env-var-img-width-2);
+  margin-right: calc(var(--env-var-img-width-2) / 2);
+}
+
+.search-field {
+  width: 150px;
+  border: none;
+  outline: none;
+  font-size: var(--env-var-font-size-medium);
+}
+
+.search-field::placeholder {
+  color: var(--env-var-color-14);
+}