Merge remote-tracking branch 'upstream/develop' into feat/Percentage-colors

Client/src/Components/BasicTable/index.jsx

@@ -297,6 +297,11 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
                 stroke: theme.palette.text.tertiary,
                 strokeWidth: 1.3,
               },
+              "& .MuiSelect-select": {
+                border: 1,
+                borderColor: theme.palette.border.light,
+                borderRadius: theme.shape.borderRadius,
+              },
             }}
           />
         </Stack>

Client/src/Features/UI/uiSlice.js

@@ -4,7 +4,7 @@ import { createSlice } from "@reduxjs/toolkit";
 // Add more settings as needed (e.g., theme preferences, user settings)
 const initialState = {
   monitors: {
-    rowsPerPage: 5,
+    rowsPerPage: 10,
   },
   team: {
     rowsPerPage: 5,
@@ -13,6 +13,7 @@ const initialState = {
     collapsed: false,
   },
   mode: "light",
+  greeting: { index: 0, lastUpdate: null },
 };
 
 const uiSlice = createSlice({
@@ -31,8 +32,13 @@ const uiSlice = createSlice({
     setMode: (state, action) => {
       state.mode = action.payload;
     },
+    setGreeting(state, action) {
+      state.greeting.index = action.payload.index;
+      state.greeting.lastUpdate = action.payload.lastUpdate;
+    },
   },
 });
 
 export default uiSlice.reducer;
-export const { setRowsPerPage, toggleSidebar, setMode } = uiSlice.actions;
+export const { setRowsPerPage, toggleSidebar, setMode, setGreeting } =
+  uiSlice.actions;

Client/src/Pages/PageSpeed/index.css

@@ -1,7 +1,7 @@
 .page-speed h2.MuiTypography-root {
   line-height: 1.1;
 }
-.page-speed h1.MuiTypography-root {
+.page-speed:not(:has([class*="fallback__"])) h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
 }
 .page-speed h2.MuiTypography-root {

Client/src/Utils/greeting.jsx

@@ -1,7 +1,121 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Typography } from "@mui/material";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect } from "react";
+import { setGreeting } from "../Features/UI/uiSlice";
+
+const early = [
+  {
+    prepend: "Rise and shine",
+    append: "If you’re up this early, you might as well be a legend!",
+    emoji: "☕",
+  },
+  {
+    prepend: "Good morning",
+    append: "The world’s still asleep, but you’re already awesome!",
+    emoji: "🦉",
+  },
+  {
+    prepend: "Good morning",
+    append: "Are you a wizard? Only magical people are up at this hour!",
+    emoji: "🌄",
+  },
+  {
+    prepend: "Up before the roosters",
+    append: "Ready to tackle the day before it even starts?",
+    emoji: "🐓",
+  },
+  {
+    prepend: "Early bird special",
+    append: "Let’s get things done while everyone else is snoozing!",
+    emoji: "🌟",
+  },
+];
+
+const morning = [
+  {
+    prepend: "Good morning",
+    append: "Is it coffee o’clock yet, or should we start with high fives?",
+    emoji: "☕",
+  },
+  {
+    prepend: "Morning",
+    append: "The sun is up, and so are you—time to be amazing!",
+    emoji: "🌞",
+  },
+  {
+    prepend: "Good morning",
+    append: "Time to make today the best thing since sliced bread!",
+    emoji: "🥐",
+  },
+  {
+    prepend: "Morning",
+    append: "Let’s kick off the day with more energy than a double espresso!",
+    emoji: "🚀",
+  },
+  {
+    prepend: "Rise and shine",
+    append: "You’re about to make today so great, even Monday will be jealous!",
+    emoji: "🌟",
+  },
+];
+
+const afternoon = [
+  {
+    prepend: "Good afternoon",
+    append: "How about a break to celebrate how awesome you’re doing?",
+    emoji: "🥪",
+  },
+  {
+    prepend: "Afternoon",
+    append: "If you’re still going strong, you’re officially a rockstar!",
+    emoji: "🌞",
+  },
+  {
+    prepend: "Hey there",
+    append: "The afternoon is your playground—let’s make it epic!",
+    emoji: "🍕",
+  },
+  {
+    prepend: "Good afternoon",
+    append: "Time to crush the rest of the day like a pro!",
+    emoji: "🏆",
+  },
+  {
+    prepend: "Afternoon",
+    append: "Time to turn those afternoon slumps into afternoon triumphs!",
+    emoji: "🎉",
+  },
+];
+
+const evening = [
+  {
+    prepend: "Good evening",
+    append: "Time to wind down and think about how you crushed today!",
+    emoji: "🌇",
+  },
+  {
+    prepend: "Evening",
+    append: "You’ve earned a break—let’s make the most of these evening vibes!",
+    emoji: "🍹",
+  },
+  {
+    prepend: "Hey there",
+    append: "Time to relax and bask in the glow of your day’s awesomeness!",
+    emoji: "🌙",
+  },
+  {
+    prepend: "Good evening",
+    append: "Ready to trade productivity for chill mode?",
+    emoji: "🛋️ ",
+  },
+  {
+    prepend: "Evening",
+    append: "Let’s call it a day and toast to your success!",
+    emoji: "🕶️",
+  },
+];
 
 /**
  * Greeting component that displays a personalized greeting message
@@ -18,23 +132,26 @@ import { useSelector } from "react-redux";
 
 const Greeting = ({ type = "" }) => {
   const theme = useTheme();
+  const dispatch = useDispatch();
   const { firstName } = useSelector((state) => state.auth.user);
+  const index = useSelector((state) => state.ui.greeting.index);
+  const lastUpdate = useSelector((state) => state.ui.greeting.lastUpdate);
 
   const now = new Date();
   const hour = now.getHours();
 
-  let greeting = "";
-  let emoji = "";
-  if (hour < 12) {
-    greeting = "morning";
-    emoji = "🌅";
-  } else if (hour < 18) {
-    greeting = "afternoon";
-    emoji = "🌞";
-  } else {
-    greeting = "evening";
-    emoji = "🌙";
-  }
+  useEffect(() => {
+    const hourDiff = lastUpdate ? hour - lastUpdate : null;
+
+    if (!lastUpdate || hourDiff >= 1) {
+      let random = Math.floor(Math.random() * 5);
+      dispatch(setGreeting({ index: random, lastUpdate: hour }));
+    }
+  }, [dispatch, hour]);
+
+  let greetingArray =
+    hour < 6 ? early : hour < 12 ? morning : hour < 18 ? afternoon : evening;
+  const { prepend, append, emoji } = greetingArray[index];
 
   return (
     <Box>
@@ -49,7 +166,7 @@ const Greeting = ({ type = "" }) => {
           fontSize="inherit"
           color={theme.palette.text.secondary}
         >
-          Good {greeting},{" "}
+          {prepend},{" "}
         </Typography>
         <Typography component="span" fontSize="inherit" fontWeight="inherit">
           {firstName} {emoji}
@@ -62,7 +179,7 @@ const Greeting = ({ type = "" }) => {
         fontWeight={300}
         color={theme.palette.text.secondary}
       >
-        Here’s an overview of your {type} monitors.
+        {append} — Here’s an overview of your {type} monitors.
       </Typography>
     </Box>
   );