WIP: Dashboard work is in progress

frontend/src/components/DashNavbar.jsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import MuiToolbar from "@mui/material/Toolbar";
+import { tabsClasses } from "@mui/material/Tabs";
+import Typography from "@mui/material/Typography";
+import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
+import DashboardRoundedIcon from "@mui/icons-material/DashboardRounded";
+import SideMenuMobile from "./SideMenuMobile";
+import MenuButton from "./MenuButton";
+import ColorModeIconDropdown from "../theme/ColorModeIconDropdown";
+
+const Toolbar = styled(MuiToolbar)({
+  width: "100%",
+  padding: "12px",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "start",
+  justifyContent: "center",
+  gap: "12px",
+  flexShrink: 0,
+  [`& ${tabsClasses.flexContainer}`]: {
+    gap: "8px",
+    p: "8px",
+    pb: 0,
+  },
+});
+
+export default function DashNavbar() {
+  const [open, setOpen] = React.useState(false);
+
+  const toggleDrawer = (newOpen) => () => {
+    setOpen(newOpen);
+  };
+
+  return (
+    <AppBar
+      position="fixed"
+      sx={{
+        display: { xs: "auto", md: "none" },
+        boxShadow: 0,
+        bgcolor: "background.paper",
+        backgroundImage: "none",
+        borderBottom: "1px solid",
+        borderColor: "divider",
+        top: "var(--template-frame-height, 0px)",
+      }}
+    >
+      <Toolbar variant="regular">
+        <Stack
+          direction="row"
+          sx={{
+            alignItems: "center",
+            flexGrow: 1,
+            width: "100%",
+            gap: 1,
+          }}
+        >
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{ justifyContent: "center", mr: "auto" }}
+          >
+            <CustomIcon />
+            <Typography
+              variant="h4"
+              component="h1"
+              sx={{ color: "text.primary" }}
+            >
+              Dashboard
+            </Typography>
+          </Stack>
+          <ColorModeIconDropdown />
+          <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
+            <MenuRoundedIcon />
+          </MenuButton>
+          <SideMenuMobile open={open} toggleDrawer={toggleDrawer} />
+        </Stack>
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+export function CustomIcon() {
+  return (
+    <Box
+      sx={{
+        width: "1.5rem",
+        height: "1.5rem",
+        bgcolor: "black",
+        borderRadius: "999px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        backgroundImage:
+          "linear-gradient(135deg, hsl(210, 98%, 60%) 0%, hsl(210, 100%, 35%) 100%)",
+        color: "hsla(210, 100%, 95%, 0.9)",
+        border: "1px solid",
+        borderColor: "hsl(210, 100%, 55%)",
+        boxShadow: "inset 0 2px 5px rgba(255, 255, 255, 0.3)",
+      }}
+    >
+      <DashboardRoundedIcon color="inherit" sx={{ fontSize: "1rem" }} />
+    </Box>
+  );
+}

frontend/src/components/Dashboard.jsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { alpha } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import DashNavBar from "./DashNavbar";
+import Header from "./Header";
+import MainGrid from "./MainGrid";
+import SideMenu from "./SideMenu";
+import AppTheme from "../theme/AppTheme";
+import {
+  chartsCustomizations,
+  dataGridCustomizations,
+  datePickersCustomizations,
+  treeViewCustomizations,
+} from "../theme/customizations";
+import Chat from "./Chat";
+import Analytics from "./Analytics";
+import { useRecoilValue } from "recoil";
+import { activeViewState } from "../utils/state";
+
+const xThemeComponents = {
+  ...chartsCustomizations,
+  ...dataGridCustomizations,
+  ...datePickersCustomizations,
+  ...treeViewCustomizations,
+};
+
+export default function Dashboard(props) {
+  const activeView = useRecoilValue(activeViewState);
+
+  const renderContent = () => {
+    switch (activeView) {
+      case "home":
+        return <MainGrid />;
+      case "analytics":
+        return <Analytics />;
+      case "chat":
+        return <Chat />;
+      default:
+        return <MainGrid />;
+    }
+  };
+
+  return (
+    <AppTheme {...props} themeComponents={xThemeComponents}>
+      <CssBaseline enableColorScheme />
+      <Box sx={{ display: "flex" }}>
+        <SideMenu />
+        <DashNavBar />
+        {/* Main content */}
+        <Box
+          component="main"
+          sx={(theme) => ({
+            flexGrow: 1,
+            backgroundColor: theme.vars
+              ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
+              : alpha(theme.palette.background.default, 1),
+            overflow: "auto",
+          })}
+        >
+          <Stack
+            spacing={2}
+            sx={{
+              alignItems: "center",
+              mx: 3,
+              pb: 5,
+              mt: { xs: 8, md: 0 },
+            }}
+          >
+            <Header />
+            {renderContent()}
+          </Stack>
+        </Box>
+      </Box>
+    </AppTheme>
+  );
+}

frontend/src/components/Header.jsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import Stack from "@mui/material/Stack";
+import CustomDatePicker from "./CustomDatePicker";
+import NavbarBreadcrumbs from "./NavbarBreadcrumbs";
+import ColorModeIconDropdown from "../theme/ColorModeIconDropdown";
+
+import Search from "./Search";
+
+export default function Header() {
+  return (
+    <Stack
+      direction="row"
+      sx={{
+        display: { xs: "none", md: "flex" },
+        width: "100%",
+        alignItems: { xs: "flex-start", md: "center" },
+        justifyContent: "space-between",
+        maxWidth: { sm: "100%", md: "1700px" },
+        pt: 1.5,
+      }}
+      spacing={2}
+    >
+      <NavbarBreadcrumbs />
+      <Stack direction="row" sx={{ gap: 1 }}>
+        <Search />
+        <CustomDatePicker />
+        <ColorModeIconDropdown />
+      </Stack>
+    </Stack>
+  );
+}

frontend/src/components/Hero.jsx

@@ -117,6 +117,8 @@ export default function Hero() {
               color="primary"
               size="small"
               sx={{ minWidth: "fit-content" }}
+              href="/dashboard"
+              component={Link}
             >
               Get Started
             </Button>