diff --git a/frontend/src/components/DashNavbar.jsx b/frontend/src/components/DashNavbar.jsx new file mode 100644 index 00000000..d400d9da --- /dev/null +++ b/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 ( + + + + + + + Dashboard + + + + + + + + + + + ); +} + +export function CustomIcon() { + return ( + + + + ); +} diff --git a/frontend/src/components/Dashboard.jsx b/frontend/src/components/Dashboard.jsx new file mode 100644 index 00000000..9095ded9 --- /dev/null +++ b/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 ; + case "analytics": + return ; + case "chat": + return ; + default: + return ; + } + }; + + return ( + + + + + + {/* Main content */} + ({ + flexGrow: 1, + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)` + : alpha(theme.palette.background.default, 1), + overflow: "auto", + })} + > + +
+ {renderContent()} + + + + + ); +} diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx new file mode 100644 index 00000000..e1e5d9c5 --- /dev/null +++ b/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 ( + + + + + + + + + ); +} diff --git a/frontend/src/components/Hero.jsx b/frontend/src/components/Hero.jsx index fc008790..94eb598b 100644 --- a/frontend/src/components/Hero.jsx +++ b/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 diff --git a/frontend/src/components/LogTypeStatus.jsx b/frontend/src/components/LogTypeStatus.jsx new file mode 100644 index 00000000..264fc532 --- /dev/null +++ b/frontend/src/components/LogTypeStatus.jsx @@ -0,0 +1,218 @@ +import * as React from "react"; +import { PieChart } from "@mui/x-charts/PieChart"; +import { useDrawingArea } from "@mui/x-charts/hooks"; +import { styled } from "@mui/material/styles"; +import Typography from "@mui/material/Typography"; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import Box from "@mui/material/Box"; +import Stack from "@mui/material/Stack"; +import LinearProgress, { + linearProgressClasses, +} from "@mui/material/LinearProgress"; +import Unknown from "@mui/icons-material/HelpOutline"; +import System from "@mui/icons-material/Computer"; +import Window from "@mui/icons-material/Window"; +import Kernel from "@mui/icons-material/Memory"; +import Auth from "@mui/icons-material/LockOpen"; + +const data = [ + { label: "SYSLOG", value: 50000 }, + { label: "WINDOWLOG", value: 35000 }, + { label: "AUTHLOG", value: 10000 }, + { label: "KERNEL", value: 10000 }, + { label: "UNKNOWN", value: 5000 }, +]; + +const countries = [ + { + name: "SYSLOG", + value: 50, + flag: , + color: "hsl(220, 25%, 65%)", + }, + { + name: "WINDOWLOG", + value: 35, + flag: , + color: "hsl(220, 25%, 45%)", + }, + { + name: "AUTHLOG", + value: 10, + flag: , + color: "hsl(220, 25%, 30%)", + }, + { + name: "KERNEL", + value: 10, + flag: , + color: "hsl(220, 25%, 30%)", + }, + { + name: "UNKNOWN", + value: 5, + flag: , + color: "hsl(220, 25%, 20%)", + }, +]; + +const StyledText = styled("text", { + shouldForwardProp: (prop) => prop !== "variant", +})(({ theme }) => ({ + textAnchor: "middle", + dominantBaseline: "central", + fill: (theme.vars || theme).palette.text.secondary, + variants: [ + { + props: { + variant: "primary", + }, + style: { + fontSize: theme.typography.h5.fontSize, + }, + }, + { + props: ({ variant }) => variant !== "primary", + style: { + fontSize: theme.typography.body2.fontSize, + }, + }, + { + props: { + variant: "primary", + }, + style: { + fontWeight: theme.typography.h5.fontWeight, + }, + }, + { + props: ({ variant }) => variant !== "primary", + style: { + fontWeight: theme.typography.body2.fontWeight, + }, + }, + ], +})); + +function PieCenterLabel({ primaryText, secondaryText }) { + const { width, height, left, top } = useDrawingArea(); + const primaryY = top + height / 2 - 10; + const secondaryY = primaryY + 24; + + return ( + + + {primaryText} + + + {secondaryText} + + + ); +} + +const colors = [ + "hsl(220, 20%, 65%)", + "hsl(220, 20%, 42%)", + "hsl(220, 20%, 35%)", + "hsl(220, 20%, 25%)", +]; + +export default function LogTypeStatus() { + return ( + + + + Log Type Status + + + + + + + + + {countries.map((country, index) => ( + + {country.flag} + + + + {country.name} + + + {country.value}% + + + + + + ))} + + + + + ); +} diff --git a/frontend/src/components/LogoDash.jsx b/frontend/src/components/LogoDash.jsx new file mode 100644 index 00000000..77ed3929 --- /dev/null +++ b/frontend/src/components/LogoDash.jsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import Divider from "@mui/material/Divider"; +import ConstructionRoundedIcon from "@mui/icons-material/ConstructionRounded"; +import { Box, Stack, Typography } from "@mui/material"; + +export default function Logo() { + return ( + + + + + Log Analyzer + + + + + A simple log analyzer for your application + + + ); +} diff --git a/frontend/src/components/NavbarBreadcrumbs.jsx b/frontend/src/components/NavbarBreadcrumbs.jsx new file mode 100644 index 00000000..20f1a3dd --- /dev/null +++ b/frontend/src/components/NavbarBreadcrumbs.jsx @@ -0,0 +1,36 @@ +import * as React from "react"; +import { styled } from "@mui/material/styles"; +import Typography from "@mui/material/Typography"; +import Breadcrumbs, { breadcrumbsClasses } from "@mui/material/Breadcrumbs"; +import NavigateNextRoundedIcon from "@mui/icons-material/NavigateNextRounded"; +import { useRecoilValue } from "recoil"; +import { activeViewState } from "../utils/state"; + +const StyledBreadcrumbs = styled(Breadcrumbs)(({ theme }) => ({ + margin: theme.spacing(1, 0), + [`& .${breadcrumbsClasses.separator}`]: { + color: (theme.vars || theme).palette.action.disabled, + margin: 1, + }, + [`& .${breadcrumbsClasses.ol}`]: { + alignItems: "center", + }, +})); + +export default function NavbarBreadcrumbs() { + const dest = useRecoilValue(activeViewState); + return ( + } + > + Dashboard + + {dest.charAt(0).toUpperCase() + dest.slice(1)} + + + ); +} diff --git a/frontend/src/components/Search.jsx b/frontend/src/components/Search.jsx new file mode 100644 index 00000000..476bc182 --- /dev/null +++ b/frontend/src/components/Search.jsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import FormControl from "@mui/material/FormControl"; +import InputAdornment from "@mui/material/InputAdornment"; +import OutlinedInput from "@mui/material/OutlinedInput"; +import SearchRoundedIcon from "@mui/icons-material/SearchRounded"; + +export default function Search() { + return ( + + + + + } + inputProps={{ + "aria-label": "search", + }} + /> + + ); +} diff --git a/frontend/src/components/SideMenu.jsx b/frontend/src/components/SideMenu.jsx new file mode 100644 index 00000000..bf7ba2f2 --- /dev/null +++ b/frontend/src/components/SideMenu.jsx @@ -0,0 +1,94 @@ +import * as React from "react"; +import { styled } from "@mui/material/styles"; +import Avatar from "@mui/material/Avatar"; +import MuiDrawer, { drawerClasses } from "@mui/material/Drawer"; +import Box from "@mui/material/Box"; +import Divider from "@mui/material/Divider"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import MenuContent from "./MenuContent"; +import OptionsMenu from "./OptionsMenu"; +import Logo from "./LogoDash"; + +const drawerWidth = 240; + +const Drawer = styled(MuiDrawer)({ + width: drawerWidth, + flexShrink: 0, + boxSizing: "border-box", + mt: 10, + [`& .${drawerClasses.paper}`]: { + width: drawerWidth, + boxSizing: "border-box", + }, +}); + +export default function SideMenu() { + const [open, setOpen] = React.useState(true); + return ( + setOpen(false)} + ModalProps={{ + keepMounted: true, // Better open performance on mobile. + }} + sx={{ + display: { xs: "none", md: "block" }, + [`& .${drawerClasses.paper}`]: { + backgroundColor: "background.paper", + }, + }} + > + + + + + + + + + + + + Dinesh Sutihar + + + dinesh@loganlyzr.com + + + + + + ); +} diff --git a/frontend/src/components/SideMenuMobile.jsx b/frontend/src/components/SideMenuMobile.jsx new file mode 100644 index 00000000..9754579a --- /dev/null +++ b/frontend/src/components/SideMenuMobile.jsx @@ -0,0 +1,64 @@ +import * as React from "react"; +import Avatar from "@mui/material/Avatar"; +import Button from "@mui/material/Button"; +import Divider from "@mui/material/Divider"; +import Drawer, { drawerClasses } from "@mui/material/Drawer"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded"; +import MenuContent from "./MenuContent"; + +export default function SideMenuMobile({ open, toggleDrawer }) { + return ( + theme.zIndex.drawer + 1, + [`& .${drawerClasses.paper}`]: { + backgroundImage: "none", + backgroundColor: "background.paper", + }, + }} + > + + + + + + Dinesh Sutihar + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/components/future/CardAlert.jsx b/frontend/src/components/future/CardAlert.jsx new file mode 100644 index 00000000..697384d8 --- /dev/null +++ b/frontend/src/components/future/CardAlert.jsx @@ -0,0 +1,25 @@ +import * as React from "react"; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; +import AutoAwesomeRoundedIcon from "@mui/icons-material/AutoAwesomeRounded"; + +export default function CardAlert() { + return ( + + + + + Plan about to expire + + + Enjoy 10% off when renewing your plan today. + + + + + ); +} diff --git a/frontend/src/components/future/Pricing.jsx b/frontend/src/components/future/Pricing.jsx new file mode 100644 index 00000000..3e18d42d --- /dev/null +++ b/frontend/src/components/future/Pricing.jsx @@ -0,0 +1,217 @@ +import * as React from "react"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import Card from "@mui/material/Card"; +import Chip from "@mui/material/Chip"; +import CardActions from "@mui/material/CardActions"; +import CardContent from "@mui/material/CardContent"; +import Container from "@mui/material/Container"; +import Divider from "@mui/material/Divider"; +import Grid from "@mui/material/Grid"; +import Typography from "@mui/material/Typography"; +import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome"; +import CheckCircleRoundedIcon from "@mui/icons-material/CheckCircleRounded"; + +const tiers = [ + { + title: "Free", + price: "0", + description: [ + "10 users included", + "2 GB of storage", + "Help center access", + "Email support", + ], + buttonText: "Sign up for free", + buttonVariant: "outlined", + buttonColor: "primary", + }, + { + title: "Professional", + subheader: "Recommended", + price: "15", + description: [ + "20 users included", + "10 GB of storage", + "Help center access", + "Priority email support", + "Dedicated team", + "Best deals", + ], + buttonText: "Start now", + buttonVariant: "contained", + buttonColor: "secondary", + }, + { + title: "Enterprise", + price: "30", + description: [ + "50 users included", + "30 GB of storage", + "Help center access", + "Phone & email support", + ], + buttonText: "Contact us", + buttonVariant: "outlined", + buttonColor: "primary", + }, +]; + +export default function Pricing() { + return ( + + + + Pricing + + + Quickly build an effective pricing table for your potential customers + with this layout.
+ It's built with default Material UI components with little + customization. + + + + {tiers.map((tier) => ( + + ({ + border: "none", + background: + "radial-gradient(circle at 50% 0%, hsl(220, 20%, 35%), hsl(220, 30%, 6%))", + boxShadow: `0 8px 12px hsla(220, 20%, 42%, 0.2)`, + ...theme.applyStyles("dark", { + background: + "radial-gradient(circle at 50% 0%, hsl(220, 20%, 20%), hsl(220, 30%, 16%))", + boxShadow: `0 8px 12px hsla(0, 0%, 0%, 0.8)`, + }), + })), + ]} + > + + + + {tier.title} + + {tier.title === "Professional" && ( + } label={tier.subheader} /> + )} + + + + ${tier.price} + + +   per month + + + + {tier.description.map((line) => ( + + + + {line} + + + ))} + + + + + + + ))} + + + ); +}