From a0f1b5bee8b5e16412bf7593ca1ffbac66a02a9f Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 17:03:19 -0400
Subject: [PATCH 1/7] Small styling changes

---
 Client/src/Components/BasicTable/index.css           |  5 +++--
 Client/src/Components/BasicTable/index.jsx           |  4 ++--
 Client/src/Components/Sidebar/index.css              | 12 ++++++------
 .../Components/TabPanels/Account/ProfilePanel.jsx    |  6 +++---
 Client/src/Pages/Account/index.jsx                   |  7 +++----
 Client/src/Pages/Monitors/index.css                  |  2 --
 Client/src/Pages/Monitors/index.jsx                  |  5 +++--
 7 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 821726cf4..f64a9b5cc 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -148,7 +148,7 @@
   height: 22px;
 }
 .MuiTablePagination-root svg path {
-  stroke: var(--env-var-color-5);
+  stroke: var(--env-var-color-2);
   stroke-width: 1.3;
 }
 .MuiTablePagination-root .MuiSelect-icon {
@@ -175,7 +175,8 @@
   padding: 4px;
   min-width: 100px;
 }
-.pagination-dropdown li {
+.pagination-dropdown li,
+body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-2);
   padding: 4px;
diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index b9bbb795e..435ce77bd 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -211,7 +211,7 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
           </TableBody>
         </Table>
       </TableContainer>
-      <Stack direction="row" alignItems="center" justifyContent="space-between">
+      {paginated && <Stack direction="row" alignItems="center" justifyContent="space-between">
         <Typography sx={{ opacity: 0.7 }}>
           Showing {getRange()} of {data.rows.length} monitor(s)
         </Typography>
@@ -254,7 +254,7 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
           }}
           sx={{ mt: theme.gap.medium }}
         />
-      </Stack>
+      </Stack>}
     </>
   );
 };
diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 59924b1a1..10cdfc77d 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -58,7 +58,7 @@ aside
   height: 100%;
   width: 100%;
   border-left: solid 1px var(--env-var-color-5);
-  opacity: 0.3;
+  opacity: 0.2;
 }
 aside
   .MuiCollapse-wrapperInner
@@ -75,13 +75,13 @@ aside .MuiList-root .MuiListItemText-root + svg {
 aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after {
   content: "";
   position: absolute;
-  left: -7px;
+  left: -8px;
   top: 50%;
-  height: 1px;
-  width: 6px;
+  transform: translateY(-50%);
+  height: 3px;
+  width: 3px;
   border-radius: 50%;
-  background-color: var(--env-var-color-5);
-  opacity: 0.3;
+  background-color: #d6d9dd;
 }
 
 aside {
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 398c10c54..e42d9f20f 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -322,13 +322,13 @@ const ProfilePanel = () => {
       <Divider aria-hidden="true" />
       <form className="delete-profile-form" noValidate spellCheck="false">
         <div className="delete-profile-form__wrapper">
-          <Stack direction="column" gap="15px">
+          <Stack direction="column" gap="8px">
             <Typography component="h1">Delete account</Typography>
             <Typography component="p">
               Note that deleting your account will remove all data from our
               system. This is permanent and non-recoverable.
             </Typography>
-            <Box sx={{ mt: theme.spacing(1) }}>
+            <Box sx={{ mt: theme.spacing(2) }}>
               <Button
                 level="error"
                 label="Delete account"
@@ -399,7 +399,7 @@ const ProfilePanel = () => {
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            width: 400,
+            width: 450,
             bgcolor: "white",
             border: "solid 1px #f2f2f2",
             borderRadius: `${theme.shape.borderRadius}px`,
diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx
index 700e8c6e8..2fed926b8 100644
--- a/Client/src/Pages/Account/index.jsx
+++ b/Client/src/Pages/Account/index.jsx
@@ -1,14 +1,13 @@
 import PropTypes from "prop-types";
-import { useState } from "react";
+import { useNavigate } from "react-router";
+import { useSelector } from "react-redux";
 import { Box, Tab, useTheme } from "@mui/material";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
-import "./index.css";
 import ProfilePanel from "../../Components/TabPanels/Account/ProfilePanel";
 import PasswordPanel from "../../Components/TabPanels/Account/PasswordPanel";
 import TeamPanel from "../../Components/TabPanels/Account/TeamPanel";
-import { useNavigate } from "react-router";
-import { useSelector } from "react-redux";
+import "./index.css";
 
 /**
  * Account component renders a settings page with tabs for Profile, Password, and Team settings.
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index 7b40f7464..1f46b3517 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -11,8 +11,6 @@
 }
 .monitors p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
-}
-.monitors p.MuiTypography-root {
   color: var(--env-var-color-5);
 }
 .monitors .MuiStack-root > button:not(.MuiIconButton-root) {
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 0aae47984..7857aaefa 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -376,7 +376,7 @@ const Monitors = () => {
   let loading = monitorState.isLoading && monitorState.monitors.length === 0;
 
   return (
-    <Stack className="monitors" pt={theme.gap.xl} gap={theme.gap.large}>
+    <Stack className="monitors" gap={theme.gap.large}>
       {loading ? (
         <SkeletonLayout />
       ) : (
@@ -395,10 +395,11 @@ const Monitors = () => {
             {monitorState.monitors?.length !== 0 && (
               <Button
                 level="primary"
-                label="Create new monitor"
+                label="Create monitor"
                 onClick={() => {
                   navigate("/monitors/create");
                 }}
+                sx={{ fontWeight: 500 }}
               />
             )}
           </Stack>

From 6c0d8586226cc669a594c753b9b4cbc2534df64c Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 17:10:03 -0400
Subject: [PATCH 2/7] Created ui slice

---
 Client/src/Features/UI/uiSlice.js | 22 ++++++++++++++++++++++
 Client/src/store.js               |  4 +++-
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 Client/src/Features/UI/uiSlice.js

diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
new file mode 100644
index 000000000..bbee3082b
--- /dev/null
+++ b/Client/src/Features/UI/uiSlice.js
@@ -0,0 +1,22 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  table: {
+    rowsPerPage: 5,
+  },
+  sidebar: {
+    collapsed: false,
+  },
+};
+
+const uiSlice = createSlice({
+  name: "ui",
+  initialState,
+  reducers: {
+    setRowsPerPage: (state, action) => {},
+    setCollapsed: (state, action) => {},
+  },
+});
+
+export default uiSlice.reducer;
+export const { setRowsPerPage, setCollapsed } = uiSlice.actions;
diff --git a/Client/src/store.js b/Client/src/store.js
index 27141202d..a11fdf409 100644
--- a/Client/src/store.js
+++ b/Client/src/store.js
@@ -3,6 +3,7 @@ import { configureStore, combineReducers } from "@reduxjs/toolkit";
 import uptimeMonitorsReducer from "./Features/UptimeMonitors/uptimeMonitorsSlice";
 import pageSpeedMonitorReducer from "./Features/PageSpeedMonitor/pageSpeedMonitorSlice";
 import authReducer from "./Features/Auth/authSlice";
+import uiReducer from "./Features/UI/uiSlice";
 import storage from "redux-persist/lib/storage";
 import { persistReducer, persistStore, createTransform } from "redux-persist";
 
@@ -14,7 +15,7 @@ const authTransform = createTransform(
   // No transformation on rehydration
   null,
   // Only applies to auth
-  { whitelist: ["auth"] }
+  { whitelist: ["auth", "ui"] }
 );
 
 const persistConfig = {
@@ -28,6 +29,7 @@ const rootReducer = combineReducers({
   uptimeMonitors: uptimeMonitorsReducer,
   auth: authReducer,
   pageSpeedMonitors: pageSpeedMonitorReducer,
+  ui: uiReducer,
 });
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);

From c3793485815c2d82038e93dcadfde384aea92d45 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 17:18:02 -0400
Subject: [PATCH 3/7] Added toggle sidebar action

---
 Client/src/Components/Sidebar/index.jsx |  6 ++++--
 Client/src/Features/UI/uiSlice.js       | 10 +++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 38baa33ec..34221c406 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -19,6 +19,7 @@ import { useLocation, useNavigate } from "react-router";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { clearAuthState } from "../../Features/Auth/authSlice";
+import { toggleSidebar } from "../../Features/UI/uiSlice";
 import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import Avatar from "../Avatar";
 import LockSvg from "../../assets/icons/lock.svg?react";
@@ -86,8 +87,9 @@ function Sidebar() {
   const location = useLocation();
   const dispatch = useDispatch();
   const authState = useSelector((state) => state.auth);
+  const { sidebar } = useSelector((state) => state.ui);
+  let collapsed = sidebar.collapsed;
   const [open, setOpen] = useState({ Dashboard: false, Account: false });
-  const [collapsed, setCollapsed] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const [popup, setPopup] = useState();
 
@@ -157,7 +159,7 @@ function Sidebar() {
               borderColor: theme.palette.otherColors.graishWhite,
             },
           }}
-          onClick={() => setCollapsed(!collapsed)}
+          onClick={() => dispatch(toggleSidebar())}
         >
           {collapsed ? <ArrowRight /> : <ArrowLeft />}
         </IconButton>
diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
index bbee3082b..17523977a 100644
--- a/Client/src/Features/UI/uiSlice.js
+++ b/Client/src/Features/UI/uiSlice.js
@@ -13,10 +13,14 @@ const uiSlice = createSlice({
   name: "ui",
   initialState,
   reducers: {
-    setRowsPerPage: (state, action) => {},
-    setCollapsed: (state, action) => {},
+    setTablePreferences: (state, action) => {
+      state.table = { ...action };
+    },
+    toggleSidebar: (state) => {
+      state.sidebar.collapsed = !state.sidebar.collapsed;
+    },
   },
 });
 
 export default uiSlice.reducer;
-export const { setRowsPerPage, setCollapsed } = uiSlice.actions;
+export const { setTablePreferences, toggleSidebar } = uiSlice.actions;

From 1419b20591b8845de7deca59e79aa7bf5363ae45 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 17:27:07 -0400
Subject: [PATCH 4/7] Added action to change rows per page

---
 Client/src/Components/BasicTable/index.jsx | 99 ++++++++++++----------
 Client/src/Features/UI/uiSlice.js          |  6 +-
 2 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 435ce77bd..af71ee3a5 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -14,6 +14,8 @@ import {
   Typography,
   Stack,
 } from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { setRowsPerPage } from "../../Features/UI/uiSlice";
 import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
 import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
 import LeftArrow from "../../assets/icons/left-arrow.svg?react";
@@ -142,8 +144,10 @@ const TablePaginationActions = (props) => {
 
 const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
   const theme = useTheme();
+  const dispatch = useDispatch();
+  const { table } = useSelector((state) => state.ui);
+  let rowsPerPage = table.rowsPerPage;
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(rows);
 
   useEffect(() => {
     setPage(0);
@@ -154,7 +158,7 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
   };
 
   const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
+    dispatch(setRowsPerPage(parseInt(event.target.value, 10)));
     setPage(0);
   };
 
@@ -211,50 +215,59 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
           </TableBody>
         </Table>
       </TableContainer>
-      {paginated && <Stack direction="row" alignItems="center" justifyContent="space-between">
-        <Typography sx={{ opacity: 0.7 }}>
-          Showing {getRange()} of {data.rows.length} monitor(s)
-        </Typography>
-        <TablePagination
-          component="div"
-          count={data.rows.length}
-          page={page}
-          onPageChange={handleChangePage}
-          rowsPerPage={rowsPerPage}
-          rowsPerPageOptions={[5, 10, 15, 25]}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-          ActionsComponent={TablePaginationActions}
-          labelRowsPerPage="Rows per page"
-          labelDisplayedRows={({ page, count }) =>
-            `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}`
-          }
-          slotProps={{
-            select: {
-              MenuProps: {
-                keepMounted: true,
-                PaperProps: {
-                  className: "pagination-dropdown",
+      {paginated && (
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Typography sx={{ opacity: 0.7 }}>
+            Showing {getRange()} of {data.rows.length} monitor(s)
+          </Typography>
+          <TablePagination
+            component="div"
+            count={data.rows.length}
+            page={page}
+            onPageChange={handleChangePage}
+            rowsPerPage={rowsPerPage}
+            rowsPerPageOptions={[5, 10, 15, 25]}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            ActionsComponent={TablePaginationActions}
+            labelRowsPerPage="Rows per page"
+            labelDisplayedRows={({ page, count }) =>
+              `Page ${page + 1} of ${Math.max(
+                0,
+                Math.ceil(count / rowsPerPage)
+              )}`
+            }
+            slotProps={{
+              select: {
+                MenuProps: {
+                  keepMounted: true,
+                  PaperProps: {
+                    className: "pagination-dropdown",
+                  },
+                  transformOrigin: { vertical: "bottom", horizontal: "left" },
+                  anchorOrigin: { vertical: "top", horizontal: "left" },
+                  sx: { mt: "-4px" },
                 },
-                transformOrigin: { vertical: "bottom", horizontal: "left" },
-                anchorOrigin: { vertical: "top", horizontal: "left" },
-                sx: { mt: "-4px" },
-              },
-              inputProps: { id: "pagination-dropdown" },
-              IconComponent: SelectorVertical,
-              sx: {
-                ml: theme.gap.small,
-                mr: theme.gap.large,
-                minWidth: theme.gap.xl,
-                textAlign: "left",
-                "&.Mui-focused > div": {
-                  backgroundColor: theme.palette.otherColors.white,
+                inputProps: { id: "pagination-dropdown" },
+                IconComponent: SelectorVertical,
+                sx: {
+                  ml: theme.gap.small,
+                  mr: theme.gap.large,
+                  minWidth: theme.gap.xl,
+                  textAlign: "left",
+                  "&.Mui-focused > div": {
+                    backgroundColor: theme.palette.otherColors.white,
+                  },
                 },
               },
-            },
-          }}
-          sx={{ mt: theme.gap.medium }}
-        />
-      </Stack>}
+            }}
+            sx={{ mt: theme.gap.medium }}
+          />
+        </Stack>
+      )}
     </>
   );
 };
diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
index 17523977a..a68492d5c 100644
--- a/Client/src/Features/UI/uiSlice.js
+++ b/Client/src/Features/UI/uiSlice.js
@@ -13,8 +13,8 @@ const uiSlice = createSlice({
   name: "ui",
   initialState,
   reducers: {
-    setTablePreferences: (state, action) => {
-      state.table = { ...action };
+    setRowsPerPage: (state, action) => {
+      state.table.rowsPerPage = action.payload;
     },
     toggleSidebar: (state) => {
       state.sidebar.collapsed = !state.sidebar.collapsed;
@@ -23,4 +23,4 @@ const uiSlice = createSlice({
 });
 
 export default uiSlice.reducer;
-export const { setTablePreferences, toggleSidebar } = uiSlice.actions;
+export const { setRowsPerPage, toggleSidebar } = uiSlice.actions;

From 689f74bf11425f92aa9cee8b943ac157d7856e24 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 17:34:54 -0400
Subject: [PATCH 5/7] Added docs and fix to tooltip hover

---
 Client/src/Components/BasicTable/index.css | 3 +++
 Client/src/Components/Sidebar/index.jsx    | 4 ++++
 Client/src/Features/UI/uiSlice.js          | 2 ++
 3 files changed, 9 insertions(+)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index f64a9b5cc..604dc412e 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -186,3 +186,6 @@ body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
 .pagination-dropdown li.Mui-selected:hover {
   background-color: #f4f4f4;
 }
+body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
+  font-size: var(--env-var-font-size-small-plus);
+}
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 34221c406..69b44c125 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -202,6 +202,7 @@ function Sidebar() {
                   ],
                 },
               }}
+              disableInteractive
             >
               <ListItemButton
                 className={
@@ -235,6 +236,7 @@ function Sidebar() {
                     ],
                   },
                 }}
+                disableInteractive
               >
                 <ListItemButton
                   className={
@@ -398,6 +400,7 @@ function Sidebar() {
                 ],
               },
             }}
+            disableInteractive
           >
             <ListItemButton
               className={
@@ -452,6 +455,7 @@ function Sidebar() {
                   ],
                 },
               }}
+              disableInteractive
             >
               <IconButton
                 onClick={(event) => openPopup(event, "logout")}
diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
index a68492d5c..1ae7f5c74 100644
--- a/Client/src/Features/UI/uiSlice.js
+++ b/Client/src/Features/UI/uiSlice.js
@@ -1,5 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
+// Initial state for UI settings.
+// Add more settings as needed (e.g., theme preferences, user settings)
 const initialState = {
   table: {
     rowsPerPage: 5,

From af31c564cd5ae33843648915e706fa2b4a8f6893 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 18:40:03 -0400
Subject: [PATCH 6/7] Added more tables to track

---
 Client/src/Components/BasicTable/index.jsx | 16 ++++++++++++----
 Client/src/Features/UI/uiSlice.js          |  7 +++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index af71ee3a5..8b6cafd91 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -15,6 +15,7 @@ import {
   Stack,
 } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
+import { useLocation, useParams } from "react-router-dom";
 import { setRowsPerPage } from "../../Features/UI/uiSlice";
 import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
 import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
@@ -142,11 +143,13 @@ const TablePaginationActions = (props) => {
  * <BasicTable data={data} rows={rows} paginated={true} />
  */
 
-const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
+const BasicTable = ({ data, paginated, reversed }) => {
   const theme = useTheme();
+  const location = useLocation();
   const dispatch = useDispatch();
-  const { table } = useSelector((state) => state.ui);
-  let rowsPerPage = table.rowsPerPage;
+  const uiState = useSelector((state) => state.ui);
+  let table = location.pathname.split("/").pop();
+  let rowsPerPage = uiState[table].rowsPerPage;
   const [page, setPage] = useState(0);
 
   useEffect(() => {
@@ -158,7 +161,12 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
   };
 
   const handleChangeRowsPerPage = (event) => {
-    dispatch(setRowsPerPage(parseInt(event.target.value, 10)));
+    dispatch(
+      setRowsPerPage({
+        value: parseInt(event.target.value, 10),
+        table: table,
+      })
+    );
     setPage(0);
   };
 
diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
index 1ae7f5c74..ebea20bf1 100644
--- a/Client/src/Features/UI/uiSlice.js
+++ b/Client/src/Features/UI/uiSlice.js
@@ -3,7 +3,10 @@ import { createSlice } from "@reduxjs/toolkit";
 // Initial state for UI settings.
 // Add more settings as needed (e.g., theme preferences, user settings)
 const initialState = {
-  table: {
+  monitors: {
+    rowsPerPage: 5,
+  },
+  team: {
     rowsPerPage: 5,
   },
   sidebar: {
@@ -16,7 +19,7 @@ const uiSlice = createSlice({
   initialState,
   reducers: {
     setRowsPerPage: (state, action) => {
-      state.table.rowsPerPage = action.payload;
+      state[action.payload.table].rowsPerPage = action.payload.value;
     },
     toggleSidebar: (state) => {
       state.sidebar.collapsed = !state.sidebar.collapsed;

From abd785cdf08ce3bf29842d9724c9e2a4a7bfe03c Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 19:01:59 -0400
Subject: [PATCH 7/7] Moved ui slice to persist config

---
 Client/src/store.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Client/src/store.js b/Client/src/store.js
index a11fdf409..0c9a18b54 100644
--- a/Client/src/store.js
+++ b/Client/src/store.js
@@ -15,13 +15,13 @@ const authTransform = createTransform(
   // No transformation on rehydration
   null,
   // Only applies to auth
-  { whitelist: ["auth", "ui"] }
+  { whitelist: ["auth"] }
 );
 
 const persistConfig = {
   key: "root",
   storage,
-  whitielist: ["auth", "monitors", "pageSpeed"],
+  whitielist: ["auth", "monitors", "pageSpeed", "ui"],
   transforms: [authTransform],
 };