Initial checkin

src/examples/Breadcrumbs/index.tsx

@@ -0,0 +1,104 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// react-router-dom components
+import { Link } from "react-router-dom";
+
+// @mui material components
+import { Breadcrumbs as MuiBreadcrumbs } from "@mui/material";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Declaring props types for the Breadcrumbs
+interface Props {
+  icon: ReactNode;
+  title: string;
+  route: string | string[];
+  light?: boolean;
+  [key: string]: any;
+}
+
+function Breadcrumbs({ icon, title, route, light }: Props): JSX.Element {
+  const routes: string[] | any = route.slice(0, -1);
+
+  return (
+    <MDBox mr={{ xs: 0, xl: 8 }}>
+      <MuiBreadcrumbs
+        sx={{
+          "& .MuiBreadcrumbs-separator": {
+            color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]),
+          },
+        }}
+      >
+        <Link to="/">
+          <MDTypography
+            component="span"
+            variant="body2"
+            color={light ? "white" : "dark"}
+            opacity={light ? 0.8 : 0.5}
+            sx={{ lineHeight: 0 }}
+          >
+            <Icon>{icon}</Icon>
+          </MDTypography>
+        </Link>
+        {routes.map((el: string) => (
+          <Link to={`/${el}`} key={el}>
+            <MDTypography
+              component="span"
+              variant="button"
+              fontWeight="regular"
+              textTransform="capitalize"
+              color={light ? "white" : "dark"}
+              opacity={light ? 0.8 : 0.5}
+              sx={{ lineHeight: 0 }}
+            >
+              {el}
+            </MDTypography>
+          </Link>
+        ))}
+        <MDTypography
+          variant="button"
+          fontWeight="regular"
+          textTransform="capitalize"
+          color={light ? "white" : "dark"}
+          sx={{ lineHeight: 0 }}
+        >
+          {title.replace("-", " ")}
+        </MDTypography>
+      </MuiBreadcrumbs>
+      <MDTypography
+        fontWeight="bold"
+        textTransform="capitalize"
+        variant="h6"
+        color={light ? "white" : "dark"}
+        noWrap
+      >
+        {title.replace("-", " ")}
+      </MDTypography>
+    </MDBox>
+  );
+}
+
+// Declaring default props for Breadcrumbs
+Breadcrumbs.defaultProps = {
+  light: false,
+};
+
+export default Breadcrumbs;

src/examples/Calendar/CalendarRoot.tsx

@@ -0,0 +1,174 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import Box from "@mui/material/Box";
+import { styled, Theme } from "@mui/material/styles";
+
+export default styled(Box)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => {
+  const { palette, typography, functions, boxShadows } = theme;
+  const { darkMode } = ownerState;
+
+  const { white, dark, light, grey, gradients, info } = palette;
+  const { size, fontWeightMedium, fontWeightBold, fontWeightRegular, fontWeightLight } = typography;
+  const { linearGradient, pxToRem } = functions;
+  const { md } = boxShadows;
+
+  return {
+    height: "100%",
+
+    "& .fc-media-screen": {
+      height: "100%",
+      color: dark.main,
+    },
+
+    "& .fc-theme-standard .fc-scrollgrid": {
+      border: "none",
+    },
+
+    "& .fc-theme-standard thead tr th": {
+      borderLeft: "none",
+      borderRight: "none",
+    },
+
+    "& .fc-theme-standard td, .fc-theme-standard th": {
+      borderColor: light.main,
+    },
+
+    "& .fc th": {
+      textAlign: "center",
+    },
+
+    "& .fc .fc-col-header-cell-cushion": {
+      fontSize: size.sm,
+      fontWeight: fontWeightMedium,
+      color: darkMode ? white.main : grey[500],
+    },
+
+    "& .fc .fc-daygrid-day-number": {
+      color: darkMode ? white.main : grey[700],
+      fontSize: size.sm,
+      fontWeight: fontWeightLight,
+      width: "100%",
+      textAlign: "center",
+    },
+
+    "& .fc-scrollgrid-section.fc-scrollgrid-section-header > td": {
+      border: "none",
+    },
+
+    "& .fc-scrollgrid-section.fc-scrollgrid-section-body.fc-scrollgrid-section-liquid > td": {
+      border: "none",
+    },
+
+    "& .fc-scrollgrid-sync-table": {
+      height: "auto !important",
+    },
+
+    "& .fc .fc-view-harness-active > .fc-view": {
+      position: "static",
+      height: "100%",
+    },
+
+    "& .fc .fc-scroller-liquid-absolute": {
+      position: "static",
+    },
+
+    "& .fc-daygrid-event": {
+      margin: `${pxToRem(0.5)} ${pxToRem(2)}`,
+      border: "none",
+      borderRadius: pxToRem(5.6),
+      fontSize: size.sm,
+      fontWeight: fontWeightMedium,
+    },
+
+    "& .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events": {
+      minHeight: pxToRem(32),
+    },
+
+    "& .fc-event-title": {
+      fontSize: `${size.xs} !important`,
+      fontWeight: `${fontWeightRegular} !important`,
+      padding: `${pxToRem(2)} ${pxToRem(4.8)} ${pxToRem(1.5)} !important`,
+    },
+
+    "& .fc-button, .fc-today-button, .fc-button:disabled": {
+      backgroundColor: `${info.main} !important`,
+      borderColor: `${info.main} !important`,
+      fontSize: `${size.sm} !important`,
+      boxShadow: `${md} !important`,
+      opacity: "1 !important",
+      transition: `all 150ms ease-in`,
+
+      "&:hover, &:focus, &:active": {
+        transform: "scale(1.02)",
+        boxShadow: `${md} !important`,
+        backgroundColor: `${info.main} !important`,
+        borderColor: `${info.main} !important`,
+      },
+    },
+
+    "& .fc .fc-button .fc-icon": {
+      fontSize: size.sm,
+    },
+
+    "& .fc-toolbar-title": {
+      fontSize: `${size.lg} !important`,
+      fontWeight: `${fontWeightBold} !important`,
+      color: darkMode ? white.main : dark.main,
+    },
+
+    "& .event-primary": {
+      backgroundImage: linearGradient(gradients.primary.main, gradients.primary.state),
+      "& *": { color: white.main },
+    },
+
+    "& .event-secondary": {
+      backgroundImage: linearGradient(gradients.secondary.main, gradients.secondary.state),
+      "& *": { color: white.main },
+    },
+
+    "& .event-info": {
+      backgroundImage: linearGradient(gradients.info.main, gradients.info.state),
+      "& *": { color: white.main },
+    },
+
+    "& .event-success": {
+      backgroundImage: linearGradient(gradients.success.main, gradients.success.state),
+      "& *": { color: white.main },
+    },
+
+    "& .event-warning": {
+      backgroundImage: linearGradient(gradients.warning.main, gradients.warning.state),
+      "& *": { color: white.main },
+    },
+
+    "& .event-error": {
+      backgroundImage: linearGradient(gradients.error.main, gradients.error.state),
+      "& *": { color: white.main },
+    },
+
+    "& .event-light": {
+      backgroundImage: linearGradient(gradients.light.main, gradients.light.state),
+
+      "& *": { color: dark.main },
+    },
+
+    "& .event-dark": {
+      backgroundImage: linearGradient(gradients.dark.main, gradients.dark.state),
+      "& *": { color: white.main },
+    },
+  };
+});

src/examples/Calendar/index.tsx

@@ -0,0 +1,102 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @fullcalendar components
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+
+// @mui material components
+import Card from "@mui/material/Card";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Custom styles for Calendar
+import CalendarRoot from "examples/Calendar/CalendarRoot";
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController } from "context";
+
+// Declaring props types for the Calender
+interface Props {
+  header?: {
+    title?: string;
+    date?: string;
+  };
+  [key: string]: any;
+}
+
+function Calendar({ header, ...rest }: Props): JSX.Element {
+  const [controller] = useMaterialUIController();
+  const { darkMode } = controller;
+
+  const validClassNames = [
+    "primary",
+    "secondary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "light",
+    "dark",
+  ];
+
+  const events = rest.events
+    ? rest.events.map((el: any) => ({
+        ...el,
+        className: validClassNames.find((item) => item === el.className)
+          ? `event-${el.className}`
+          : "event-info",
+      }))
+    : [];
+
+  return (
+    <Card sx={{ height: "100%" }}>
+      <MDBox pt={header.title || header.date ? 2 : 0} px={2} lineHeight={1}>
+        {header.title ? (
+          <MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
+            {header.title}
+          </MDTypography>
+        ) : null}
+        {header.date ? (
+          <MDTypography component="p" variant="button" color="text" fontWeight="regular">
+            {header.date}
+          </MDTypography>
+        ) : null}
+      </MDBox>
+      <CalendarRoot p={2} ownerState={{ darkMode }}>
+        <FullCalendar
+          {...rest}
+          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+          events={events}
+          height="100%"
+        />
+      </CalendarRoot>
+    </Card>
+  );
+}
+
+// Declaring default props for Calendar
+Calendar.defaultProps = {
+  header: {
+    title: "",
+    date: "",
+  },
+};
+
+export default Calendar;

src/examples/Cards/BlogCards/SimpleBlogCard/index.tsx

@@ -0,0 +1,105 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// react-router components
+import { Link } from "react-router-dom";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import MuiLink from "@mui/material/Link";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDButton from "components/MDButton";
+
+// Declaring props types for SimpleBlogCard
+interface Props {
+  image: string;
+  title: string;
+  description: string;
+  action: {
+    type: "external" | "internal";
+    route: string;
+    color:
+      | "primary"
+      | "secondary"
+      | "info"
+      | "success"
+      | "warning"
+      | "error"
+      | "dark"
+      | "light"
+      | "default";
+    label: string;
+    [key: string]: any;
+  };
+}
+
+function SimpleBlogCard({ image, title, description, action }: Props): JSX.Element {
+  return (
+    <Card>
+      <MDBox position="relative" borderRadius="lg" mt={-3} mx={2}>
+        <MDBox
+          component="img"
+          src={image}
+          alt={title}
+          borderRadius="lg"
+          shadow="md"
+          width="100%"
+          height="100%"
+          position="relative"
+          zIndex={1}
+        />
+        <MDBox
+          borderRadius="lg"
+          shadow="md"
+          width="100%"
+          height="100%"
+          position="absolute"
+          left={0}
+          top="3%"
+          sx={{
+            backgroundImage: `url(${image})`,
+            transform: "scale(0.94)",
+            filter: "blur(12px)",
+            backgroundSize: "cover",
+          }}
+        />
+      </MDBox>
+      <MDBox p={3}>
+        <MDTypography display="inline" variant="h3" textTransform="capitalize" fontWeight="bold">
+          {title}
+        </MDTypography>
+        <MDBox mt={2} mb={3}>
+          <MDTypography variant="body2" component="p" color="text">
+            {description}
+          </MDTypography>
+        </MDBox>
+        {action.type === "external" ? (
+          <MuiLink href={action.route} target="_blank" rel="noreferrer">
+            <MDButton color={action.color ? action.color : "dark"}>{action.label}</MDButton>
+          </MuiLink>
+        ) : (
+          <Link to={action.route}>
+            <MDButton color={action.color ? action.color : "dark"}>{action.label}</MDButton>
+          </Link>
+        )}
+      </MDBox>
+    </Card>
+  );
+}
+
+export default SimpleBlogCard;

src/examples/Cards/BookingCard/index.tsx

@@ -0,0 +1,124 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Declaring props types for BookingCard
+interface Props {
+  image: string;
+  title: string;
+  description: string;
+  price: string;
+  location: ReactNode;
+  action?: ReactNode | boolean;
+  [key: string]: any;
+}
+
+function BookingCard({ image, title, description, price, location, action }: Props): JSX.Element {
+  return (
+    <Card
+      sx={{
+        "&:hover .card-header": {
+          transform: action && "translate3d(0, -50px, 0)",
+        },
+      }}
+    >
+      <MDBox
+        position="relative"
+        borderRadius="lg"
+        mt={-3}
+        mx={2}
+        className="card-header"
+        sx={{ transition: "transform 300ms cubic-bezier(0.34, 1.61, 0.7, 1)" }}
+      >
+        <MDBox
+          component="img"
+          src={image}
+          alt={title}
+          borderRadius="lg"
+          shadow="md"
+          width="100%"
+          height="100%"
+          position="relative"
+          zIndex={1}
+        />
+        <MDBox
+          borderRadius="lg"
+          shadow="md"
+          width="100%"
+          height="100%"
+          position="absolute"
+          left={0}
+          top="0"
+          sx={{
+            backgroundImage: `url(${image})`,
+            transform: "scale(0.94)",
+            filter: "blur(12px)",
+            backgroundSize: "cover",
+          }}
+        />
+      </MDBox>
+      <MDBox textAlign="center" pt={3} px={3}>
+        <MDBox display="flex" justifyContent="center" alignItems="center" mt={action ? -8 : -4.25}>
+          {action}
+        </MDBox>
+        <MDTypography variant="h5" fontWeight="regular" sx={{ mt: 4 }}>
+          {title}
+        </MDTypography>
+        <MDTypography variant="body2" color="text" sx={{ mt: 1.5, mb: 1 }}>
+          {description}
+        </MDTypography>
+      </MDBox>
+      <Divider />
+      <MDBox
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        pt={0.5}
+        pb={3}
+        px={3}
+        lineHeight={1}
+      >
+        <MDTypography variant="body2" fontWeight="regular" color="text">
+          {price}
+        </MDTypography>
+        <MDBox color="text" display="flex" alignItems="center">
+          <Icon color="inherit" sx={{ m: 0.5 }}>
+            place
+          </Icon>
+          <MDTypography variant="button" fontWeight="light" color="text">
+            {location}
+          </MDTypography>
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for BookingCard
+BookingCard.defaultProps = {
+  action: false,
+};
+
+export default BookingCard;

src/examples/Cards/ControllerCard/index.tsx

@@ -0,0 +1,95 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Switch from "@mui/material/Switch";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController } from "context";
+
+// Declaring props types for ControllerCard
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  state?: boolean;
+  icon: ReactNode;
+  title: string;
+  description?: string;
+  onChange: () => void;
+  [key: string]: any;
+}
+
+function ControllerCard({ color, state, icon, title, description, onChange }: Props): JSX.Element {
+  const [controller] = useMaterialUIController();
+  const { darkMode } = controller;
+
+  return (
+    <Card sx={{ height: "100%", overflow: "hidden" }}>
+      <MDBox
+        p={3}
+        height="100%"
+        bgColor={state ? color : "white"}
+        variant="gradient"
+        display="flex"
+        flexDirection="column"
+        justifyContent="space-between"
+        sx={({ palette: { background } }: { palette: any }) => ({
+          background: darkMode && !state && background.card,
+        })}
+      >
+        <MDBox
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          mb={2}
+          lineHeight={1}
+        >
+          <MDTypography variant="body2" color={state ? "white" : "text"}>
+            {state ? "On" : "Off"}
+          </MDTypography>
+          <MDBox mt={-0.5} mr={-1.5}>
+            <Switch checked={state} onChange={onChange} />
+          </MDBox>
+        </MDBox>
+        {icon}
+        <MDBox mt={1} lineHeight={1}>
+          <MDTypography variant="body2" color={state ? "white" : "text"} textTransform="capitalize">
+            {title}
+          </MDTypography>
+          {description ? (
+            <MDTypography variant="caption" color={state ? "white" : "text"}>
+              {description}
+            </MDTypography>
+          ) : null}
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for ControllerCard
+ControllerCard.defaultProps = {
+  color: "info",
+  state: false,
+  description: "",
+};
+
+export default ControllerCard;

src/examples/Cards/InfoCards/DefaultInfoCard/index.tsx

@@ -0,0 +1,83 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Declaring props types for DefaultInfoCard
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  icon: ReactNode;
+  title: string;
+  description?: string;
+  value?: string | number;
+  [key: string]: any;
+}
+
+function DefaultInfoCard({ color, icon, title, description, value }: Props): JSX.Element {
+  return (
+    <Card>
+      <MDBox p={2} mx={3} display="flex" justifyContent="center">
+        <MDBox
+          display="grid"
+          justifyContent="center"
+          alignItems="center"
+          bgColor={color}
+          color="white"
+          width="4rem"
+          height="4rem"
+          shadow="md"
+          borderRadius="lg"
+          variant="gradient"
+        >
+          <Icon>{icon}</Icon>
+        </MDBox>
+      </MDBox>
+      <MDBox pb={2} px={2} textAlign="center" lineHeight={1.25}>
+        <MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
+          {title}
+        </MDTypography>
+        {description && (
+          <MDTypography variant="caption" color="text" fontWeight="regular">
+            {description}
+          </MDTypography>
+        )}
+        {description && !value ? null : <Divider />}
+        {value && (
+          <MDTypography variant="h5" fontWeight="medium">
+            {value}
+          </MDTypography>
+        )}
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for DefaultInfoCard
+DefaultInfoCard.defaultProps = {
+  color: "info",
+  value: "",
+  description: "",
+};
+
+export default DefaultInfoCard;

src/examples/Cards/InfoCards/MiniInfoCard/index.tsx

@@ -0,0 +1,70 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  icon: ReactNode;
+  title: ReactNode;
+  description: string;
+  [key: string]: any;
+}
+
+function MiniInfoCard({ color, icon, title, description }: Props): JSX.Element {
+  return (
+    <Card>
+      <MDBox p={3}>
+        <MDBox
+          display="grid"
+          justifyContent="center"
+          alignItems="center"
+          bgColor={color}
+          color="white"
+          width="3rem"
+          height="3rem"
+          shadow="md"
+          borderRadius="lg"
+          variant="gradient"
+        >
+          <Icon>{icon}</Icon>
+        </MDBox>
+        <MDBox mt={2.625}>
+          <MDTypography variant="h5" fontWeight="medium" textTransform="capitalize">
+            {title}
+          </MDTypography>
+          <MDTypography variant="body2" color="text" fontWeight="regular">
+            {description}
+          </MDTypography>
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for MiniInfoCard
+MiniInfoCard.defaultProps = {
+  color: "info",
+};
+
+export default MiniInfoCard;

src/examples/Cards/InfoCards/ProfileInfoCard/index.tsx

@@ -0,0 +1,142 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// react-routers components
+import { Link } from "react-router-dom";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import Tooltip from "@mui/material/Tooltip";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+import typography from "assets/theme/base/typography";
+
+// Declaring props types for ProfileInfoCard
+interface Props {
+  title: string;
+  description: string;
+  info: {
+    [key: string]: string;
+  };
+  social: {
+    [key: string]: any;
+  }[];
+  action: {
+    route: string;
+    tooltip: string;
+  };
+  shadow?: boolean;
+  [key: string]: any;
+}
+
+function ProfileInfoCard({ title, description, info, social, action, shadow }: Props): JSX.Element {
+  const labels: string[] = [];
+  const values: string[] = [];
+  const { socialMediaColors } = colors;
+  const { size } = typography;
+
+  // Convert this form `objectKey` of the object key in to this `object key`
+  Object.keys(info).forEach((el) => {
+    if (el.match(/[A-Z\s]+/)) {
+      const uppercaseLetter = Array.from(el).find((i) => i.match(/[A-Z]+/));
+      const newElement = el.replace(uppercaseLetter, ` ${uppercaseLetter.toLowerCase()}`);
+
+      labels.push(newElement);
+    } else {
+      labels.push(el);
+    }
+  });
+
+  // Push the object values into the values array
+  Object.values(info).forEach((el) => values.push(el));
+
+  // Render the card info items
+  const renderItems = labels.map((label, key) => (
+    <MDBox key={label} display="flex" py={1} pr={2}>
+      <MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
+        {label}: &nbsp;
+      </MDTypography>
+      <MDTypography variant="button" fontWeight="regular" color="text">
+        &nbsp;{values[key]}
+      </MDTypography>
+    </MDBox>
+  ));
+
+  // Render the card social media icons
+  const renderSocial = social.map(({ link, icon, color }) => (
+    <MDBox
+      key={color}
+      component="a"
+      href={link}
+      target="_blank"
+      rel="noreferrer"
+      fontSize={size.lg}
+      color={socialMediaColors[color].main}
+      pr={1}
+      pl={0.5}
+      lineHeight={1}
+    >
+      {icon}
+    </MDBox>
+  ));
+
+  return (
+    <Card sx={{ height: "100%", boxShadow: !shadow && "none" }}>
+      <MDBox display="flex" justifyContent="space-between" alignItems="center" pt={2} px={2}>
+        <MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
+          {title}
+        </MDTypography>
+        <MDTypography component={Link} to={action.route} variant="body2" color="secondary">
+          <Tooltip title={action.tooltip} placement="top">
+            <Icon>edit</Icon>
+          </Tooltip>
+        </MDTypography>
+      </MDBox>
+      <MDBox p={2}>
+        <MDBox mb={2} lineHeight={1}>
+          <MDTypography variant="button" color="text" fontWeight="light">
+            {description}
+          </MDTypography>
+        </MDBox>
+        <MDBox opacity={0.3}>
+          <Divider />
+        </MDBox>
+        <MDBox>
+          {renderItems}
+          <MDBox display="flex" py={1} pr={2}>
+            <MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
+              social: &nbsp;
+            </MDTypography>
+            {renderSocial}
+          </MDBox>
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for ProfileInfoCard
+ProfileInfoCard.defaultProps = {
+  shadow: true,
+};
+
+export default ProfileInfoCard;

src/examples/Cards/MasterCard/index.tsx

@@ -0,0 +1,117 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Images
+import pattern from "assets/images/illustrations/pattern-tree.svg";
+import masterCardLogo from "assets/images/logos/mastercard.png";
+
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  number: number;
+  holder: string;
+  expires: string;
+  [key: string]: any;
+}
+
+function MasterCard({ color, number, holder, expires }: Props): JSX.Element {
+  const numbers: string[] = [...`${number}`];
+
+  if (numbers.length < 16 || numbers.length > 16) {
+    throw new Error(
+      "Invalid value for the prop number, the value for the number prop shouldn't be greater than or less than 16 digits"
+    );
+  }
+
+  const num1 = numbers.slice(0, 4).join("");
+  const num2 = numbers.slice(4, 8).join("");
+  const num3 = numbers.slice(8, 12).join("");
+  const num4 = numbers.slice(12, 16).join("");
+
+  return (
+    <Card
+      sx={({ palette: { gradients }, functions: { linearGradient }, boxShadows: { xl } }) => ({
+        background: gradients[color]
+          ? linearGradient(gradients[color].main, gradients[color].state)
+          : linearGradient(gradients.dark.main, gradients.dark.state),
+        boxShadow: xl,
+        position: "relative",
+      })}
+    >
+      <MDBox
+        position="absolute"
+        top={0}
+        left={0}
+        width="100%"
+        height="100%"
+        opacity={0.2}
+        sx={{
+          backgroundImage: `url(${pattern})`,
+          backgroundSize: "cover",
+        }}
+      />
+      <MDBox position="relative" zIndex={2} p={2}>
+        <MDBox color="white" p={1} lineHeight={0} display="inline-block">
+          <Icon>wifi</Icon>
+        </MDBox>
+        <MDTypography variant="h5" color="white" fontWeight="medium" sx={{ mt: 3, mb: 5, pb: 1 }}>
+          {num1}&nbsp;&nbsp;&nbsp;{num2}&nbsp;&nbsp;&nbsp;{num3}&nbsp;&nbsp;&nbsp;{num4}
+        </MDTypography>
+        <MDBox display="flex" justifyContent="space-between" alignItems="center">
+          <MDBox display="flex" alignItems="center">
+            <MDBox mr={3} lineHeight={1}>
+              <MDTypography variant="button" color="white" fontWeight="regular" opacity={0.8}>
+                Card Holder
+              </MDTypography>
+              <MDTypography
+                variant="h6"
+                color="white"
+                fontWeight="medium"
+                textTransform="capitalize"
+              >
+                {holder}
+              </MDTypography>
+            </MDBox>
+            <MDBox lineHeight={1}>
+              <MDTypography variant="button" color="white" fontWeight="regular" opacity={0.8}>
+                Expires
+              </MDTypography>
+              <MDTypography variant="h6" color="white" fontWeight="medium">
+                {expires}
+              </MDTypography>
+            </MDBox>
+          </MDBox>
+          <MDBox display="flex" justifyContent="flex-end" width="20%">
+            <MDBox component="img" src={masterCardLogo} alt="master card" width="60%" mt={1} />
+          </MDBox>
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for MasterCard
+MasterCard.defaultProps = {
+  color: "dark",
+};
+
+export default MasterCard;

src/examples/Cards/PricingCards/DefaultPricingCard/index.tsx

@@ -0,0 +1,189 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// react-router-dom components
+import { Link } from "react-router-dom";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDButton from "components/MDButton";
+
+// Declaring props types for DefaultPricingCard
+interface Props {
+  color?:
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "warning"
+    | "error"
+    | "light"
+    | "dark"
+    | "white";
+  badge: {
+    color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    label: string;
+  };
+  price: {
+    currency: string;
+    value: string;
+    type: string;
+  };
+  specifications: {
+    label: string;
+    includes?: boolean;
+  }[];
+  action: {
+    type: "external" | "internal";
+    route: string;
+    label: string;
+    color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+  };
+  shadow?: boolean;
+  [key: string]: any;
+}
+
+function DefaultPricingCard({
+  color,
+  badge,
+  price,
+  specifications,
+  action,
+  shadow,
+}: Props): JSX.Element {
+  const renderSpecifications = specifications.map(({ label, includes }) => (
+    <MDBox key={label} display="flex" alignItems="center" p={1}>
+      <MDBox
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        width="1.5rem"
+        height="1.5rem"
+        mr={2}
+        mt={-0.125}
+      >
+        <MDTypography
+          variant="body1"
+          color={color === "white" ? "text" : "white"}
+          sx={{ lineHeight: 0 }}
+        >
+          <Icon>{includes ? "done" : "remove"}</Icon>
+        </MDTypography>
+      </MDBox>
+      <MDTypography
+        variant="body2"
+        color={color === "white" ? "text" : "white"}
+        fontWeight="regular"
+      >
+        {label}
+      </MDTypography>
+    </MDBox>
+  ));
+
+  return (
+    <Card sx={{ boxShadow: ({ boxShadows: { lg } }) => (shadow ? lg : "none") }}>
+      <MDBox
+        bgColor={color}
+        variant={color === "white" ? "contained" : "gradient"}
+        borderRadius="xl"
+      >
+        <MDBox
+          bgColor={badge.color}
+          width="max-content"
+          px={4}
+          pt={0}
+          pb={0.5}
+          mx="auto"
+          mt={-1.375}
+          borderRadius="section"
+          lineHeight={1}
+        >
+          <MDTypography
+            variant="caption"
+            textTransform="uppercase"
+            fontWeight="medium"
+            color={badge.color === "light" ? "dark" : "white"}
+          >
+            {badge.label}
+          </MDTypography>
+        </MDBox>
+        <MDBox pt={3} pb={2} px={2} textAlign="center">
+          <MDBox my={1}>
+            <MDTypography variant="h1" color={color === "white" ? "dark" : "white"}>
+              <MDTypography
+                display="inline"
+                component="small"
+                variant="h5"
+                color="inherit"
+                verticalAlign="top"
+              >
+                {price.currency}
+              </MDTypography>
+              {price.value}
+              <MDTypography display="inline" component="small" variant="h5" color="inherit">
+                /{price.type}
+              </MDTypography>
+            </MDTypography>
+          </MDBox>
+        </MDBox>
+        <MDBox pb={3} px={3}>
+          {renderSpecifications}
+          {action.type === "internal" ? (
+            <MDBox mt={3}>
+              <MDButton
+                component={Link}
+                to={action.route}
+                variant="gradient"
+                color={action.color}
+                fullWidth
+              >
+                {action.label}&nbsp;
+                <Icon sx={{ fontWeight: "bold" }}>arrow_forward</Icon>
+              </MDButton>
+            </MDBox>
+          ) : (
+            <MDBox mt={3}>
+              <MDButton
+                component="a"
+                href={action.route}
+                target="_blank"
+                rel="noreferrer"
+                variant="gradient"
+                color={action.color}
+                fullWidth
+              >
+                {action.label}&nbsp;
+                <Icon sx={{ fontWeight: "bold" }}>arrow_forward</Icon>
+              </MDButton>
+            </MDBox>
+          )}
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for DefaultPricingCard
+DefaultPricingCard.defaultProps = {
+  color: "white",
+  shadow: true,
+};
+
+export default DefaultPricingCard;

src/examples/Cards/ProjectCards/ComplexProjectCard/index.tsx

@@ -0,0 +1,155 @@
+/* eslint-disable no-unused-vars */
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDAvatar from "components/MDAvatar";
+
+// Declaring prop types for the ComplexProjectCard
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light";
+  image: string;
+  title: string;
+  dateTime?: string;
+  description: ReactNode;
+  members?: string[];
+  dropdown?: {
+    action?: (...arg: any) => void;
+    menu?: ReactNode;
+  };
+  [key: string]: any;
+}
+
+// Custom styles for ComplexProjectCard
+function ComplexProjectCard({
+  color,
+  image,
+  title,
+  dateTime,
+  description,
+  members,
+  dropdown,
+}: Props): JSX.Element {
+  const renderMembers = members.map((member, key) => {
+    const memberKey = `member-${key}`;
+
+    return (
+      <MDAvatar
+        key={memberKey}
+        src={member}
+        alt="member profile"
+        size="xs"
+        sx={({ borders: { borderWidth }, palette: { white } }) => ({
+          border: `${borderWidth[2]} solid ${white.main}`,
+          cursor: "pointer",
+          position: "relative",
+
+          "&:not(:first-of-type)": {
+            ml: -1.25,
+          },
+
+          "&:hover, &:focus": {
+            zIndex: "10",
+          },
+        })}
+      />
+    );
+  });
+
+  return (
+    <Card>
+      <MDBox p={2}>
+        <MDBox display="flex" alignItems="center">
+          <MDAvatar
+            src={image}
+            alt={title}
+            size="xl"
+            variant="rounded"
+            bgColor={color}
+            sx={{ p: 1, mt: -6, borderRadius: ({ borders: { borderRadius } }) => borderRadius.xl }}
+          />
+          <MDBox ml={2} mt={-2} lineHeight={0}>
+            <MDTypography variant="h6" textTransform="capitalize" fontWeight="medium">
+              {title}
+            </MDTypography>
+            {members.length > -1 ? <MDBox display="flex">{renderMembers}</MDBox> : null}
+          </MDBox>
+          {dropdown && (
+            <MDTypography
+              color="secondary"
+              onClick={dropdown.action}
+              sx={{
+                ml: "auto",
+                mt: -1,
+                alignSelf: "flex-start",
+                py: 1.25,
+              }}
+            >
+              <Icon sx={{ cursor: "pointer", fontWeight: "bold" }}>more_vert</Icon>
+            </MDTypography>
+          )}
+          {dropdown.menu}
+        </MDBox>
+        <MDBox my={2} lineHeight={1}>
+          <MDTypography variant="button" fontWeight="light" color="text">
+            {description}
+          </MDTypography>
+        </MDBox>
+        <Divider />
+        <MDBox display="flex" justifyContent="space-between" alignItems="center">
+          {members.length > -1 ? (
+            <MDBox display="flex" flexDirection="column" lineHeight={0}>
+              <MDTypography variant="button" fontWeight="medium">
+                {members.length}
+              </MDTypography>
+              <MDTypography variant="button" fontWeight="regular" color="secondary">
+                Participants
+              </MDTypography>
+            </MDBox>
+          ) : null}
+          {dateTime ? (
+            <MDBox display="flex" flexDirection="column" lineHeight={0}>
+              <MDTypography variant="button" fontWeight="medium">
+                {dateTime}
+              </MDTypography>
+              <MDTypography variant="button" fontWeight="regular" color="secondary">
+                Due date
+              </MDTypography>
+            </MDBox>
+          ) : null}
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for ComplexProjectCard
+ComplexProjectCard.defaultProps = {
+  color: "dark",
+  dateTime: "",
+  members: [],
+  dropdown: false,
+};
+
+export default ComplexProjectCard;

src/examples/Cards/ProjectCards/DefaultProjectCard/index.tsx

@@ -0,0 +1,178 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// react-router-dom components
+import { Link } from "react-router-dom";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import CardMedia from "@mui/material/CardMedia";
+import Tooltip from "@mui/material/Tooltip";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDButton from "components/MDButton";
+import MDAvatar from "components/MDAvatar";
+
+// Declaring props types for DefaultProjectCard
+interface Props {
+  image: string;
+  label: string;
+  title: string;
+  description: string;
+  action: {
+    type: "external" | "internal";
+    route: string;
+    color:
+      | "primary"
+      | "secondary"
+      | "info"
+      | "success"
+      | "warning"
+      | "error"
+      | "light"
+      | "dark"
+      | "white";
+    label: string;
+  };
+  authors?: {
+    image: string;
+    name: string;
+  }[];
+  [key: string]: any;
+}
+
+function DefaultProjectCard({
+  image,
+  label,
+  title,
+  description,
+  action,
+  authors,
+}: Props): JSX.Element {
+  const renderAuthors = authors.map(({ image: media, name }) => (
+    <Tooltip key={name} title={name} placement="bottom">
+      <MDAvatar
+        src={media}
+        alt={name}
+        size="xs"
+        sx={({ borders: { borderWidth }, palette: { white } }) => ({
+          border: `${borderWidth[2]} solid ${white.main}`,
+          cursor: "pointer",
+          position: "relative",
+          ml: -1.25,
+
+          "&:hover, &:focus": {
+            zIndex: "10",
+          },
+        })}
+      />
+    </Tooltip>
+  ));
+
+  return (
+    <Card
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        overflow: "visible",
+      }}
+    >
+      <MDBox position="relative" width="100.25%" shadow="xl" borderRadius="xl">
+        <CardMedia
+          src={image}
+          component="img"
+          title={title}
+          sx={{
+            maxWidth: "100%",
+            margin: 0,
+            boxShadow: ({ boxShadows: { md } }) => md,
+            objectFit: "cover",
+            objectPosition: "center",
+          }}
+        />
+      </MDBox>
+      <MDBox mt={1} mx={0.5}>
+        <MDTypography variant="button" fontWeight="regular" color="text" textTransform="capitalize">
+          {label}
+        </MDTypography>
+        <MDBox mb={1}>
+          {action.type === "internal" ? (
+            <MDTypography
+              component={Link}
+              to={action.route}
+              variant="h5"
+              textTransform="capitalize"
+            >
+              {title}
+            </MDTypography>
+          ) : (
+            <MDTypography
+              component="a"
+              href={action.route}
+              target="_blank"
+              rel="noreferrer"
+              variant="h5"
+              textTransform="capitalize"
+            >
+              {title}
+            </MDTypography>
+          )}
+        </MDBox>
+        <MDBox mb={3} lineHeight={0}>
+          <MDTypography variant="button" fontWeight="light" color="text">
+            {description}
+          </MDTypography>
+        </MDBox>
+        <MDBox display="flex" justifyContent="space-between" alignItems="center">
+          {action.type === "internal" ? (
+            <MDButton
+              component={Link}
+              to={action.route}
+              variant="outlined"
+              size="small"
+              color={action.color}
+            >
+              {action.label}
+            </MDButton>
+          ) : (
+            <MDButton
+              component="a"
+              href={action.route}
+              target="_blank"
+              rel="noreferrer"
+              variant="outlined"
+              size="small"
+              color={action.color}
+            >
+              {action.label}
+            </MDButton>
+          )}
+          <MDBox display="flex">{renderAuthors}</MDBox>
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for DefaultProjectCard
+DefaultProjectCard.defaultProps = {
+  authors: [],
+};
+
+export default DefaultProjectCard;

src/examples/Cards/StatisticsCards/ComplexStatisticsCard/index.tsx

@@ -0,0 +1,97 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Declaring props types for CompleStatisticsCard
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+  title: string;
+  count: string | number;
+  percentage?: {
+    color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
+    amount: string | number;
+    label: string;
+  };
+  icon: ReactNode;
+  [key: string]: any;
+}
+
+function ComplexStatisticsCard({ color, title, count, percentage, icon }: Props): JSX.Element {
+  return (
+    <Card>
+      <MDBox display="flex" justifyContent="space-between" pt={1} px={2}>
+        <MDBox
+          variant="gradient"
+          bgColor={color}
+          color={color === "light" ? "dark" : "white"}
+          coloredShadow={color}
+          borderRadius="xl"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          width="4rem"
+          height="4rem"
+          mt={-3}
+        >
+          <Icon fontSize="medium" color="inherit">
+            {icon}
+          </Icon>
+        </MDBox>
+        <MDBox textAlign="right" lineHeight={1.25}>
+          <MDTypography variant="button" fontWeight="light" color="text">
+            {title}
+          </MDTypography>
+          <MDTypography variant="h4">{count}</MDTypography>
+        </MDBox>
+      </MDBox>
+      <Divider />
+      <MDBox pb={2} px={2}>
+        <MDTypography component="p" variant="button" color="text" display="flex">
+          <MDTypography
+            component="span"
+            variant="button"
+            fontWeight="bold"
+            color={percentage.color}
+          >
+            {percentage.amount}
+          </MDTypography>
+          &nbsp;{percentage.label}
+        </MDTypography>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring defualt props for ComplexStatisticsCard
+ComplexStatisticsCard.defaultProps = {
+  color: "info",
+  percentage: {
+    color: "success",
+    text: "",
+    label: "",
+  },
+};
+
+export default ComplexStatisticsCard;

src/examples/Cards/StatisticsCards/DefaultStatisticsCard/index.tsx

@@ -0,0 +1,114 @@
+/* eslint-disable no-unused-vars */
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 PRO React TS contexts
+import { useMaterialUIController } from "context";
+
+// Declaring prop types for DefaultStatisticsCard
+interface Props {
+  title: string;
+  count: string | number;
+  percentage?: {
+    color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
+    value: string | number;
+    label: string;
+  };
+  dropdown?: {
+    action: (...args: any) => void;
+    menu: ReactNode;
+    value: string;
+  };
+  [key: string]: any;
+}
+
+function DefaultStatisticsCard({ title, count, percentage, dropdown }: Props): JSX.Element {
+  const [controller] = useMaterialUIController();
+  const { darkMode } = controller;
+
+  return (
+    <Card>
+      <MDBox p={2}>
+        <Grid container>
+          <Grid item xs={7}>
+            <MDBox mb={0.5} lineHeight={1}>
+              <MDTypography
+                variant="button"
+                fontWeight="medium"
+                color="text"
+                textTransform="capitalize"
+              >
+                {title}
+              </MDTypography>
+            </MDBox>
+            <MDBox lineHeight={1}>
+              <MDTypography variant="h5" fontWeight="bold">
+                {count}
+              </MDTypography>
+              <MDTypography variant="button" fontWeight="bold" color={percentage.color}>
+                {percentage.value}&nbsp;
+                <MDTypography
+                  variant="button"
+                  fontWeight="regular"
+                  color={darkMode ? "text" : "secondary"}
+                >
+                  {percentage.label}
+                </MDTypography>
+              </MDTypography>
+            </MDBox>
+          </Grid>
+          <Grid item xs={5}>
+            {dropdown && (
+              <MDBox width="100%" textAlign="right" lineHeight={1}>
+                <MDTypography
+                  variant="caption"
+                  color="secondary"
+                  fontWeight="regular"
+                  sx={{ cursor: "pointer" }}
+                  onClick={dropdown.action}
+                >
+                  {dropdown.value}
+                </MDTypography>
+                {dropdown.menu}
+              </MDBox>
+            )}
+          </Grid>
+        </Grid>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Setting default values for the props of DefaultStatisticsCard
+DefaultStatisticsCard.defaultProps = {
+  percentage: {
+    color: "success",
+    value: "",
+    label: "",
+  },
+  dropdown: false,
+};
+
+export default DefaultStatisticsCard;

src/examples/Cards/StatisticsCards/MiniStatisticsCard/index.tsx

@@ -0,0 +1,161 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController } from "context";
+
+// Decalaring props types for MiniStatisticsCard
+interface Props {
+  bgColor?: "white" | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  title?: {
+    fontWeight?: "light" | "regular" | "medium" | "bold";
+    text?: string;
+  };
+  count: string | number;
+  percentage?: {
+    color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
+    text: string | number;
+  };
+  icon: {
+    color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+    component: ReactNode;
+  };
+  direction?: "right" | "left";
+  [key: string]: any;
+}
+
+function MiniStatisticsCard({
+  bgColor,
+  title,
+  count,
+  percentage,
+  icon,
+  direction,
+}: Props): JSX.Element {
+  const [controller] = useMaterialUIController();
+  const { darkMode } = controller;
+
+  return (
+    <Card sx={{ overflow: "hidden" }}>
+      <MDBox
+        bgColor={bgColor}
+        variant="gradient"
+        sx={({ palette: { background } }: { palette: any }) => ({
+          background: darkMode && background.card,
+        })}
+      >
+        <MDBox p={2}>
+          <Grid container alignItems="center">
+            {direction === "left" ? (
+              <Grid item xs={4}>
+                <MDBox
+                  variant="gradient"
+                  bgColor={bgColor === "white" ? icon.color : "white"}
+                  color={bgColor === "white" ? "white" : "dark"}
+                  width="4rem"
+                  height="4rem"
+                  borderRadius="md"
+                  display="flex"
+                  justifyContent="center"
+                  alignItems="center"
+                  shadow="md"
+                >
+                  <Icon fontSize="medium" color="inherit">
+                    {icon.component}
+                  </Icon>
+                </MDBox>
+              </Grid>
+            ) : null}
+            <Grid item xs={8}>
+              <MDBox
+                ml={direction === "left" ? 2 : 0}
+                lineHeight={1}
+                textAlign={direction === "left" ? "right" : "left"}
+              >
+                <MDTypography
+                  variant="button"
+                  color={bgColor === "white" ? "text" : "white"}
+                  opacity={bgColor === "white" ? 1 : 0.7}
+                  textTransform="capitalize"
+                  fontWeight={title.fontWeight}
+                >
+                  {title.text}
+                </MDTypography>
+                <MDTypography
+                  variant="h5"
+                  fontWeight="bold"
+                  color={bgColor === "white" ? "dark" : "white"}
+                >
+                  {count}{" "}
+                  <MDTypography variant="button" color={percentage.color} fontWeight="bold">
+                    {percentage.text}
+                  </MDTypography>
+                </MDTypography>
+              </MDBox>
+            </Grid>
+            {direction === "right" ? (
+              <Grid item xs={4}>
+                <MDBox
+                  variant="gradient"
+                  bgColor={bgColor === "white" ? icon.color : "white"}
+                  color={bgColor === "white" ? "white" : "dark"}
+                  width="4rem"
+                  height="4rem"
+                  marginLeft="auto"
+                  borderRadius="md"
+                  display="flex"
+                  justifyContent="center"
+                  alignItems="center"
+                  shadow="md"
+                >
+                  <Icon fontSize="medium" color="inherit">
+                    {icon.component}
+                  </Icon>
+                </MDBox>
+              </Grid>
+            ) : null}
+          </Grid>
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for MiniStatisticsCard
+MiniStatisticsCard.defaultProps = {
+  bgColor: "white",
+  title: {
+    fontWeight: "light",
+    text: "",
+  },
+  percentage: {
+    color: "success",
+    text: "",
+  },
+  direction: "right",
+};
+
+export default MiniStatisticsCard;

src/examples/Charts/BarCharts/HorizontalBarChart/configs/index.ts

@@ -0,0 +1,80 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+function configs(labels: any, datasets: any) {
+  return {
+    data: {
+      labels,
+      datasets: [...datasets],
+    },
+    options: {
+      indexAxis: "y",
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+            color: "#c1c4ce5c",
+          },
+          ticks: {
+            display: true,
+            padding: 10,
+            color: "#9ca2b7",
+            font: {
+              size: 14,
+              weight: 300,
+              family: "Roboto",
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: true,
+            drawTicks: true,
+            color: "#c1c4ce5c",
+          },
+          ticks: {
+            display: true,
+            color: "#9ca2b7",
+            padding: 10,
+            font: {
+              size: 14,
+              weight: 300,
+              family: "Roboto",
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/BarCharts/HorizontalBarChart/index.tsx

@@ -0,0 +1,126 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode, useMemo } from "react";
+
+// react-chartjs-2 components
+import { Bar } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// HorizontalBarChart configurations
+import configs from "examples/Charts/BarCharts/HorizontalBarChart/configs";
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+// Declaring props types for HorizontalBarChart
+interface Props {
+  icon?: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    component: ReactNode;
+  };
+  title?: string;
+  description?: string | ReactNode;
+  height?: string | number;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+      data: number[];
+    }[];
+  };
+  [key: string]: any;
+}
+
+function HorizontalBarChart({ icon, title, description, height, chart }: Props): JSX.Element {
+  const chartDatasets = chart.datasets
+    ? chart.datasets.map((dataset) => ({
+        ...dataset,
+        weight: 5,
+        borderWidth: 0,
+        borderRadius: 4,
+        backgroundColor: colors[dataset.color]
+          ? colors[dataset.color || "dark"].main
+          : colors.dark.main,
+        fill: false,
+        maxBarThickness: 35,
+      }))
+    : [];
+
+  const { data, options } = configs(chart.labels || [], chartDatasets);
+
+  const renderChart = (
+    <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+      {title || description ? (
+        <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+          {icon.component && (
+            <MDBox
+              width="4rem"
+              height="4rem"
+              bgColor={icon.color || "info"}
+              variant="gradient"
+              coloredShadow={icon.color || "info"}
+              borderRadius="xl"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              color="white"
+              mt={-5}
+              mr={2}
+            >
+              <Icon fontSize="medium">{icon.component}</Icon>
+            </MDBox>
+          )}
+          <MDBox mt={icon.component ? -2 : 0}>
+            {title && <MDTypography variant="h6">{title}</MDTypography>}
+            <MDBox mb={2}>
+              <MDTypography component="div" variant="button" color="text">
+                {description}
+              </MDTypography>
+            </MDBox>
+          </MDBox>
+        </MDBox>
+      ) : null}
+      {useMemo(
+        () => (
+          <MDBox height={height}>
+            <Bar data={data} options={options} />
+          </MDBox>
+        ),
+        [chart, height]
+      )}
+    </MDBox>
+  );
+
+  return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props HorizontalBarChart
+HorizontalBarChart.defaultProps = {
+  icon: { color: "info", component: "" },
+  title: "",
+  description: "",
+  height: "19.125rem",
+};
+
+export default HorizontalBarChart;

src/examples/Charts/BarCharts/ReportsBarChart/configs/index.ts

@@ -0,0 +1,97 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+function configs(labels: any, datasets: any) {
+  return {
+    data: {
+      labels,
+      datasets: [
+        {
+          label: datasets.label,
+          tension: 0.4,
+          borderWidth: 0,
+          borderRadius: 4,
+          borderSkipped: false,
+          backgroundColor: "rgba(255, 255, 255, 0.8)",
+          data: datasets.data,
+          maxBarThickness: 6,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "index",
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+            color: "rgba(255, 255, 255, .2)",
+          },
+          ticks: {
+            suggestedMin: 0,
+            suggestedMax: 500,
+            beginAtZero: true,
+            padding: 10,
+            font: {
+              size: 14,
+              weight: 300,
+              family: "Roboto",
+              style: "normal",
+              lineHeight: 2,
+            },
+            color: "#fff",
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+            color: "rgba(255, 255, 255, .2)",
+          },
+          ticks: {
+            display: true,
+            color: "#f8f9fa",
+            padding: 10,
+            font: {
+              size: 14,
+              weight: 300,
+              family: "Roboto",
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/BarCharts/ReportsBarChart/index.tsx

@@ -0,0 +1,100 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { Bar } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// ReportsBarChart configurations
+import configs from "examples/Charts/BarCharts/ReportsBarChart/configs";
+
+// Declaring props types for ReportsBarChart
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  title: string;
+  description?: string | ReactNode;
+  date: string;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      data: number[];
+    };
+  };
+  [key: string]: any;
+}
+
+function ReportsBarChart({ color, title, description, date, chart }: Props): JSX.Element {
+  const { data, options } = configs(chart.labels || [], chart.datasets || {});
+
+  return (
+    <Card sx={{ height: "100%" }}>
+      <MDBox padding="1rem">
+        {useMemo(
+          () => (
+            <MDBox
+              variant="gradient"
+              bgColor={color}
+              borderRadius="lg"
+              coloredShadow={color}
+              py={2}
+              pr={0.5}
+              mt={-5}
+              height="12.5rem"
+            >
+              <Bar data={data} options={options} />
+            </MDBox>
+          ),
+          [chart, color]
+        )}
+        <MDBox pt={3} pb={1} px={1}>
+          <MDTypography variant="h6" textTransform="capitalize">
+            {title}
+          </MDTypography>
+          <MDTypography component="div" variant="button" color="text" fontWeight="light">
+            {description}
+          </MDTypography>
+          <Divider />
+          <MDBox display="flex" alignItems="center">
+            <MDTypography variant="button" color="text" lineHeight={1} sx={{ mt: 0.15, mr: 0.5 }}>
+              <Icon>schedule</Icon>
+            </MDTypography>
+            <MDTypography variant="button" color="text" fontWeight="light">
+              {date}
+            </MDTypography>
+          </MDBox>
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Setting default values for the props of ReportsBarChart
+ReportsBarChart.defaultProps = {
+  color: "dark",
+  description: "",
+};
+
+export default ReportsBarChart;

src/examples/Charts/BarCharts/VerticalBarChart/configs/index.ts

@@ -0,0 +1,78 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import typography from "assets/theme/base/typography";
+
+function configs(labels: any, datasets: any) {
+  return {
+    data: {
+      labels,
+      datasets: [...datasets],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+          },
+          ticks: {
+            display: true,
+            padding: 10,
+            color: "#9ca2b7",
+            font: {
+              size: 11,
+              family: typography.fontFamily,
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: true,
+            drawTicks: true,
+          },
+          ticks: {
+            display: true,
+            color: "#9ca2b7",
+            padding: 10,
+            font: {
+              size: 11,
+              family: typography.fontFamily,
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/BarCharts/VerticalBarChart/index.tsx

@@ -0,0 +1,126 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { Bar } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// VerticalBarChart configurations
+import configs from "examples/Charts/BarCharts/VerticalBarChart/configs";
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+// Declaring props types for HorizontalBarChart
+interface Props {
+  icon?: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    component: ReactNode;
+  };
+  title?: string;
+  description?: string | ReactNode;
+  height?: string | number;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+      data: number[];
+    }[];
+  };
+  [key: string]: any;
+}
+
+function VerticalBarChart({ icon, title, description, height, chart }: Props): JSX.Element {
+  const chartDatasets = chart.datasets
+    ? chart.datasets.map((dataset) => ({
+        ...dataset,
+        weight: 5,
+        borderWidth: 0,
+        borderRadius: 4,
+        backgroundColor: colors[dataset.color]
+          ? colors[dataset.color || "dark"].main
+          : colors.dark.main,
+        fill: false,
+        maxBarThickness: 35,
+      }))
+    : [];
+
+  const { data, options } = configs(chart.labels || [], chartDatasets);
+
+  const renderChart = (
+    <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+      {title || description ? (
+        <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+          {icon.component && (
+            <MDBox
+              width="4rem"
+              height="4rem"
+              bgColor={icon.color || "info"}
+              variant="gradient"
+              coloredShadow={icon.color || "info"}
+              borderRadius="xl"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              color="white"
+              mt={-5}
+              mr={2}
+            >
+              <Icon fontSize="medium">{icon.component}</Icon>
+            </MDBox>
+          )}
+          <MDBox mt={icon.component ? -2 : 0}>
+            {title && <MDTypography variant="h6">{title}</MDTypography>}
+            <MDBox mb={2}>
+              <MDTypography component="div" variant="button" color="text">
+                {description}
+              </MDTypography>
+            </MDBox>
+          </MDBox>
+        </MDBox>
+      ) : null}
+      {useMemo(
+        () => (
+          <MDBox height={height}>
+            <Bar data={data} options={options} />
+          </MDBox>
+        ),
+        [chart, height]
+      )}
+    </MDBox>
+  );
+
+  return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props for VerticalBarChart
+VerticalBarChart.defaultProps = {
+  icon: { color: "info", component: "" },
+  title: "",
+  description: "",
+  height: "19.125rem",
+};
+
+export default VerticalBarChart;

src/examples/Charts/BubbleChart/configs/index.ts

@@ -0,0 +1,78 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import typography from "assets/theme/base/typography";
+
+function configs(labels: any, datasets: any) {
+  return {
+    data: {
+      labels,
+      datasets: [...datasets],
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+          },
+          ticks: {
+            display: true,
+            padding: 10,
+            color: "#b2b9bf",
+            font: {
+              size: 11,
+              family: typography.fontFamily,
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+          },
+          ticks: {
+            display: true,
+            color: "#b2b9bf",
+            padding: 10,
+            font: {
+              size: 11,
+              family: typography.fontFamily,
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/BubbleChart/index.tsx

@@ -0,0 +1,132 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { Bubble } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// BubbleChart configurations
+import configs from "examples/Charts/BubbleChart/configs";
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+// Declaring props types for BubbleChart
+interface Props {
+  icon?: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    component: ReactNode;
+  };
+  title?: string;
+  description?: string | ReactNode;
+  height?: string | number;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+      data: {
+        x: number;
+        y: number;
+        r: number;
+      }[];
+    }[];
+  };
+  [key: string]: any;
+}
+
+function BubbleChart({ icon, title, description, height, chart }: Props): JSX.Element {
+  const chartDatasets = chart.datasets
+    ? chart.datasets.map((dataset) => ({
+        ...dataset,
+        tension: 0.4,
+        borderWidth: 3,
+        pointRadius: 2,
+        backgroundColor: colors[dataset.color]
+          ? colors[dataset.color || "dark"].main
+          : colors.dark.main,
+        borderColor: colors[dataset.color]
+          ? colors[dataset.color || "dark"].main
+          : colors.dark.main,
+        maxBarThickness: 6,
+      }))
+    : [];
+
+  const { data, options } = configs(chart.labels || [], chartDatasets);
+
+  const renderChart = (
+    <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+      {title || description ? (
+        <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+          {icon.component && (
+            <MDBox
+              width="4rem"
+              height="4rem"
+              bgColor={icon.color || "info"}
+              variant="gradient"
+              coloredShadow={icon.color || "info"}
+              borderRadius="xl"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              color="white"
+              mt={-5}
+              mr={2}
+            >
+              <Icon fontSize="medium">{icon.component}</Icon>
+            </MDBox>
+          )}
+          <MDBox mt={icon.component ? -2 : 0}>
+            {title && <MDTypography variant="h6">{title}</MDTypography>}
+            <MDBox mb={2}>
+              <MDTypography component="div" variant="button" color="text">
+                {description}
+              </MDTypography>
+            </MDBox>
+          </MDBox>
+        </MDBox>
+      ) : null}
+      {useMemo(
+        () => (
+          <MDBox height={height}>
+            <Bubble data={data} options={options} />
+          </MDBox>
+        ),
+        [chart, height]
+      )}
+    </MDBox>
+  );
+
+  return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props for BubbleChart
+BubbleChart.defaultProps = {
+  icon: { color: "info", component: "" },
+  title: "",
+  description: "",
+  height: "100%",
+};
+
+export default BubbleChart;

src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs/index.ts

@@ -0,0 +1,98 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+/* eslint-disable no-dupe-keys */
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+const { gradients, dark } = colors;
+
+function configs(labels: any, datasets: any, cutout: number = 60) {
+  const backgroundColors = [];
+
+  if (datasets.backgroundColors) {
+    datasets.backgroundColors.forEach((color: string) => {
+      if (gradients[color]) {
+        if (color === "info") {
+          backgroundColors.push(gradients.info.main);
+        } else {
+          backgroundColors.push(gradients[color].state);
+        }
+      } else {
+        backgroundColors.push(dark.main);
+      }
+    });
+  } else {
+    backgroundColors.push(dark.main);
+  }
+
+  return {
+    data: {
+      labels,
+      datasets: [
+        {
+          label: datasets.label,
+          weight: 9,
+          cutout,
+          tension: 0.9,
+          pointRadius: 2,
+          borderWidth: 2,
+          backgroundColor: backgroundColors,
+          fill: false,
+          data: datasets.data,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "index",
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: false,
+            drawTicks: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: false,
+            drawTicks: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/index.tsx

@@ -0,0 +1,110 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { Doughnut } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// DefaultDoughnutChart configurations
+import configs from "examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs";
+
+// Declaring props types for DefaultDoughnutChart
+interface Props {
+  icon?: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    component: ReactNode;
+  };
+  title?: string;
+  description?: string | ReactNode;
+  height?: string | number;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      backgroundColors: string[];
+      data: number[];
+    };
+    cutout?: number;
+  };
+  [key: string]: any;
+}
+
+function DefaultDoughnutChart({ icon, title, description, height, chart }: Props): JSX.Element {
+  const { data, options } = configs(chart.labels || [], chart.datasets || {}, chart.cutout);
+
+  const renderChart = (
+    <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+      {title || description ? (
+        <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+          {icon.component && (
+            <MDBox
+              width="4rem"
+              height="4rem"
+              bgColor={icon.color || "info"}
+              variant="gradient"
+              coloredShadow={icon.color || "info"}
+              borderRadius="xl"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              color="white"
+              mt={-5}
+              mr={2}
+            >
+              <Icon fontSize="medium">{icon.component}</Icon>
+            </MDBox>
+          )}
+          <MDBox mt={icon.component ? -2 : 0}>
+            {title && <MDTypography variant="h6">{title}</MDTypography>}
+            <MDBox mb={2}>
+              <MDTypography component="div" variant="button" color="text">
+                {description}
+              </MDTypography>
+            </MDBox>
+          </MDBox>
+        </MDBox>
+      ) : null}
+      {useMemo(
+        () => (
+          <MDBox height={height}>
+            <Doughnut data={data} options={options} />
+          </MDBox>
+        ),
+        [chart, height]
+      )}
+    </MDBox>
+  );
+
+  return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props DefaultDoughnutChart
+DefaultDoughnutChart.defaultProps = {
+  icon: { color: "info", component: "" },
+  title: "",
+  description: "",
+  height: "19.125rem",
+};
+
+export default DefaultDoughnutChart;

src/examples/Charts/LineCharts/DefaultLineChart/configs/index.ts

@@ -0,0 +1,84 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+function configs(labels: any, datasets: any) {
+  return {
+    data: {
+      labels,
+      datasets: [...datasets],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "index",
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+            color: "#c1c4ce5c",
+          },
+          ticks: {
+            display: true,
+            padding: 10,
+            color: "#9ca2b7",
+            font: {
+              size: 14,
+              weight: 300,
+              family: "Roboto",
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: true,
+            borderDash: [5, 5],
+            color: "#c1c4ce5c",
+          },
+          ticks: {
+            display: true,
+            color: "#9ca2b7",
+            padding: 10,
+            font: {
+              size: 14,
+              weight: 300,
+              family: "Roboto",
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/LineCharts/DefaultLineChart/index.tsx

@@ -0,0 +1,130 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { Line } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// DefaultLineChart configurations
+import configs from "examples/Charts/LineCharts/DefaultLineChart/configs";
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+// Declaring props types for DefaultLineChart
+interface Props {
+  icon?: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    component: ReactNode;
+  };
+  title?: string;
+  description?: string | ReactNode;
+  height?: string | number;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+      data: number[];
+    }[];
+  };
+  [key: string]: any;
+}
+
+function DefaultLineChart({ icon, title, description, height, chart }: Props): JSX.Element {
+  const chartDatasets = chart.datasets
+    ? chart.datasets.map((dataset) => ({
+        ...dataset,
+        tension: 0,
+        pointRadius: 3,
+        borderWidth: 4,
+        backgroundColor: "transparent",
+        fill: true,
+        pointBackgroundColor: colors[dataset.color]
+          ? colors[dataset.color || "dark"].main
+          : colors.dark.main,
+        borderColor: colors[dataset.color]
+          ? colors[dataset.color || "dark"].main
+          : colors.dark.main,
+        maxBarThickness: 6,
+      }))
+    : [];
+
+  const { data, options } = configs(chart.labels || [], chartDatasets);
+
+  const renderChart = (
+    <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+      {title || description ? (
+        <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+          {icon.component && (
+            <MDBox
+              width="4rem"
+              height="4rem"
+              bgColor={icon.color || "info"}
+              variant="gradient"
+              coloredShadow={icon.color || "info"}
+              borderRadius="xl"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              color="white"
+              mt={-5}
+              mr={2}
+            >
+              <Icon fontSize="medium">{icon.component}</Icon>
+            </MDBox>
+          )}
+          <MDBox mt={icon.component ? -2 : 0}>
+            {title && <MDTypography variant="h6">{title}</MDTypography>}
+            <MDBox mb={2}>
+              <MDTypography component="div" variant="button" color="text">
+                {description}
+              </MDTypography>
+            </MDBox>
+          </MDBox>
+        </MDBox>
+      ) : null}
+      {useMemo(
+        () => (
+          <MDBox height={height}>
+            <Line data={data} options={options} />
+          </MDBox>
+        ),
+        [chart, height]
+      )}
+    </MDBox>
+  );
+
+  return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props DefaultLineChart
+DefaultLineChart.defaultProps = {
+  icon: { color: "info", component: "" },
+  title: "",
+  description: "",
+  height: "19.125rem",
+};
+
+export default DefaultLineChart;

src/examples/Charts/LineCharts/GradientLineChart/configs/index.ts

@@ -0,0 +1,83 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import typography from "assets/theme/base/typography";
+
+function configs(labels: any, datasets: any) {
+  return {
+    data: {
+      labels,
+      datasets: [...datasets],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "index",
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+          },
+          ticks: {
+            display: true,
+            padding: 10,
+            color: "#b2b9bf",
+            font: {
+              size: 11,
+              family: typography.fontFamily,
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: false,
+            drawTicks: false,
+            borderDash: [5, 5],
+          },
+          ticks: {
+            display: true,
+            color: "#b2b9bf",
+            padding: 20,
+            font: {
+              size: 11,
+              family: typography.fontFamily,
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/LineCharts/GradientLineChart/index.tsx

@@ -0,0 +1,139 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useRef, useEffect, useState, useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { Line } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import gradientChartLine from "assets/theme/functions/gradientChartLine";
+
+// GradientLineChart configurations
+import configs from "examples/Charts/LineCharts/GradientLineChart/configs";
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+// Declaring props types for GradientLineChart
+interface Props {
+  icon?: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    component: ReactNode;
+  };
+  title?: string;
+  description?: string | ReactNode;
+  height?: string | number;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+      data: number[];
+    }[];
+  };
+  [key: string]: any;
+}
+
+function GradientLineChart({ icon, title, description, height, chart }: Props): JSX.Element {
+  const chartRef = useRef(null);
+  const [chartData, setChartData] = useState({});
+  const { data, options }: any = chartData;
+
+  useEffect(() => {
+    const chartDatasets = chart.datasets
+      ? chart.datasets.map((dataset) => ({
+          ...dataset,
+          tension: 0,
+          pointRadius: 0,
+          borderWidth: 4,
+          borderColor: colors[dataset.color]
+            ? colors[dataset.color || "dark"].main
+            : colors.dark.main,
+          fill: true,
+          maxBarThickness: 6,
+          backgroundColor: gradientChartLine(
+            chartRef.current.children[0],
+            colors[dataset.color] ? colors[dataset.color || "dark"].main : colors.dark.main
+          ),
+        }))
+      : [];
+
+    setChartData(configs(chart.labels || [], chartDatasets));
+  }, [chart]);
+
+  const renderChart = (
+    <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+      {title || description ? (
+        <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+          {icon.component && (
+            <MDBox
+              width="4rem"
+              height="4rem"
+              bgColor={icon.color || "info"}
+              variant="gradient"
+              coloredShadow={icon.color || "info"}
+              borderRadius="xl"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              color="white"
+              mt={-5}
+              mr={2}
+            >
+              <Icon fontSize="medium">{icon.component}</Icon>
+            </MDBox>
+          )}
+          <MDBox mt={icon.component ? -2 : 0}>
+            {title && <MDTypography variant="h6">{title}</MDTypography>}
+            <MDBox mb={2}>
+              <MDTypography component="div" variant="button" color="text">
+                {description}
+              </MDTypography>
+            </MDBox>
+          </MDBox>
+        </MDBox>
+      ) : null}
+      {useMemo(
+        () => (
+          <MDBox ref={chartRef} sx={{ height }}>
+            <Line data={data} options={options} />
+          </MDBox>
+        ),
+        [chartData, height]
+      )}
+    </MDBox>
+  );
+
+  return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props for GradientLineChart
+GradientLineChart.defaultProps = {
+  icon: { color: "info", component: "" },
+  title: "",
+  description: "",
+  height: "19.125rem",
+};
+
+export default GradientLineChart;

src/examples/Charts/LineCharts/ProgressLineChart/config/index.ts

@@ -0,0 +1,103 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+/* eslint-disable no-dupe-keys */
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+const { gradients } = colors;
+
+function configs(color: string, labels: any, label: any, data: any) {
+  return {
+    data: {
+      labels,
+      datasets: [
+        {
+          label,
+          tension: 0,
+          pointRadius: 3,
+          pointBackgroundColor: gradients[color] ? gradients[color].main : gradients.info.main,
+          borderColor: gradients[color] ? gradients[color].main : gradients.info.main,
+          borderWidth: 4,
+          backgroundColor: "transparent",
+          maxBarThickness: 6,
+          fill: true,
+          data,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "index",
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+          },
+          ticks: {
+            display: true,
+            padding: 10,
+            color: "#9ca2b7",
+            font: {
+              size: 14,
+              weight: 300,
+              family: "Roboto",
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+            color: "#c1c4ce5c",
+          },
+          ticks: {
+            display: true,
+            padding: 10,
+            color: "#9ca2b7",
+            font: {
+              size: 14,
+              weight: 300,
+              family: "Roboto",
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/LineCharts/ProgressLineChart/index.tsx

@@ -0,0 +1,119 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { Line } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDProgress from "components/MDProgress";
+
+// ProgressLineChart configurations
+import configs from "examples/Charts/LineCharts/ProgressLineChart/config";
+
+// Declaring props types for GradientLineChart
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  icon: ReactNode;
+  title: string;
+  count?: string | number;
+  progress: number;
+  height?: string | number;
+  chart: {
+    labels: string[];
+    data: number[];
+  };
+  [key: string]: any;
+}
+
+function ProgressLineChart({
+  color,
+  icon,
+  title,
+  count,
+  progress,
+  height,
+  chart,
+}: Props): JSX.Element {
+  const { data, options } = configs(color, chart.labels || [], title, chart.data || []);
+
+  return (
+    <Card>
+      <MDBox display="flex" alignItems="center" pt={2} px={2}>
+        <MDBox
+          width="3rem"
+          height="3rem"
+          display="grid"
+          justifyContent="center"
+          alignItems="center"
+          borderRadius="md"
+          shadow="md"
+          color="white"
+          bgColor={color}
+          variant="gradient"
+        >
+          <Icon>{icon}</Icon>
+        </MDBox>
+        <MDBox ml={2} lineHeight={1}>
+          <MDTypography
+            variant="button"
+            fontWeight="regular"
+            textTransform="capitalize"
+            color="text"
+          >
+            {title}
+          </MDTypography>
+          {count ? (
+            <MDTypography variant="h5" fontWeight="bold">
+              {count}
+            </MDTypography>
+          ) : null}
+        </MDBox>
+        <MDBox width="25%" ml="auto">
+          <MDTypography display="block" variant="caption" fontWeight="medium" color="text">
+            {progress}%
+          </MDTypography>
+          <MDBox mt={0.25}>
+            <MDProgress variant="gradient" color={color} value={progress} />
+          </MDBox>
+        </MDBox>
+      </MDBox>
+      {useMemo(
+        () => (
+          <MDBox mt={2}>
+            <Line data={data} options={options} style={{ height }} />
+          </MDBox>
+        ),
+        [chart, height, color]
+      )}
+    </Card>
+  );
+}
+
+// Declaring default props for ProgressLineChart
+ProgressLineChart.defaultProps = {
+  color: "info",
+  count: 0,
+  height: "6.25rem",
+};
+
+export default ProgressLineChart;

src/examples/Charts/LineCharts/ReportsLineChart/configs/index.ts

@@ -0,0 +1,97 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+function configs(labels: any, datasets: any) {
+  return {
+    data: {
+      labels,
+      datasets: [
+        {
+          label: datasets.label,
+          tension: 0,
+          pointRadius: 5,
+          pointBorderColor: "transparent",
+          pointBackgroundColor: "rgba(255, 255, 255, .8)",
+          borderColor: "rgba(255, 255, 255, .8)",
+          borderWidth: 4,
+          backgroundColor: "transparent",
+          fill: true,
+          data: datasets.data,
+          maxBarThickness: 6,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "index",
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+            color: "rgba(255, 255, 255, .2)",
+          },
+          ticks: {
+            display: true,
+            color: "#f8f9fa",
+            padding: 10,
+            font: {
+              size: 14,
+              weight: 300,
+              family: "Roboto",
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: false,
+            drawTicks: false,
+            borderDash: [5, 5],
+          },
+          ticks: {
+            display: true,
+            color: "#f8f9fa",
+            padding: 10,
+            font: {
+              size: 14,
+              weight: 300,
+              family: "Roboto",
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/LineCharts/ReportsLineChart/index.tsx

@@ -0,0 +1,100 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { Line } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// ReportsLineChart configurations
+import configs from "examples/Charts/LineCharts/ReportsLineChart/configs";
+
+// Declaring props types for ReportsLineChart
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  title: string;
+  description?: string | ReactNode;
+  date: string;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      data: number[];
+    };
+  };
+  [key: string]: any;
+}
+
+function ReportsLineChart({ color, title, description, date, chart }: Props): JSX.Element {
+  const { data, options } = configs(chart.labels || [], chart.datasets || {});
+
+  return (
+    <Card sx={{ height: "100%" }}>
+      <MDBox padding="1rem">
+        {useMemo(
+          () => (
+            <MDBox
+              variant="gradient"
+              bgColor={color}
+              borderRadius="lg"
+              coloredShadow={color}
+              py={2}
+              pr={0.5}
+              mt={-5}
+              height="12.5rem"
+            >
+              <Line data={data} options={options} />
+            </MDBox>
+          ),
+          [chart, color]
+        )}
+        <MDBox pt={3} pb={1} px={1}>
+          <MDTypography variant="h6" textTransform="capitalize">
+            {title}
+          </MDTypography>
+          <MDTypography component="div" variant="button" color="text" fontWeight="light">
+            {description}
+          </MDTypography>
+          <Divider />
+          <MDBox display="flex" alignItems="center">
+            <MDTypography variant="button" color="text" lineHeight={1} sx={{ mt: 0.15, mr: 0.5 }}>
+              <Icon>schedule</Icon>
+            </MDTypography>
+            <MDTypography variant="button" color="text" fontWeight="light">
+              {date}
+            </MDTypography>
+          </MDBox>
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for ReportsLineChart
+ReportsLineChart.defaultProps = {
+  color: "dark",
+  description: "",
+};
+
+export default ReportsLineChart;

src/examples/Charts/MixedChart/configs/index.ts

@@ -0,0 +1,83 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import typography from "assets/theme/base/typography";
+
+function configs(labels: any, datasets: any) {
+  return {
+    data: {
+      labels,
+      datasets: [...datasets],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "index",
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
+          },
+          ticks: {
+            display: true,
+            padding: 10,
+            color: "#b2b9bf",
+            font: {
+              size: 11,
+              family: typography.fontFamily,
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: true,
+            borderDash: [5, 5],
+          },
+          ticks: {
+            display: true,
+            color: "#b2b9bf",
+            padding: 10,
+            font: {
+              size: 11,
+              family: typography.fontFamily,
+              style: "normal",
+              lineHeight: 2,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/MixedChart/index.tsx

@@ -0,0 +1,198 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useRef, useEffect, useState, useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { Line } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import gradientChartLine from "assets/theme/functions/gradientChartLine";
+
+// MixedChart configurations
+import configs from "examples/Charts/MixedChart/configs";
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+// Declaring props types for MixedChart
+interface Props {
+  icon?: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    component: ReactNode;
+  };
+  title?: string;
+  description?: string | ReactNode;
+  height?: string | number;
+  chart: {
+    labels: string[];
+    datasets: {
+      chartType: string;
+      label: string;
+      color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+      data: number[];
+    }[];
+  };
+  [key: string]: any;
+}
+
+function MixedChart({ icon, title, description, height, chart }: Props): JSX.Element {
+  const chartRef = useRef(null);
+  const [chartData, setChartData] = useState({});
+  const { data, options }: any = chartData;
+
+  useEffect(() => {
+    const chartDatasets = chart.datasets
+      ? chart.datasets.map((dataset) => {
+          let finalConfigs;
+
+          const defaultLine = {
+            ...dataset,
+            type: "line",
+            tension: 0,
+            borderWidth: 4,
+            pointRadius: 2,
+            pointBackgroundColor: colors[dataset.color]
+              ? colors[dataset.color || "dark"].main
+              : colors.dark.main,
+            borderColor: colors[dataset.color]
+              ? colors[dataset.color || "dark"].main
+              : colors.dark.main,
+            maxBarThickness: 6,
+          };
+
+          const gradientLine = {
+            ...dataset,
+            type: "line",
+            tension: 0,
+            pointRadius: 0,
+            borderWidth: 4,
+            borderColor: colors[dataset.color]
+              ? colors[dataset.color || "dark"].main
+              : colors.dark.main,
+            fill: true,
+            maxBarThickness: 6,
+            backgroundColor: gradientChartLine(
+              chartRef.current.children[0],
+              colors[dataset.color] ? colors[dataset.color || "dark"].main : colors.dark.main
+            ),
+          };
+
+          const bar = {
+            ...dataset,
+            type: "bar",
+            weight: 5,
+            borderWidth: 0,
+            borderRadius: 4,
+            backgroundColor: colors[dataset.color]
+              ? colors[dataset.color || "dark"].main
+              : colors.dark.main,
+            fill: false,
+            maxBarThickness: 35,
+          };
+
+          const thinBar = {
+            ...dataset,
+            type: "bar",
+            weight: 5,
+            borderWidth: 0,
+            borderRadius: 4,
+            backgroundColor: colors[dataset.color]
+              ? colors[dataset.color || "dark"].main
+              : colors.dark.main,
+            fill: false,
+            maxBarThickness: 10,
+          };
+
+          if (dataset.chartType === "default-line") {
+            finalConfigs = defaultLine;
+          } else if (dataset.chartType === "gradient-line") {
+            finalConfigs = gradientLine;
+          } else if (dataset.chartType === "thin-bar") {
+            finalConfigs = thinBar;
+          } else {
+            finalConfigs = bar;
+          }
+
+          return { ...finalConfigs };
+        })
+      : [];
+
+    setChartData(configs(chart.labels || [], chartDatasets));
+  }, [chart]);
+
+  const renderChart = (
+    <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+      {title || description ? (
+        <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+          {icon.component && (
+            <MDBox
+              width="4rem"
+              height="4rem"
+              bgColor={icon.color || "info"}
+              variant="gradient"
+              coloredShadow={icon.color || "info"}
+              borderRadius="xl"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              color="white"
+              mt={-5}
+              mr={2}
+            >
+              <Icon fontSize="medium">{icon.component}</Icon>
+            </MDBox>
+          )}
+          <MDBox mt={icon.component ? -2 : 0}>
+            {title && <MDTypography variant="h6">{title}</MDTypography>}
+            <MDBox mb={2}>
+              <MDTypography component="div" variant="button" color="text">
+                {description}
+              </MDTypography>
+            </MDBox>
+          </MDBox>
+        </MDBox>
+      ) : null}
+      {useMemo(
+        () => (
+          <MDBox ref={chartRef} sx={{ height }}>
+            <Line data={data} options={options} />
+          </MDBox>
+        ),
+        [chartData, height]
+      )}
+    </MDBox>
+  );
+
+  return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props for MixedChart
+MixedChart.defaultProps = {
+  icon: { color: "info", component: "" },
+  title: "",
+  description: "",
+  height: "19.125rem",
+};
+
+export default MixedChart;

src/examples/Charts/PieChart/configs/index.ts

@@ -0,0 +1,92 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+/* eslint-disable no-dupe-keys */
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+const { gradients, dark } = colors;
+
+function configs(labels: any, datasets: any) {
+  const backgroundColors = [];
+
+  if (datasets.backgroundColors) {
+    datasets.backgroundColors.forEach((color: string) =>
+      gradients[color]
+        ? backgroundColors.push(gradients[color].state)
+        : backgroundColors.push(dark.main)
+    );
+  } else {
+    backgroundColors.push(dark.main);
+  }
+
+  return {
+    data: {
+      labels,
+      datasets: [
+        {
+          label: datasets.label,
+          weight: 9,
+          cutout: 0,
+          tension: 0.9,
+          pointRadius: 2,
+          borderWidth: 2,
+          backgroundColor: backgroundColors,
+          fill: false,
+          data: datasets.data,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "index",
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: false,
+            drawTicks: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: false,
+            drawTicks: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/PieChart/index.tsx

@@ -0,0 +1,109 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { Pie } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// PieChart configurations
+import configs from "examples/Charts/PieChart/configs";
+
+// Declaring props types for PieChart
+interface Props {
+  icon?: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    component: ReactNode;
+  };
+  title?: string;
+  description?: string | ReactNode;
+  height?: string | number;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      backgroundColors: string[];
+      data: number[];
+    };
+  };
+  [key: string]: any;
+}
+
+function PieChart({ icon, title, description, height, chart }: Props): JSX.Element {
+  const { data, options } = configs(chart.labels || [], chart.datasets || {});
+
+  const renderChart = (
+    <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+      {title || description ? (
+        <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+          {icon.component && (
+            <MDBox
+              width="4rem"
+              height="4rem"
+              bgColor={icon.color || "info"}
+              variant="gradient"
+              coloredShadow={icon.color || "info"}
+              borderRadius="xl"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              color="white"
+              mt={-5}
+              mr={2}
+            >
+              <Icon fontSize="medium">{icon.component}</Icon>
+            </MDBox>
+          )}
+          <MDBox mt={icon.component ? -2 : 0}>
+            {title && <MDTypography variant="h6">{title}</MDTypography>}
+            <MDBox mb={2}>
+              <MDTypography component="div" variant="button" color="text">
+                {description}
+              </MDTypography>
+            </MDBox>
+          </MDBox>
+        </MDBox>
+      ) : null}
+      {useMemo(
+        () => (
+          <MDBox height={height}>
+            <Pie data={data} options={options} />
+          </MDBox>
+        ),
+        [chart, height]
+      )}
+    </MDBox>
+  );
+
+  return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props for PieChart
+PieChart.defaultProps = {
+  icon: { color: "info", component: "" },
+  title: "",
+  description: "",
+  height: "19.125rem",
+};
+
+export default PieChart;

src/examples/Charts/PolarChart/configs/index.ts

@@ -0,0 +1,56 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+/* eslint-disable no-dupe-keys */
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+const { gradients, dark } = colors;
+
+function configs(labels: any, datasets: any) {
+  const backgroundColors = [];
+
+  if (datasets.backgroundColors) {
+    datasets.backgroundColors.forEach((color: string) =>
+      gradients[color]
+        ? backgroundColors.push(gradients[color].state)
+        : backgroundColors.push(dark.main)
+    );
+  } else {
+    backgroundColors.push(dark.main);
+  }
+
+  return {
+    data: {
+      labels,
+      datasets: [
+        {
+          label: datasets.label,
+          backgroundColor: backgroundColors,
+          data: datasets.data,
+        },
+      ],
+    },
+    options: {
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/PolarChart/index.tsx

@@ -0,0 +1,107 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { PolarArea } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// PolarChart configurations
+import configs from "examples/Charts/PolarChart/configs";
+
+// Declaring props types for PolarChart
+interface Props {
+  icon?: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    component: ReactNode;
+  };
+  title?: string;
+  description?: string | ReactNode;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      backgroundColors: string[];
+      data: number[];
+    };
+  };
+  [key: string]: any;
+}
+
+function PolarChart({ icon, title, description, chart }: Props): JSX.Element {
+  const { data, options } = configs(chart.labels || [], chart.datasets || {});
+
+  const renderChart = (
+    <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+      {title || description ? (
+        <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+          {icon.component && (
+            <MDBox
+              width="4rem"
+              height="4rem"
+              bgColor={icon.color || "info"}
+              variant="gradient"
+              coloredShadow={icon.color || "info"}
+              borderRadius="xl"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              color="white"
+              mt={-5}
+              mr={2}
+            >
+              <Icon fontSize="medium">{icon.component}</Icon>
+            </MDBox>
+          )}
+          <MDBox mt={icon.component ? -2 : 0}>
+            {title && <MDTypography variant="h6">{title}</MDTypography>}
+            <MDBox mb={2}>
+              <MDTypography component="div" variant="button" color="text">
+                {description}
+              </MDTypography>
+            </MDBox>
+          </MDBox>
+        </MDBox>
+      ) : null}
+      {useMemo(
+        () => (
+          <MDBox p={4}>
+            <PolarArea data={data} options={options} />
+          </MDBox>
+        ),
+        [chart]
+      )}
+    </MDBox>
+  );
+
+  return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props for PolarChart
+PolarChart.defaultProps = {
+  icon: { color: "info", component: "" },
+  title: "",
+  description: "",
+};
+
+export default PolarChart;

src/examples/Charts/RadarChart/configs/index.ts

@@ -0,0 +1,32 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+function configs(labels: any, datasets: any) {
+  return {
+    data: {
+      labels,
+      datasets: [...datasets],
+    },
+    options: {
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+    },
+  };
+}
+
+export default configs;

src/examples/Charts/RadarChart/index.tsx

@@ -0,0 +1,123 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo, ReactNode } from "react";
+
+// react-chartjs-2 components
+import { Radar } from "react-chartjs-2";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// RadarChart configurations
+import configs from "examples/Charts/RadarChart/configs";
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import rgba from "assets/theme/functions/rgba";
+
+// Declaring props types for RadarChart
+interface Props {
+  icon?: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    component: ReactNode;
+  };
+  title?: string;
+  description?: string | ReactNode;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+      data: number[];
+      borderDash?: number[];
+    }[];
+  };
+  [key: string]: any;
+}
+
+function RadarChart({ icon, title, description, chart }: Props): JSX.Element {
+  const chartDatasets = chart.datasets
+    ? chart.datasets.map((dataset) => ({
+        ...dataset,
+        backgroundColor: colors[dataset.color]
+          ? rgba(colors[dataset.color || "dark"].main, 0.2)
+          : rgba(colors.dark.main, 0.2),
+      }))
+    : [];
+
+  const { data, options } = configs(chart.labels || [], chartDatasets);
+
+  const renderChart = (
+    <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+      {title || description ? (
+        <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+          {icon.component && (
+            <MDBox
+              width="4rem"
+              height="4rem"
+              bgColor={icon.color || "info"}
+              variant="gradient"
+              coloredShadow={icon.color || "info"}
+              borderRadius="xl"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              color="white"
+              mt={-5}
+              mr={2}
+            >
+              <Icon fontSize="medium">{icon.component}</Icon>
+            </MDBox>
+          )}
+          <MDBox mt={icon.component ? -2 : 0}>
+            {title && <MDTypography variant="h6">{title}</MDTypography>}
+            <MDBox mb={2}>
+              <MDTypography component="div" variant="button" color="text">
+                {description}
+              </MDTypography>
+            </MDBox>
+          </MDBox>
+        </MDBox>
+      ) : null}
+      {useMemo(
+        () => (
+          <MDBox p={6}>
+            <Radar data={data} options={options} />
+          </MDBox>
+        ),
+        [chart]
+      )}
+    </MDBox>
+  );
+
+  return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props for RadarChart
+RadarChart.defaultProps = {
+  icon: { color: "info", component: "" },
+  title: "",
+  description: "",
+};
+
+export default RadarChart;

src/examples/Configurator/ConfiguratorRoot.tsx

@@ -0,0 +1,60 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import Drawer from "@mui/material/Drawer";
+import { styled, Theme } from "@mui/material/styles";
+
+export default styled(Drawer)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => {
+  const { boxShadows, functions, transitions } = theme;
+  const { openConfigurator } = ownerState;
+
+  const configuratorWidth = 360;
+  const { lg } = boxShadows;
+  const { pxToRem } = functions;
+
+  // drawer styles when openConfigurator={true}
+  const drawerOpenStyles = () => ({
+    width: configuratorWidth,
+    left: "initial",
+    right: 0,
+    transition: transitions.create("right", {
+      easing: transitions.easing.sharp,
+      duration: transitions.duration.short,
+    }),
+  });
+
+  // drawer styles when openConfigurator={false}
+  const drawerCloseStyles = () => ({
+    left: "initial",
+    right: pxToRem(-350),
+    transition: transitions.create("all", {
+      easing: transitions.easing.sharp,
+      duration: transitions.duration.short,
+    }),
+  });
+
+  return {
+    "& .MuiDrawer-paper": {
+      height: "100vh",
+      margin: 0,
+      padding: `0 ${pxToRem(10)}`,
+      borderRadius: 0,
+      boxShadow: lg,
+      overflowY: "auto",
+      ...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles()),
+    },
+  };
+});

src/examples/Configurator/index.tsx

@@ -0,0 +1,392 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useState, useEffect } from "react";
+
+// react-github-btn
+import GitHubButton from "react-github-btn";
+
+// @mui material components
+import Divider from "@mui/material/Divider";
+import Switch from "@mui/material/Switch";
+import IconButton from "@mui/material/IconButton";
+import Link from "@mui/material/Link";
+import Icon from "@mui/material/Icon";
+import { Theme } from "@mui/material/styles";
+
+// @mui icons
+import TwitterIcon from "@mui/icons-material/Twitter";
+import FacebookIcon from "@mui/icons-material/Facebook";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDButton from "components/MDButton";
+
+// Custom styles for the Configurator
+import ConfiguratorRoot from "examples/Configurator/ConfiguratorRoot";
+
+// Material Dashboard 2 PRO React context
+import {
+  useMaterialUIController,
+  setOpenConfigurator,
+  setTransparentSidenav,
+  setWhiteSidenav,
+  setMiniSidenav,
+  setFixedNavbar,
+  setSidenavColor,
+  setDarkMode,
+} from "context";
+
+function Configurator(): JSX.Element {
+  const [controller, dispatch] = useMaterialUIController();
+  const {
+    openConfigurator,
+    miniSidenav,
+    fixedNavbar,
+    sidenavColor,
+    transparentSidenav,
+    whiteSidenav,
+    darkMode,
+  } = controller;
+  const [disabled, setDisabled] = useState<boolean>(false);
+  const sidenavColors: (
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "warning"
+    | "error"
+    | "light"
+    | "dark"
+  )[] = ["primary", "dark", "info", "success", "warning", "error"];
+
+  // Use the useEffect hook to change the button state for the sidenav type based on window size.
+  useEffect(() => {
+    // A function that sets the disabled state of the buttons for the sidenav type.
+    function handleDisabled() {
+      return window.innerWidth > 1200 ? setDisabled(false) : setDisabled(true);
+    }
+
+    // The event listener that's calling the handleDisabled function when resizing the window.
+    window.addEventListener("resize", handleDisabled);
+
+    // Call the handleDisabled function to set the state with the initial value.
+    handleDisabled();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleDisabled);
+  }, []);
+
+  const handleCloseConfigurator = () => setOpenConfigurator(dispatch, false);
+  const handleTransparentSidenav = () => {
+    setTransparentSidenav(dispatch, true);
+    setWhiteSidenav(dispatch, false);
+  };
+  const handleWhiteSidenav = () => {
+    setWhiteSidenav(dispatch, true);
+    setTransparentSidenav(dispatch, false);
+  };
+  const handleDarkSidenav = () => {
+    setWhiteSidenav(dispatch, false);
+    setTransparentSidenav(dispatch, false);
+  };
+  const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
+  const handleFixedNavbar = () => setFixedNavbar(dispatch, !fixedNavbar);
+  const handleDarkMode = () => setDarkMode(dispatch, !darkMode);
+
+  // sidenav type buttons styles
+  const sidenavTypeButtonsStyles = ({
+    functions: { pxToRem },
+    palette: { white, dark, background },
+    borders: { borderWidth },
+  }: Theme | any) => ({
+    height: pxToRem(39),
+    background: darkMode ? background.sidenav : white.main,
+    color: darkMode ? white.main : dark.main,
+    border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`,
+
+    "&:hover, &:focus, &:focus:not(:hover)": {
+      background: darkMode ? background.sidenav : white.main,
+      color: darkMode ? white.main : dark.main,
+      border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`,
+    },
+  });
+
+  // sidenav type active button styles
+  const sidenavTypeActiveButtonStyles = ({
+    functions: { pxToRem, linearGradient },
+    palette: { white, gradients, background },
+  }: Theme | any) => ({
+    height: pxToRem(39),
+    background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state),
+    color: darkMode ? background.sidenav : white.main,
+
+    "&:hover, &:focus, &:focus:not(:hover)": {
+      background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state),
+      color: darkMode ? background.sidenav : white.main,
+    },
+  });
+
+  return (
+    <ConfiguratorRoot variant="permanent" ownerState={{ openConfigurator }}>
+      <MDBox
+        display="flex"
+        justifyContent="space-between"
+        alignItems="baseline"
+        pt={4}
+        pb={0.5}
+        px={3}
+      >
+        <MDBox>
+          <MDTypography variant="h5">Material UI Configurator</MDTypography>
+          <MDTypography variant="body2" color="text">
+            See our dashboard options.
+          </MDTypography>
+        </MDBox>
+
+        <Icon
+          sx={({ typography: { size }, palette: { dark, white } }) => ({
+            fontSize: `${size.lg} !important`,
+            color: darkMode ? white.main : dark.main,
+            stroke: "currentColor",
+            strokeWidth: "2px",
+            cursor: "pointer",
+            transform: "translateY(5px)",
+          })}
+          onClick={handleCloseConfigurator}
+        >
+          close
+        </Icon>
+      </MDBox>
+
+      <Divider />
+
+      <MDBox pt={0.5} pb={3} px={3}>
+        <MDBox>
+          <MDTypography variant="h6">Sidenav Colors</MDTypography>
+
+          <MDBox mb={0.5}>
+            {sidenavColors.map((color) => (
+              <IconButton
+                key={color}
+                sx={({
+                  borders: { borderWidth },
+                  palette: { white, dark, background },
+                  transitions,
+                }: Theme | any) => ({
+                  width: "24px",
+                  height: "24px",
+                  padding: 0,
+                  border: `${borderWidth[1]} solid ${darkMode ? background.sidenav : white.main}`,
+                  borderColor: () => {
+                    let borderColorValue = sidenavColor === color && dark.main;
+
+                    if (darkMode && sidenavColor === color) {
+                      borderColorValue = white.main;
+                    }
+
+                    return borderColorValue;
+                  },
+                  transition: transitions.create("border-color", {
+                    easing: transitions.easing.sharp,
+                    duration: transitions.duration.shorter,
+                  }),
+                  backgroundImage: ({ functions: { linearGradient }, palette: { gradients } }) =>
+                    linearGradient(gradients[color].main, gradients[color].state),
+
+                  "&:not(:last-child)": {
+                    mr: 1,
+                  },
+
+                  "&:hover, &:focus, &:active": {
+                    borderColor: darkMode ? white.main : dark.main,
+                  },
+                })}
+                onClick={() => setSidenavColor(dispatch, color)}
+              />
+            ))}
+          </MDBox>
+        </MDBox>
+
+        <MDBox mt={3} lineHeight={1}>
+          <MDTypography variant="h6">Sidenav Type</MDTypography>
+          <MDTypography variant="button" color="text">
+            Choose between different sidenav types.
+          </MDTypography>
+
+          <MDBox
+            sx={{
+              display: "flex",
+              mt: 2,
+              mr: 1,
+            }}
+          >
+            <MDButton
+              color="dark"
+              variant="gradient"
+              onClick={handleDarkSidenav}
+              disabled={disabled}
+              fullWidth
+              sx={
+                !transparentSidenav && !whiteSidenav
+                  ? sidenavTypeActiveButtonStyles
+                  : sidenavTypeButtonsStyles
+              }
+            >
+              Dark
+            </MDButton>
+            <MDBox sx={{ mx: 1, width: "8rem", minWidth: "8rem" }}>
+              <MDButton
+                color="dark"
+                variant="gradient"
+                onClick={handleTransparentSidenav}
+                disabled={disabled}
+                fullWidth
+                sx={
+                  transparentSidenav && !whiteSidenav
+                    ? sidenavTypeActiveButtonStyles
+                    : sidenavTypeButtonsStyles
+                }
+              >
+                Transparent
+              </MDButton>
+            </MDBox>
+            <MDButton
+              color="dark"
+              variant="gradient"
+              onClick={handleWhiteSidenav}
+              disabled={disabled}
+              fullWidth
+              sx={
+                whiteSidenav && !transparentSidenav
+                  ? sidenavTypeActiveButtonStyles
+                  : sidenavTypeButtonsStyles
+              }
+            >
+              White
+            </MDButton>
+          </MDBox>
+        </MDBox>
+        <MDBox
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          mt={3}
+          lineHeight={1}
+        >
+          <MDTypography variant="h6">Navbar Fixed</MDTypography>
+
+          <Switch checked={fixedNavbar} onChange={handleFixedNavbar} />
+        </MDBox>
+        <Divider />
+        <MDBox display="flex" justifyContent="space-between" alignItems="center" lineHeight={1}>
+          <MDTypography variant="h6">Sidenav Mini</MDTypography>
+
+          <Switch checked={miniSidenav} onChange={handleMiniSidenav} />
+        </MDBox>
+        <Divider />
+        <MDBox display="flex" justifyContent="space-between" alignItems="center" lineHeight={1}>
+          <MDTypography variant="h6">Light / Dark</MDTypography>
+
+          <Switch checked={darkMode} onChange={handleDarkMode} />
+        </MDBox>
+        <Divider />
+        <MDBox mt={3} mb={2}>
+          <MDBox mb={2}>
+            <MDButton
+              component={Link}
+              href="https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts"
+              target="_blank"
+              rel="noreferrer"
+              color="info"
+              variant="gradient"
+              fullWidth
+            >
+              buy now
+            </MDButton>
+          </MDBox>
+          <MDBox mb={2}>
+            <MDButton
+              component={Link}
+              href="https://www.creative-tim.com/product/material-dashboard-pro-react"
+              target="_blank"
+              rel="noreferrer"
+              color="dark"
+              variant="gradient"
+              fullWidth
+            >
+              buy javascript version
+            </MDButton>
+          </MDBox>
+          <MDButton
+            component={Link}
+            href="https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/"
+            target="_blank"
+            rel="noreferrer"
+            color={darkMode ? "light" : "dark"}
+            variant="outlined"
+            fullWidth
+          >
+            view documentation
+          </MDButton>
+        </MDBox>
+        <MDBox display="flex" justifyContent="center">
+          <GitHubButton
+            href="https://github.com/creativetimofficial/ct-material-dashboard-pro-react"
+            data-icon="octicon-star"
+            data-size="large"
+            data-show-count="true"
+            aria-label="Star creativetimofficial/ct-material-dashboard-pro-react on GitHub"
+          >
+            Star
+          </GitHubButton>
+        </MDBox>
+        <MDBox mt={2} textAlign="center">
+          <MDBox mb={0.5}>
+            <MDTypography variant="h6">Thank you for sharing!</MDTypography>
+          </MDBox>
+
+          <MDBox display="flex" justifyContent="center">
+            <MDBox mr={1.5}>
+              <MDButton
+                component={Link}
+                href="//twitter.com/intent/tweet?text=Check%20Material%20Dashboard%202%20PRO%20React%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23react%20%mui&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fmaterial-dashboard-2-pro-react-ts"
+                target="_blank"
+                rel="noreferrer"
+                color="dark"
+              >
+                <TwitterIcon />
+                &nbsp; Tweet
+              </MDButton>
+            </MDBox>
+            <MDButton
+              component={Link}
+              href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts"
+              target="_blank"
+              rel="noreferrer"
+              color="dark"
+            >
+              <FacebookIcon />
+              &nbsp; Share
+            </MDButton>
+          </MDBox>
+        </MDBox>
+      </MDBox>
+    </ConfiguratorRoot>
+  );
+}
+
+export default Configurator;

src/examples/Footer/index.tsx

@@ -0,0 +1,121 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import Link from "@mui/material/Link";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 PRO React TS Base Styles
+import typography from "assets/theme/base/typography";
+
+// Declaring props types for Footer
+interface Props {
+  company?: {
+    href: string;
+    name: string;
+  };
+  links?: {
+    href: string;
+    name: string;
+  }[];
+  [key: string]: any;
+}
+
+function Footer({ company, links }: Props): JSX.Element {
+  const { href, name } = company;
+  const { size } = typography;
+
+  const renderLinks = () =>
+    links.map((link) => (
+      <MDBox key={link.name} component="li" px={2} lineHeight={1}>
+        <Link href={link.href} target="_blank">
+          <MDTypography variant="button" fontWeight="regular" color="text">
+            {link.name}
+          </MDTypography>
+        </Link>
+      </MDBox>
+    ));
+
+  return (
+    <MDBox
+      width="100%"
+      display="flex"
+      flexDirection={{ xs: "column", lg: "row" }}
+      justifyContent="space-between"
+      alignItems="center"
+      px={1.5}
+    >
+      <MDBox
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        flexWrap="wrap"
+        color="text"
+        fontSize={size.sm}
+        px={1.5}
+      >
+        &copy; {new Date().getFullYear()}, made with
+        <MDBox fontSize={size.md} color="text" mb={-0.5} mx={0.25}>
+          <Icon color="inherit" fontSize="inherit">
+            favorite
+          </Icon>
+        </MDBox>
+        by
+        <Link href={href} target="_blank">
+          <MDTypography variant="button" fontWeight="medium">
+            &nbsp;{name}&nbsp;
+          </MDTypography>
+        </Link>
+        for a better web.
+      </MDBox>
+      <MDBox
+        component="ul"
+        sx={({ breakpoints }) => ({
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          justifyContent: "center",
+          listStyle: "none",
+          mt: 3,
+          mb: 0,
+          p: 0,
+
+          [breakpoints.up("lg")]: {
+            mt: 0,
+          },
+        })}
+      >
+        {renderLinks()}
+      </MDBox>
+    </MDBox>
+  );
+}
+
+// Declaring default props for Footer
+Footer.defaultProps = {
+  company: { href: "https://www.creative-tim.com/", name: "Creative Tim" },
+  links: [
+    { href: "https://www.creative-tim.com/", name: "Creative Tim" },
+    { href: "https://www.creative-tim.com/presentation", name: "About Us" },
+    { href: "https://www.creative-tim.com/blog", name: "Blog" },
+    { href: "https://www.creative-tim.com/license", name: "License" },
+  ],
+};
+
+export default Footer;

src/examples/Items/DefaultItem/index.tsx

@@ -0,0 +1,58 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { forwardRef, FC, ReactNode } from "react";
+
+// @mui material components
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// custom styles for the DefaultItem
+import defaultItemIconBox from "examples/Items/DefaultItem/styles";
+
+// Declaring props types for DefaultItem
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  icon: ReactNode;
+  title: string;
+  description: string;
+  [key: string]: any;
+}
+
+const DefaultItem: FC<Props> = forwardRef(({ color, icon, title, description, ...rest }, ref) => (
+  <MDBox {...rest} ref={ref} display="flex" alignItems="center">
+    <MDBox sx={(theme) => defaultItemIconBox(theme, { color })}>
+      <Icon>{icon}</Icon>
+    </MDBox>
+    <MDBox ml={2} mt={0.5} lineHeight={1.4}>
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        {title}
+      </MDTypography>
+      <MDTypography variant="button" fontWeight="regular" color="text">
+        {description}
+      </MDTypography>
+    </MDBox>
+  </MDBox>
+));
+
+// Declaring default props for DefaultItem
+DefaultItem.defaultProps = {
+  color: "info",
+};
+
+export default DefaultItem;

src/examples/Items/DefaultItem/styles.ts

@@ -0,0 +1,25 @@
+// @mui material components
+import { Theme } from "@mui/material/styles";
+
+function defaultItemIconBox(theme: Theme, ownerState: any) {
+  const { functions, palette, borders } = theme;
+  const { color } = ownerState;
+
+  const { pxToRem, linearGradient } = functions;
+  const { gradients, dark, white } = palette;
+  const { borderRadius } = borders;
+
+  return {
+    display: "grid",
+    placeItems: "center",
+    width: pxToRem(48),
+    height: pxToRem(48),
+    borderRadius: borderRadius.md,
+    color: color === "light" ? dark.mian : white.main,
+    background: gradients[color]
+      ? linearGradient(gradients[color].main, gradients[color].state)
+      : linearGradient(gradients.info.main, gradients.info.state),
+  };
+}
+
+export default defaultItemIconBox;

src/examples/Items/NotificationItem/index.tsx

@@ -0,0 +1,50 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { forwardRef, FC, ReactNode } from "react";
+
+// @mui material components
+import MenuItem from "@mui/material/MenuItem";
+import Link from "@mui/material/Link";
+import { MenuItemProps } from "@mui/material";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// custom styles for the NotificationItem
+import menuItem from "examples/Items/NotificationItem/styles";
+
+// Declaring props types for NotificationItem
+interface Props extends MenuItemProps {
+  icon: ReactNode;
+  title: string;
+  [key: string]: any;
+}
+
+const NotificationItem: FC<Props> = forwardRef(({ icon, title, ...rest }, ref) => (
+  <MenuItem {...rest} ref={ref} sx={(theme) => menuItem(theme)}>
+    <MDBox component={Link} py={0.5} display="flex" alignItems="center" lineHeight={1}>
+      <MDTypography variant="body1" color="secondary" lineHeight={0.75}>
+        {icon}
+      </MDTypography>
+      <MDTypography variant="button" fontWeight="regular" sx={{ ml: 1 }}>
+        {title}
+      </MDTypography>
+    </MDBox>
+  </MenuItem>
+));
+
+export default NotificationItem;

src/examples/Items/NotificationItem/styles.ts

@@ -0,0 +1,39 @@
+// @mui material components
+import { Theme } from "@mui/material/styles";
+
+function menuItem(theme: Theme) {
+  const { palette, borders, transitions } = theme;
+
+  const { secondary, light, dark } = palette;
+  const { borderRadius } = borders;
+
+  return {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    color: secondary.main,
+    borderRadius: borderRadius.md,
+    transition: transitions.create("background-color", {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.standard,
+    }),
+
+    "& *": {
+      transition: "color 100ms linear",
+    },
+
+    "&:not(:last-child)": {
+      mb: 1,
+    },
+
+    "&:hover": {
+      backgroundColor: light.main,
+
+      "& *": {
+        color: dark.main,
+      },
+    },
+  };
+}
+
+export default menuItem;

src/examples/LayoutContainers/DashboardLayout/index.tsx

@@ -0,0 +1,56 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useEffect, ReactNode } from "react";
+
+// react-router-dom components
+import { useLocation } from "react-router-dom";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController, setLayout } from "context";
+
+function DashboardLayout({ children }: { children: ReactNode }): JSX.Element {
+  const [controller, dispatch] = useMaterialUIController();
+  const { miniSidenav } = controller;
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setLayout(dispatch, "dashboard");
+  }, [pathname]);
+
+  return (
+    <MDBox
+      sx={({ breakpoints, transitions, functions: { pxToRem } }) => ({
+        p: 3,
+        position: "relative",
+
+        [breakpoints.up("xl")]: {
+          marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274),
+          transition: transitions.create(["margin-left", "margin-right"], {
+            easing: transitions.easing.easeInOut,
+            duration: transitions.duration.standard,
+          }),
+        },
+      })}
+    >
+      {children}
+    </MDBox>
+  );
+}
+
+export default DashboardLayout;

src/examples/LayoutContainers/PageLayout/index.tsx

@@ -0,0 +1,59 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useEffect, ReactNode } from "react";
+
+// react-router-dom components
+import { useLocation } from "react-router-dom";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController, setLayout } from "context";
+
+// Declaring props types for PageLayout
+interface Props {
+  background?: "white" | "light" | "default";
+  children: ReactNode;
+}
+
+function PageLayout({ background, children }: Props): JSX.Element {
+  const [, dispatch] = useMaterialUIController();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setLayout(dispatch, "page");
+  }, [pathname]);
+
+  return (
+    <MDBox
+      width="100vw"
+      height="100%"
+      minHeight="100vh"
+      bgColor={background}
+      sx={{ overflowX: "hidden" }}
+    >
+      {children}
+    </MDBox>
+  );
+}
+
+// Declaring default props for PageLayout
+PageLayout.defaultProps = {
+  background: "default",
+};
+
+export default PageLayout;

src/examples/Lists/CategoriesList/index.tsx

@@ -0,0 +1,126 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// react-router-dom components
+import { Link } from "react-router-dom";
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Declaring props types for CategoriesList
+interface Props {
+  title: string;
+  categories: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    icon: ReactNode | string;
+    name: string;
+    description: ReactNode;
+    route: string;
+  }[];
+  [key: string]: any;
+}
+
+function CategoriesList({ title, categories }: Props): JSX.Element {
+  const renderItems = categories.map(({ color, icon, name, description, route }, key) => (
+    <MDBox
+      key={name}
+      component="li"
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
+      borderRadius="lg"
+      py={1}
+      pr={2}
+      mb={categories.length - 1 === key ? 0 : 1}
+    >
+      <MDBox display="flex" alignItems="center">
+        <MDBox
+          display="grid"
+          alignItems="center"
+          justifyContent="center"
+          bgColor={color}
+          borderRadius="lg"
+          shadow="md"
+          color="white"
+          width="2rem"
+          height="2rem"
+          mr={2}
+          variant="gradient"
+          fontSize="0.875rem"
+        >
+          <Icon
+            sx={{
+              display: "grid",
+              placeItems: "center",
+            }}
+          >
+            {icon}
+          </Icon>
+        </MDBox>
+        <MDBox display="flex" flexDirection="column">
+          <MDTypography variant="button" color={color} fontWeight="medium" gutterBottom>
+            {name}
+          </MDTypography>
+          <MDTypography variant="caption" color="text">
+            {description}
+          </MDTypography>
+        </MDBox>
+      </MDBox>
+      <MDBox display="flex">
+        <MDTypography
+          component={Link}
+          variant="button"
+          color={color}
+          to={route}
+          sx={{
+            lineHeight: 0,
+            transition: "all 0.2s cubic-bezier(.34,1.61,.7,1.3)",
+            p: 0.5,
+
+            "&:hover, &:focus": {
+              transform: "translateX(5px)",
+            },
+          }}
+        >
+          <Icon sx={{ fontWeight: "bold" }}>chevron_right</Icon>
+        </MDTypography>
+      </MDBox>
+    </MDBox>
+  ));
+
+  return (
+    <Card>
+      <MDBox pt={2} px={2}>
+        <MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
+          {title}
+        </MDTypography>
+      </MDBox>
+      <MDBox p={2}>
+        <MDBox component="ul" display="flex" flexDirection="column" p={0} m={0}>
+          {renderItems}
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+export default CategoriesList;

src/examples/Lists/ProfilesList/index.tsx

@@ -0,0 +1,102 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// react-routers components
+import { Link } from "react-router-dom";
+
+// @mui material components
+import Card from "@mui/material/Card";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDAvatar from "components/MDAvatar";
+import MDButton from "components/MDButton";
+
+// Declaring props types for ProfilesList
+interface Props {
+  title: string;
+  profiles: {
+    image: string;
+    name: string;
+    description: string;
+    action: {
+      type: "external" | "internal";
+      route: string;
+      color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+      label: string;
+    };
+  }[];
+  shadow?: boolean;
+  [key: string]: any;
+}
+
+function ProfilesList({ title, profiles, shadow }: Props): JSX.Element {
+  const renderProfiles = profiles.map(({ image, name, description, action }) => (
+    <MDBox key={name} component="li" display="flex" alignItems="center" py={1} mb={1}>
+      <MDBox mr={2}>
+        <MDAvatar src={image} alt="something here" shadow="md" />
+      </MDBox>
+      <MDBox display="flex" flexDirection="column" alignItems="flex-start" justifyContent="center">
+        <MDTypography variant="button" fontWeight="medium">
+          {name}
+        </MDTypography>
+        <MDTypography variant="caption" color="text">
+          {description}
+        </MDTypography>
+      </MDBox>
+      <MDBox ml="auto">
+        {action.type === "internal" ? (
+          <MDButton component={Link} to={action.route} variant="text" color="info">
+            {action.label}
+          </MDButton>
+        ) : (
+          <MDButton
+            component="a"
+            href={action.route}
+            target="_blank"
+            rel="noreferrer"
+            variant="text"
+            color={action.color}
+          >
+            {action.label}
+          </MDButton>
+        )}
+      </MDBox>
+    </MDBox>
+  ));
+
+  return (
+    <Card sx={{ height: "100%", boxShadow: !shadow && "none" }}>
+      <MDBox pt={2} px={2}>
+        <MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
+          {title}
+        </MDTypography>
+      </MDBox>
+      <MDBox p={2}>
+        <MDBox component="ul" display="flex" flexDirection="column" p={0} m={0}>
+          {renderProfiles}
+        </MDBox>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring defualt props for ProfilesList
+ProfilesList.defaultProps = {
+  shadow: true,
+};
+
+export default ProfilesList;

src/examples/Navbars/DashboardNavbar/index.tsx

@@ -0,0 +1,212 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useState, useEffect } from "react";
+
+// react-router components
+import { useLocation, Link } from "react-router-dom";
+
+// @material-ui core components
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDInput from "components/MDInput";
+import MDBadge from "components/MDBadge";
+
+// Material Dashboard 2 PRO React TS examples components
+import Breadcrumbs from "examples/Breadcrumbs";
+import NotificationItem from "examples/Items/NotificationItem";
+
+// Custom styles for DashboardNavbar
+import {
+  navbar,
+  navbarContainer,
+  navbarRow,
+  navbarIconButton,
+  navbarDesktopMenu,
+  navbarMobileMenu,
+} from "examples/Navbars/DashboardNavbar/styles";
+
+// Material Dashboard 2 PRO React context
+import {
+  useMaterialUIController,
+  setTransparentNavbar,
+  setMiniSidenav,
+  setOpenConfigurator,
+} from "context";
+
+// Declaring prop types for DashboardNavbar
+interface Props {
+  absolute?: boolean;
+  light?: boolean;
+  isMini?: boolean;
+}
+
+function DashboardNavbar({ absolute, light, isMini }: Props): JSX.Element {
+  const [navbarType, setNavbarType] = useState<
+    "fixed" | "absolute" | "relative" | "static" | "sticky"
+  >();
+  const [controller, dispatch] = useMaterialUIController();
+  const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller;
+  const [openMenu, setOpenMenu] = useState<any>(false);
+  const route = useLocation().pathname.split("/").slice(1);
+
+  useEffect(() => {
+    // Setting the navbar type
+    if (fixedNavbar) {
+      setNavbarType("sticky");
+    } else {
+      setNavbarType("static");
+    }
+
+    // A function that sets the transparent state of the navbar.
+    function handleTransparentNavbar() {
+      setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar);
+    }
+
+    /** 
+     The event listener that's calling the handleTransparentNavbar function when 
+     scrolling the window.
+    */
+    window.addEventListener("scroll", handleTransparentNavbar);
+
+    // Call the handleTransparentNavbar function to set the state with the initial value.
+    handleTransparentNavbar();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("scroll", handleTransparentNavbar);
+  }, [dispatch, fixedNavbar]);
+
+  const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
+  const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
+  const handleOpenMenu = (event: any) => setOpenMenu(event.currentTarget);
+  const handleCloseMenu = () => setOpenMenu(false);
+
+  // Render the notifications menu
+  const renderMenu = () => (
+    <Menu
+      anchorEl={openMenu}
+      anchorReference={null}
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "left",
+      }}
+      open={Boolean(openMenu)}
+      onClose={handleCloseMenu}
+      sx={{ mt: 2 }}
+    >
+      <NotificationItem icon={<Icon>email</Icon>} title="Check new messages" />
+      <NotificationItem icon={<Icon>podcasts</Icon>} title="Manage Podcast sessions" />
+      <NotificationItem icon={<Icon>shopping_cart</Icon>} title="Payment successfully completed" />
+    </Menu>
+  );
+
+  // Styles for the navbar icons
+  const iconsStyle = ({
+    palette: { dark, white, text },
+    functions: { rgba },
+  }: {
+    palette: any;
+    functions: any;
+  }) => ({
+    color: () => {
+      let colorValue = light || darkMode ? white.main : dark.main;
+
+      if (transparentNavbar && !light) {
+        colorValue = darkMode ? rgba(text.main, 0.6) : text.main;
+      }
+
+      return colorValue;
+    },
+  });
+
+  return (
+    <AppBar
+      position={absolute ? "absolute" : navbarType}
+      color="inherit"
+      sx={(theme) => navbar(theme, { transparentNavbar, absolute, light, darkMode })}
+    >
+      <Toolbar sx={navbarContainer}>
+        <MDBox color="inherit" mb={{ xs: 1, md: 0 }} sx={(theme) => navbarRow(theme, { isMini })}>
+          <Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light} />
+          <IconButton sx={navbarDesktopMenu} onClick={handleMiniSidenav} size="small" disableRipple>
+            <Icon fontSize="medium" sx={iconsStyle}>
+              {miniSidenav ? "menu_open" : "menu"}
+            </Icon>
+          </IconButton>
+        </MDBox>
+        {isMini ? null : (
+          <MDBox sx={(theme) => navbarRow(theme, { isMini })}>
+            <MDBox pr={1}>
+              <MDInput label="Search here" />
+            </MDBox>
+            <MDBox color={light ? "white" : "inherit"}>
+              <Link to="/authentication/sign-in/basic">
+                <IconButton sx={navbarIconButton} size="small" disableRipple>
+                  <Icon sx={iconsStyle}>account_circle</Icon>
+                </IconButton>
+              </Link>
+              <IconButton
+                size="small"
+                disableRipple
+                color="inherit"
+                sx={navbarMobileMenu}
+                onClick={handleMiniSidenav}
+              >
+                <Icon sx={iconsStyle} fontSize="medium">
+                  {miniSidenav ? "menu_open" : "menu"}
+                </Icon>
+              </IconButton>
+              <IconButton
+                size="small"
+                disableRipple
+                color="inherit"
+                sx={navbarIconButton}
+                onClick={handleConfiguratorOpen}
+              >
+                <Icon sx={iconsStyle}>settings</Icon>
+              </IconButton>
+              <IconButton
+                size="small"
+                color="inherit"
+                sx={navbarIconButton}
+                onClick={handleOpenMenu}
+              >
+                <MDBadge badgeContent={9} color="error" size="xs" circular>
+                  <Icon sx={iconsStyle}>notifications</Icon>
+                </MDBadge>
+              </IconButton>
+              {renderMenu()}
+            </MDBox>
+          </MDBox>
+        )}
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+// Declaring default props for DashboardNavbar
+DashboardNavbar.defaultProps = {
+  absolute: false,
+  light: false,
+  isMini: false,
+};
+
+export default DashboardNavbar;

src/examples/Navbars/DashboardNavbar/styles.ts

@@ -0,0 +1,154 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import { Theme } from "@mui/material/styles";
+
+function navbar(theme: Theme | any, ownerState: any) {
+  const { palette, boxShadows, functions, transitions, breakpoints, borders } = theme;
+  const { transparentNavbar, absolute, light, darkMode } = ownerState;
+
+  const { dark, white, text, transparent, background } = palette;
+  const { navbarBoxShadow } = boxShadows;
+  const { rgba, pxToRem } = functions;
+  const { borderRadius } = borders;
+
+  return {
+    boxShadow: transparentNavbar || absolute ? "none" : navbarBoxShadow,
+    backdropFilter: transparentNavbar || absolute ? "none" : `saturate(200%) blur(${pxToRem(30)})`,
+    backgroundColor:
+      transparentNavbar || absolute
+        ? `${transparent.main} !important`
+        : rgba(darkMode ? background.default : white.main, 0.8),
+
+    color: () => {
+      let color;
+
+      if (light) {
+        color = white.main;
+      } else if (transparentNavbar) {
+        color = text.main;
+      } else {
+        color = dark.main;
+      }
+
+      return color;
+    },
+    top: absolute ? 0 : pxToRem(12),
+    minHeight: pxToRem(75),
+    display: "grid",
+    alignItems: "center",
+    borderRadius: borderRadius.xl,
+    paddingTop: pxToRem(8),
+    paddingBottom: pxToRem(8),
+    paddingRight: absolute ? pxToRem(8) : 0,
+    paddingLeft: absolute ? pxToRem(16) : 0,
+
+    "& > *": {
+      transition: transitions.create("all", {
+        easing: transitions.easing.easeInOut,
+        duration: transitions.duration.standard,
+      }),
+    },
+
+    "& .MuiToolbar-root": {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+
+      [breakpoints.up("sm")]: {
+        minHeight: "auto",
+        padding: `${pxToRem(4)} ${pxToRem(16)}`,
+      },
+    },
+  };
+}
+
+const navbarContainer = ({ breakpoints }: Theme): any => ({
+  flexDirection: "column",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  pt: 0.5,
+  pb: 0.5,
+
+  [breakpoints.up("md")]: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingTop: "0",
+    paddingBottom: "0",
+  },
+});
+
+const navbarRow = ({ breakpoints }: Theme, { isMini }: any) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+
+  [breakpoints.up("md")]: {
+    justifyContent: isMini ? "space-between" : "stretch",
+    width: isMini ? "100%" : "max-content",
+  },
+
+  [breakpoints.up("xl")]: {
+    justifyContent: "stretch !important",
+    width: "max-content !important",
+  },
+});
+
+const navbarIconButton = ({ typography: { size }, breakpoints }: Theme) => ({
+  px: 1,
+
+  "& .material-icons, .material-icons-round": {
+    fontSize: `${size.xl} !important`,
+  },
+
+  "& .MuiTypography-root": {
+    display: "none",
+
+    [breakpoints.up("sm")]: {
+      display: "inline-block",
+      lineHeight: 1.2,
+      ml: 0.5,
+    },
+  },
+});
+
+const navbarDesktopMenu = ({ breakpoints }: Theme) => ({
+  display: "none !important",
+  cursor: "pointer",
+
+  [breakpoints.up("xl")]: {
+    display: "inline-block !important",
+  },
+});
+
+const navbarMobileMenu = ({ breakpoints }: Theme) => ({
+  display: "inline-block",
+  lineHeight: 0,
+
+  [breakpoints.up("xl")]: {
+    display: "none",
+  },
+});
+
+export {
+  navbar,
+  navbarContainer,
+  navbarRow,
+  navbarIconButton,
+  navbarDesktopMenu,
+  navbarMobileMenu,
+};

src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx

@@ -0,0 +1,121 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// react-router-dom components
+import { Link } from "react-router-dom";
+
+// @mui material components
+import Collapse from "@mui/material/Collapse";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Declaring props types for DefaultNavbarDropdown
+interface Props {
+  name: string;
+  icon?: ReactNode;
+  children?: ReactNode;
+  collapseStatus?: boolean;
+  light?: boolean;
+  href?: string;
+  route?: string;
+  collapse: boolean;
+  [key: string]: any;
+}
+
+function DefaultNavbarDropdown({
+  name,
+  icon,
+  children,
+  collapseStatus,
+  light,
+  href,
+  route,
+  collapse,
+  ...rest
+}: Props): JSX.Element {
+  const linkComponent = {
+    component: "a",
+    href,
+    target: "_blank",
+    rel: "noreferrer",
+  };
+
+  const routeComponent: any = {
+    component: Link,
+    to: route,
+  };
+
+  return (
+    <>
+      <MDBox
+        {...rest}
+        mx={1}
+        p={1}
+        display="flex"
+        alignItems="baseline"
+        color={light ? "white" : "dark"}
+        opacity={light ? 1 : 0.6}
+        sx={{ cursor: "pointer", userSelect: "none" }}
+        {...(route && routeComponent)}
+        {...(href && linkComponent)}
+      >
+        <MDTypography
+          variant="body2"
+          lineHeight={1}
+          color="inherit"
+          sx={{ alignSelf: "center", "& *": { verticalAlign: "middle" } }}
+        >
+          {icon}
+        </MDTypography>
+        <MDTypography
+          variant="button"
+          fontWeight="regular"
+          textTransform="capitalize"
+          color={light ? "white" : "dark"}
+          sx={{ fontWeight: "100%", ml: 1, mr: 0.25 }}
+        >
+          {name}
+        </MDTypography>
+        <MDTypography variant="body2" color={light ? "white" : "dark"} ml="auto">
+          <Icon sx={{ fontWeight: "normal", verticalAlign: "middle" }}>
+            {collapse && "keyboard_arrow_down"}
+          </Icon>
+        </MDTypography>
+      </MDBox>
+      {children && (
+        <Collapse in={Boolean(collapseStatus)} timeout={400} unmountOnExit>
+          {children}
+        </Collapse>
+      )}
+    </>
+  );
+}
+
+// Declaring default props for DefaultNavbarDropdown
+DefaultNavbarDropdown.defaultProps = {
+  icon: false,
+  children: false,
+  collapseStatus: false,
+  light: false,
+  href: "",
+  route: "",
+};
+
+export default DefaultNavbarDropdown;

src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.tsx

@@ -0,0 +1,165 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useState } from "react";
+
+// react-router components
+import { Link } from "react-router-dom";
+
+// @mui material components
+import Collapse from "@mui/material/Collapse";
+import MuiLink from "@mui/material/Link";
+import { Theme } from "@mui/material/styles";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 PRO React TS exampless
+import DefaultNavbarDropdown from "examples/Navbars/DefaultNavbar/DefaultNavbarDropdown";
+
+// Declaring props types for DefaultNavbarMobile
+interface Props {
+  routes: any;
+  open: any;
+}
+
+function DefaultNavbarMobile({ routes, open }: Props): JSX.Element {
+  const [collapse, setCollapse] = useState<string | boolean>("");
+
+  const handleSetCollapse = (name: string) =>
+    collapse === name ? setCollapse(false) : setCollapse(name);
+
+  const renderNavbarItems = routes.map(
+    ({ name, icon, collapse: routeCollapses, href, route, collapse: navCollapse }: any) => (
+      <DefaultNavbarDropdown
+        key={name}
+        name={name}
+        icon={icon}
+        collapseStatus={name === collapse}
+        onClick={() => handleSetCollapse(name)}
+        href={href}
+        route={route}
+        collapse={Boolean(navCollapse)}
+      >
+        <MDBox sx={{ height: "15rem", maxHeight: "15rem", overflowY: "scroll" }}>
+          {routeCollapses &&
+            routeCollapses.map((item: any) => (
+              <MDBox key={item.name} px={2}>
+                {item.collapse ? (
+                  <>
+                    <MDTypography
+                      display="block"
+                      variant="button"
+                      fontWeight="bold"
+                      textTransform="capitalize"
+                      py={1}
+                      px={0.5}
+                    >
+                      {item.name}
+                    </MDTypography>
+                    {item.collapse.map((el: any) => (
+                      <MDTypography
+                        key={el.name}
+                        component={el.route ? Link : MuiLink}
+                        to={el.route ? el.route : ""}
+                        href={el.href ? el.href : ""}
+                        target={el.href ? "_blank" : ""}
+                        rel={el.href ? "noreferrer" : "noreferrer"}
+                        minWidth="11.25rem"
+                        display="block"
+                        variant="button"
+                        color="text"
+                        textTransform="capitalize"
+                        fontWeight="regular"
+                        py={0.625}
+                        px={2}
+                        sx={({ palette: { grey, dark }, borders: { borderRadius } }: Theme) => ({
+                          borderRadius: borderRadius.md,
+                          cursor: "pointer",
+                          transition: "all 300ms linear",
+
+                          "&:hover": {
+                            backgroundColor: grey[200],
+                            color: dark.main,
+                          },
+                        })}
+                      >
+                        {el.name}
+                      </MDTypography>
+                    ))}
+                  </>
+                ) : (
+                  <MDBox
+                    key={item.key}
+                    display="block"
+                    component={item.route ? Link : MuiLink}
+                    to={item.route ? item.route : ""}
+                    href={item.href ? item.href : ""}
+                    target={item.href ? "_blank" : ""}
+                    rel={item.href ? "noreferrer" : "noreferrer"}
+                    sx={({ palette: { grey, dark }, borders: { borderRadius } }) => ({
+                      borderRadius: borderRadius.md,
+                      cursor: "pointer",
+                      transition: "all 300ms linear",
+                      py: 1,
+                      px: 1.625,
+
+                      "&:hover": {
+                        backgroundColor: grey[200],
+                        color: dark.main,
+
+                        "& *": {
+                          color: dark.main,
+                        },
+                      },
+                    })}
+                  >
+                    <MDTypography
+                      display="block"
+                      variant="button"
+                      fontWeight="bold"
+                      textTransform="capitalize"
+                    >
+                      {item.name}
+                    </MDTypography>
+                    <MDTypography
+                      display="block"
+                      variant="button"
+                      color="text"
+                      fontWeight="regular"
+                      sx={{ transition: "all 300ms linear" }}
+                    >
+                      {item.description}
+                    </MDTypography>
+                  </MDBox>
+                )}
+              </MDBox>
+            ))}
+        </MDBox>
+      </DefaultNavbarDropdown>
+    )
+  );
+
+  return (
+    <Collapse in={Boolean(open)} timeout="auto" unmountOnExit>
+      <MDBox width="calc(100% + 1.625rem)" my={2} ml={-2}>
+        {renderNavbarItems}
+      </MDBox>
+    </Collapse>
+  );
+}
+
+export default DefaultNavbarMobile;

src/examples/Navbars/DefaultNavbar/index.tsx

@@ -0,0 +1,609 @@
+/* eslint-disable no-param-reassign */
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useState, useEffect, ReactNode, Fragment } from "react";
+
+// react-router components
+import { Link } from "react-router-dom";
+
+// @mui material components
+import Icon from "@mui/material/Icon";
+import Popper from "@mui/material/Popper";
+import Grow, { GrowProps } from "@mui/material/Grow";
+import Grid from "@mui/material/Grid";
+import Divider from "@mui/material/Divider";
+import MuiLink from "@mui/material/Link";
+import Container from "@mui/material/Container";
+import { Theme } from "@mui/material/styles";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDButton from "components/MDButton";
+
+// Material Dashboard 2 PRO React TS examples components
+import DefaultNavbarDropdown from "examples/Navbars/DefaultNavbar/DefaultNavbarDropdown";
+import DefaultNavbarMobile from "examples/Navbars/DefaultNavbar/DefaultNavbarMobile";
+
+// Material Dashboard 2 PRO React TS Base Styles
+import breakpoints from "assets/theme/base/breakpoints";
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController } from "context";
+
+// Declaring props types for DefaultNavbar
+interface Props {
+  routes: {
+    [key: string]:
+      | ReactNode
+      | string
+      | {
+          [key: string]: string | any;
+        }[];
+  }[];
+  brand?: string;
+  transparent?: boolean;
+  light?: boolean;
+  action?: {
+    type: "external" | "internal";
+    route: string;
+    color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light";
+    label: string;
+  };
+}
+
+interface NewGrowTypes extends GrowProps {
+  sx: any;
+  [key: string]: any;
+}
+
+function NewGrow(props: NewGrowTypes) {
+  return <Grow {...props} />;
+}
+
+function DefaultNavbar({ routes, brand, transparent, light, action }: Props): JSX.Element {
+  const [controller] = useMaterialUIController();
+  const { darkMode } = controller;
+
+  const [dropdown, setDropdown] = useState<any>("");
+  const [dropdownEl, setDropdownEl] = useState<any>("");
+  const [dropdownName, setDropdownName] = useState<any>("");
+  const [nestedDropdown, setNestedDropdown] = useState<any>("");
+  const [nestedDropdownEl, setNestedDropdownEl] = useState<any>("");
+  const [nestedDropdownName, setNestedDropdownName] = useState<any>("");
+  const [arrowRef, setArrowRef] = useState<any>(null);
+  const [mobileNavbar, setMobileNavbar] = useState<boolean>(false);
+  const [mobileView, setMobileView] = useState<boolean>(false);
+
+  const openMobileNavbar = () => setMobileNavbar(!mobileNavbar);
+
+  useEffect(() => {
+    // A function that sets the display state for the DefaultNavbarMobile.
+    function displayMobileNavbar() {
+      if (window.innerWidth < breakpoints.values.lg) {
+        setMobileView(true);
+        setMobileNavbar(false);
+      } else {
+        setMobileView(false);
+        setMobileNavbar(false);
+      }
+    }
+
+    /** 
+     The event listener that's calling the displayMobileNavbar function when 
+     resizing the window.
+    */
+    window.addEventListener("resize", displayMobileNavbar);
+
+    // Call the displayMobileNavbar function to set the state with the initial value.
+    displayMobileNavbar();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", displayMobileNavbar);
+  }, []);
+
+  const renderNavbarItems = routes.map(({ name, icon, href, route, collapse }: any) => (
+    <DefaultNavbarDropdown
+      key={name}
+      name={name}
+      icon={icon}
+      href={href}
+      route={route}
+      collapse={Boolean(collapse)}
+      onMouseEnter={({ currentTarget }: any) => {
+        if (collapse) {
+          setDropdown(currentTarget);
+          setDropdownEl(currentTarget);
+          setDropdownName(name);
+        }
+      }}
+      onMouseLeave={() => collapse && setDropdown(null)}
+      light={light}
+    />
+  ));
+
+  // Render the routes on the dropdown menu
+  const renderRoutes = routes.map(({ name, collapse, columns, rowsPerColumn }: any) => {
+    let template;
+
+    // Render the dropdown menu that should be display as columns
+    if (collapse && columns && name === dropdownName) {
+      const calculateColumns = collapse.reduce((resultArray: any, item: any, index: any) => {
+        const chunkIndex = Math.floor(index / rowsPerColumn);
+
+        if (!resultArray[chunkIndex]) {
+          resultArray[chunkIndex] = [];
+        }
+
+        resultArray[chunkIndex].push(item);
+
+        return resultArray;
+      }, []);
+
+      template = (
+        <Grid key={name} container spacing={3} py={1} px={1.5}>
+          {calculateColumns.map((cols: any, key: any) => {
+            const gridKey = `grid-${key}`;
+            const dividerKey = `divider-${key}`;
+
+            return (
+              <Grid key={gridKey} item xs={12 / columns} sx={{ position: "relative" }}>
+                {cols.map((col: any, index: any) => (
+                  <Fragment key={col.name}>
+                    <MDBox
+                      width="100%"
+                      display="flex"
+                      alignItems="center"
+                      py={1}
+                      mt={index !== 0 ? 2 : 0}
+                    >
+                      <MDBox
+                        display="flex"
+                        justifyContent="center"
+                        alignItems="center"
+                        width="1.5rem"
+                        height="1.5rem"
+                        borderRadius="md"
+                        color="text"
+                        mr={1}
+                        fontSize="1rem"
+                        lineHeight={1}
+                      >
+                        {col.icon}
+                      </MDBox>
+                      <MDTypography
+                        display="block"
+                        variant="button"
+                        fontWeight="bold"
+                        textTransform="capitalize"
+                      >
+                        {col.name}
+                      </MDTypography>
+                    </MDBox>
+                    {col.collapse.map((item: any) => (
+                      <MDTypography
+                        key={item.name}
+                        component={item.route ? Link : MuiLink}
+                        to={item.route ? item.route : ""}
+                        href={item.href ? item.href : (e: any) => e.preventDefault()}
+                        target={item.href ? "_blank" : ""}
+                        rel={item.href ? "noreferrer" : "noreferrer"}
+                        minWidth="11.25rem"
+                        display="block"
+                        variant="button"
+                        color="text"
+                        textTransform="capitalize"
+                        fontWeight="regular"
+                        py={0.625}
+                        px={2}
+                        sx={({ palette: { grey, dark }, borders: { borderRadius } }: Theme) => ({
+                          borderRadius: borderRadius.md,
+                          cursor: "pointer",
+                          transition: "all 300ms linear",
+
+                          "&:hover": {
+                            backgroundColor: grey[200],
+                            color: dark.main,
+                          },
+                        })}
+                      >
+                        {item.name}
+                      </MDTypography>
+                    ))}
+                  </Fragment>
+                ))}
+                {key !== 0 && (
+                  <Divider
+                    key={dividerKey}
+                    orientation="vertical"
+                    sx={{
+                      position: "absolute",
+                      top: "50%",
+                      left: "-4px",
+                      transform: "translateY(-45%)",
+                      height: "90%",
+                    }}
+                  />
+                )}
+              </Grid>
+            );
+          })}
+        </Grid>
+      );
+
+      // Render the dropdown menu that should be display as list items
+    } else if (collapse && name === dropdownName) {
+      template = collapse.map((item: any) => {
+        const linkComponent = {
+          component: MuiLink,
+          href: item.href,
+          target: "_blank",
+          rel: "noreferrer",
+        };
+
+        const routeComponent = {
+          component: Link,
+          to: item.route,
+        };
+
+        return (
+          <MDTypography
+            key={item.name}
+            {...(item.route ? routeComponent : linkComponent)}
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            variant="button"
+            textTransform="capitalize"
+            minWidth={item.description ? "14rem" : "12rem"}
+            color={item.description ? "dark" : "text"}
+            fontWeight={item.description ? "bold" : "regular"}
+            py={item.description ? 1 : 0.625}
+            px={2}
+            sx={({ palette: { grey, dark }, borders: { borderRadius } }: Theme) => ({
+              borderRadius: borderRadius.md,
+              cursor: "pointer",
+              transition: "all 300ms linear",
+
+              "&:hover": {
+                backgroundColor: grey[200],
+                color: dark.main,
+
+                "& *": {
+                  color: dark.main,
+                },
+              },
+            })}
+            onMouseEnter={({ currentTarget }: any) => {
+              if (item.dropdown) {
+                setNestedDropdown(currentTarget);
+                setNestedDropdownEl(currentTarget);
+                setNestedDropdownName(item.name);
+              }
+            }}
+            onMouseLeave={() => {
+              if (item.dropdown) {
+                setNestedDropdown(null);
+              }
+            }}
+          >
+            {item.description ? (
+              <MDBox display="flex" py={0.25} fontSize="1rem" color="text">
+                {typeof item.icon === "string" ? (
+                  <Icon color="inherit">{item.icon}</Icon>
+                ) : (
+                  <MDBox color="inherit">{item.icon}</MDBox>
+                )}
+                <MDBox pl={1} lineHeight={0}>
+                  <MDTypography
+                    variant="button"
+                    display="block"
+                    fontWeight="bold"
+                    textTransform="capitalize"
+                  >
+                    {item.name}
+                  </MDTypography>
+                  <MDTypography variant="button" fontWeight="regular" color="text">
+                    {item.description}
+                  </MDTypography>
+                </MDBox>
+              </MDBox>
+            ) : (
+              <MDBox display="flex" alignItems="center" color="text">
+                <Icon sx={{ mr: 1 }}>{item.icon}</Icon>
+                {item.name}
+              </MDBox>
+            )}
+            {item.collapse && (
+              <Icon sx={{ fontWeight: "normal", verticalAlign: "middle", mr: -0.5 }}>
+                keyboard_arrow_right
+              </Icon>
+            )}
+          </MDTypography>
+        );
+      });
+    }
+
+    return template;
+  });
+
+  // Routes dropdown menu
+  const dropdownMenu = (
+    <Popper
+      anchorEl={dropdown}
+      popperRef={null}
+      open={Boolean(dropdown)}
+      placement="top-start"
+      transition
+      style={{ zIndex: 10 }}
+      modifiers={[
+        {
+          name: "arrow",
+          enabled: true,
+          options: {
+            element: arrowRef,
+          },
+        },
+      ]}
+      onMouseEnter={() => setDropdown(dropdownEl)}
+      onMouseLeave={() => {
+        if (!nestedDropdown) {
+          setDropdown(null);
+          setDropdownName("");
+        }
+      }}
+    >
+      {({ TransitionProps }) => (
+        <NewGrow
+          {...TransitionProps}
+          sx={{
+            transformOrigin: "left top",
+            background: ({ palette: { white } }: Theme) => white.main,
+          }}
+        >
+          <MDBox borderRadius="lg">
+            <MDTypography variant="h1" color="white">
+              <Icon ref={setArrowRef} sx={{ mt: -3 }}>
+                arrow_drop_up
+              </Icon>
+            </MDTypography>
+            <MDBox shadow="lg" borderRadius="lg" p={1.625} mt={1}>
+              {renderRoutes}
+            </MDBox>
+          </MDBox>
+        </NewGrow>
+      )}
+    </Popper>
+  );
+
+  // Render routes that are nested inside the dropdown menu routes
+  const renderNestedRoutes = routes.map(({ collapse, columns }: any) =>
+    collapse && !columns
+      ? collapse.map(({ name: parentName, collapse: nestedCollapse }: any) => {
+          let template;
+
+          if (parentName === nestedDropdownName) {
+            template =
+              nestedCollapse &&
+              nestedCollapse.map((item: any) => {
+                const linkComponent = {
+                  component: MuiLink,
+                  href: item.href,
+                  target: "_blank",
+                  rel: "noreferrer",
+                };
+
+                const routeComponent = {
+                  component: Link,
+                  to: item.route,
+                };
+
+                return (
+                  <MDTypography
+                    key={item.name}
+                    {...(item.route ? routeComponent : linkComponent)}
+                    display="flex"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    variant="button"
+                    textTransform="capitalize"
+                    minWidth={item.description ? "14rem" : "12rem"}
+                    color={item.description ? "dark" : "text"}
+                    fontWeight={item.description ? "bold" : "regular"}
+                    py={item.description ? 1 : 0.625}
+                    px={2}
+                    sx={({ palette: { grey, dark }, borders: { borderRadius } }: Theme) => ({
+                      borderRadius: borderRadius.md,
+                      cursor: "pointer",
+                      transition: "all 300ms linear",
+
+                      "&:hover": {
+                        backgroundColor: grey[200],
+                        color: dark.main,
+
+                        "& *": {
+                          color: dark.main,
+                        },
+                      },
+                    })}
+                  >
+                    {item.description ? (
+                      <MDBox>
+                        {item.name}
+                        <MDTypography
+                          display="block"
+                          variant="button"
+                          color="text"
+                          fontWeight="regular"
+                          sx={{ transition: "all 300ms linear" }}
+                        >
+                          {item.description}
+                        </MDTypography>
+                      </MDBox>
+                    ) : (
+                      item.name
+                    )}
+                    {item.collapse && (
+                      <Icon
+                        fontSize="small"
+                        sx={{ fontWeight: "normal", verticalAlign: "middle", mr: -0.5 }}
+                      >
+                        keyboard_arrow_right
+                      </Icon>
+                    )}
+                  </MDTypography>
+                );
+              });
+          }
+
+          return template;
+        })
+      : null
+  );
+
+  // Dropdown menu for the nested dropdowns
+  const nestedDropdownMenu = (
+    <Popper
+      anchorEl={nestedDropdown}
+      popperRef={null}
+      open={Boolean(nestedDropdown)}
+      placement="right-start"
+      transition
+      style={{ zIndex: 10 }}
+      onMouseEnter={() => {
+        setNestedDropdown(nestedDropdownEl);
+      }}
+      onMouseLeave={() => {
+        setNestedDropdown(null);
+        setNestedDropdownName("");
+        setDropdown(null);
+      }}
+    >
+      {({ TransitionProps }) => (
+        <NewGrow
+          {...TransitionProps}
+          sx={{
+            transformOrigin: "left top",
+            background: ({ palette: { white } }: Theme) => white.main,
+          }}
+        >
+          <MDBox ml={2.5} mt={-2.5} borderRadius="lg">
+            <MDBox shadow="lg" borderRadius="lg" py={1.5} px={1} mt={2}>
+              {renderNestedRoutes}
+            </MDBox>
+          </MDBox>
+        </NewGrow>
+      )}
+    </Popper>
+  );
+
+  return (
+    <Container>
+      <MDBox
+        py={1}
+        px={{ xs: 4, sm: transparent ? 2 : 3, lg: transparent ? 0 : 2 }}
+        my={3}
+        mx={3}
+        width="calc(100% - 48px)"
+        borderRadius="lg"
+        shadow={transparent ? "none" : "md"}
+        color={light ? "white" : "dark"}
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        position="absolute"
+        left={0}
+        zIndex={3}
+        sx={({
+          palette: { transparent: transparentColor, white, background },
+          functions: { rgba },
+        }: any) => ({
+          backgroundColor: transparent
+            ? transparentColor.main
+            : rgba(darkMode ? background.sidenav : white.main, 0.8),
+          backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`,
+        })}
+      >
+        <MDBox
+          component={Link}
+          to="/"
+          py={transparent ? 1.5 : 0.75}
+          lineHeight={1}
+          pl={{ xs: 0, lg: 1 }}
+        >
+          <MDTypography variant="button" fontWeight="bold" color={light ? "white" : "dark"}>
+            {brand}
+          </MDTypography>
+        </MDBox>
+        <MDBox color="inherit" display={{ xs: "none", lg: "flex" }} m={0} p={0}>
+          {renderNavbarItems}
+        </MDBox>
+        {action &&
+          (action.type === "internal" ? (
+            <MDBox display={{ xs: "none", lg: "inline-block" }}>
+              <MDButton
+                component={Link}
+                to={action.route}
+                variant="gradient"
+                color={action.color ? action.color : "info"}
+                size="small"
+              >
+                {action.label}
+              </MDButton>
+            </MDBox>
+          ) : (
+            <MDBox display={{ xs: "none", lg: "inline-block" }}>
+              <MDButton
+                component="a"
+                href={action.route}
+                target="_blank"
+                rel="noreferrer"
+                variant="gradient"
+                color={action.color ? action.color : "info"}
+                size="small"
+                sx={{ mt: -0.3 }}
+              >
+                {action.label}
+              </MDButton>
+            </MDBox>
+          ))}
+        <MDBox
+          display={{ xs: "inline-block", lg: "none" }}
+          lineHeight={0}
+          py={1.5}
+          pl={1.5}
+          color="inherit"
+          sx={{ cursor: "pointer" }}
+          onClick={openMobileNavbar}
+        >
+          {mobileView && <DefaultNavbarMobile routes={routes} open={mobileNavbar} />}
+        </MDBox>
+      </MDBox>
+      {dropdownMenu}
+      {nestedDropdownMenu}
+    </Container>
+  );
+}
+
+// Declaring default props for DefaultNavbar
+DefaultNavbar.defaultProps = {
+  brand: "Material Dashboard PRO",
+  transparent: false,
+  light: false,
+  action: false,
+};
+
+export default DefaultNavbar;

src/examples/Sidenav/SidenavCollapse.tsx

@@ -0,0 +1,128 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Collapse from "@mui/material/Collapse";
+import ListItem from "@mui/material/ListItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+
+// Custom styles for the SidenavCollapse
+import {
+  collapseItem,
+  collapseIconBox,
+  collapseIcon,
+  collapseText,
+  collapseArrow,
+} from "examples/Sidenav/styles/sidenavCollapse";
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController } from "context";
+
+// Declaring props types for SidenavCollapse
+interface Props {
+  icon: ReactNode;
+  name: string;
+  children?: ReactNode;
+  active?: Boolean;
+  noCollapse?: Boolean;
+  open?: Boolean;
+  [key: string]: any;
+}
+
+function SidenavCollapse({
+  icon,
+  name,
+  children,
+  active,
+  noCollapse,
+  open,
+  ...rest
+}: Props): JSX.Element {
+  const [controller] = useMaterialUIController();
+  const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
+
+  return (
+    <>
+      <ListItem component="li">
+        <MDBox
+          {...rest}
+          sx={(theme: any) =>
+            collapseItem(theme, { active, transparentSidenav, whiteSidenav, darkMode })
+          }
+        >
+          <ListItemIcon
+            sx={(theme) => collapseIconBox(theme, { transparentSidenav, whiteSidenav, darkMode })}
+          >
+            {typeof icon === "string" ? (
+              <Icon sx={(theme) => collapseIcon(theme, { active })}>{icon}</Icon>
+            ) : (
+              icon
+            )}
+          </ListItemIcon>
+
+          <ListItemText
+            primary={name}
+            sx={(theme) =>
+              collapseText(theme, {
+                miniSidenav,
+                transparentSidenav,
+                whiteSidenav,
+                active,
+              })
+            }
+          />
+
+          <Icon
+            sx={(theme) =>
+              collapseArrow(theme, {
+                noCollapse,
+                transparentSidenav,
+                whiteSidenav,
+                miniSidenav,
+                open,
+                active,
+                darkMode,
+              })
+            }
+          >
+            expand_less
+          </Icon>
+        </MDBox>
+      </ListItem>
+      {children && (
+        <Collapse in={Boolean(open)} unmountOnExit>
+          {children}
+        </Collapse>
+      )}
+    </>
+  );
+}
+
+// Declaring default props for SidenavCollapse
+SidenavCollapse.defaultProps = {
+  active: false,
+  noCollapse: false,
+  children: false,
+  open: false,
+};
+
+export default SidenavCollapse;

src/examples/Sidenav/SidenavItem.tsx

@@ -0,0 +1,101 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Collapse from "@mui/material/Collapse";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import Icon from "@mui/material/Icon";
+import { Theme } from "@mui/material/styles";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+
+// Custom styles for the SidenavItem
+import { item, itemContent, itemArrow } from "examples/Sidenav/styles/sidenavItem";
+
+// Material Dashboard 2 PRO React TS contexts
+import { useMaterialUIController } from "context";
+
+// Declaring props types for SidenavCollapse
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  name: string;
+  active?: boolean | string;
+  nested?: boolean;
+  children?: ReactNode;
+  open?: boolean;
+  [key: string]: any;
+}
+
+function SidenavItem({ color, name, active, nested, children, open, ...rest }: Props): JSX.Element {
+  const [controller] = useMaterialUIController();
+  const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
+
+  return (
+    <>
+      <ListItem
+        {...rest}
+        component="li"
+        sx={(theme) => item(theme, { active, color, transparentSidenav, whiteSidenav, darkMode })}
+      >
+        <MDBox
+          sx={(theme: Theme): any =>
+            itemContent(theme, {
+              active,
+              miniSidenav,
+              name,
+              open,
+              nested,
+              transparentSidenav,
+              whiteSidenav,
+              darkMode,
+            })
+          }
+        >
+          <ListItemText primary={name} />
+          {children && (
+            <Icon
+              component="i"
+              sx={(theme) =>
+                itemArrow(theme, { open, miniSidenav, transparentSidenav, whiteSidenav, darkMode })
+              }
+            >
+              expand_less
+            </Icon>
+          )}
+        </MDBox>
+      </ListItem>
+      {children && (
+        <Collapse in={open} timeout="auto" unmountOnExit {...rest}>
+          {children}
+        </Collapse>
+      )}
+    </>
+  );
+}
+
+// Declaring default props for SidenavItem
+SidenavItem.defaultProps = {
+  color: "info",
+  active: false,
+  nested: false,
+  children: false,
+  open: false,
+};
+
+export default SidenavItem;

src/examples/Sidenav/SidenavList.tsx

@@ -0,0 +1,34 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import List from "@mui/material/List";
+
+function SidenavList({ children }: { children: ReactNode }): JSX.Element {
+  return (
+    <List
+      sx={{
+        px: 2,
+        my: 0.3,
+      }}
+    >
+      {children}
+    </List>
+  );
+}
+
+export default SidenavList;

src/examples/Sidenav/SidenavRoot.tsx

@@ -0,0 +1,92 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import Drawer from "@mui/material/Drawer";
+import { styled, Theme } from "@mui/material/styles";
+
+export default styled(Drawer)(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => {
+  const { palette, boxShadows, transitions, breakpoints, functions } = theme;
+  const { transparentSidenav, whiteSidenav, miniSidenav, darkMode } = ownerState;
+
+  const sidebarWidth = 250;
+  const { transparent, gradients, white, background } = palette;
+  const { xxl } = boxShadows;
+  const { pxToRem, linearGradient } = functions;
+
+  let backgroundValue = darkMode
+    ? background.sidenav
+    : linearGradient(gradients.dark.main, gradients.dark.state);
+
+  if (transparentSidenav) {
+    backgroundValue = transparent.main;
+  } else if (whiteSidenav) {
+    backgroundValue = white.main;
+  }
+
+  // styles for the sidenav when miniSidenav={false}
+  const drawerOpenStyles = () => ({
+    background: backgroundValue,
+    transform: "translateX(0)",
+    transition: transitions.create("transform", {
+      easing: transitions.easing.sharp,
+      duration: transitions.duration.shorter,
+    }),
+
+    [breakpoints.up("xl")]: {
+      boxShadow: transparentSidenav ? "none" : xxl,
+      marginBottom: transparentSidenav ? 0 : "inherit",
+      left: "0",
+      width: sidebarWidth,
+      transform: "translateX(0)",
+      transition: transitions.create(["width", "background-color"], {
+        easing: transitions.easing.sharp,
+        duration: transitions.duration.enteringScreen,
+      }),
+    },
+  });
+
+  // styles for the sidenav when miniSidenav={true}
+  const drawerCloseStyles = () => ({
+    background: backgroundValue,
+    transform: `translateX(${pxToRem(-320)})`,
+    transition: transitions.create("transform", {
+      easing: transitions.easing.sharp,
+      duration: transitions.duration.shorter,
+    }),
+
+    [breakpoints.up("xl")]: {
+      boxShadow: transparentSidenav ? "none" : xxl,
+      marginBottom: transparentSidenav ? 0 : "inherit",
+      left: "0",
+      width: pxToRem(96),
+      overflowX: "hidden",
+      transform: "translateX(0)",
+      transition: transitions.create(["width", "background-color"], {
+        easing: transitions.easing.sharp,
+        duration: transitions.duration.shorter,
+      }),
+    },
+  });
+
+  return {
+    "& .MuiDrawer-paper": {
+      boxShadow: xxl,
+      border: "none",
+
+      ...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles()),
+    },
+  };
+});

src/examples/Sidenav/index.tsx

@@ -0,0 +1,323 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useEffect, useState, ReactNode } from "react";
+
+// react-router-dom components
+import { useLocation, NavLink } from "react-router-dom";
+
+// @mui material components
+import List from "@mui/material/List";
+import Divider from "@mui/material/Divider";
+import Link from "@mui/material/Link";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 PRO React TS examples components
+import SidenavCollapse from "examples/Sidenav/SidenavCollapse";
+import SidenavList from "examples/Sidenav/SidenavList";
+import SidenavItem from "examples/Sidenav/SidenavItem";
+
+// Custom styles for the Sidenav
+import SidenavRoot from "examples/Sidenav/SidenavRoot";
+import sidenavLogoLabel from "examples/Sidenav/styles/sidenav";
+
+// Material Dashboard 2 PRO React context
+import {
+  useMaterialUIController,
+  setMiniSidenav,
+  setTransparentSidenav,
+  setWhiteSidenav,
+} from "context";
+
+// Declaring props types for Sidenav
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  brand?: string;
+  brandName: string;
+  routes: {
+    [key: string]:
+      | ReactNode
+      | string
+      | {
+          [key: string]:
+            | ReactNode
+            | string
+            | {
+                [key: string]: ReactNode | string;
+              }[];
+        }[];
+  }[];
+  [key: string]: any;
+}
+
+function Sidenav({ color, brand, brandName, routes, ...rest }: Props): JSX.Element {
+  const [openCollapse, setOpenCollapse] = useState<boolean | string>(false);
+  const [openNestedCollapse, setOpenNestedCollapse] = useState<boolean | string>(false);
+  const [controller, dispatch] = useMaterialUIController();
+  const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
+  const location = useLocation();
+  const { pathname } = location;
+  const collapseName = pathname.split("/").slice(1)[0];
+  const items = pathname.split("/").slice(1);
+  const itemParentName = items[1];
+  const itemName = items[items.length - 1];
+
+  let textColor:
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "warning"
+    | "error"
+    | "dark"
+    | "white"
+    | "inherit"
+    | "text"
+    | "light" = "white";
+
+  if (transparentSidenav || (whiteSidenav && !darkMode)) {
+    textColor = "dark";
+  } else if (whiteSidenav && darkMode) {
+    textColor = "inherit";
+  }
+
+  const closeSidenav = () => setMiniSidenav(dispatch, true);
+
+  useEffect(() => {
+    setOpenCollapse(collapseName);
+    setOpenNestedCollapse(itemParentName);
+  }, []);
+
+  useEffect(() => {
+    // A function that sets the mini state of the sidenav.
+    function handleMiniSidenav() {
+      setMiniSidenav(dispatch, window.innerWidth < 1200);
+      setTransparentSidenav(dispatch, window.innerWidth < 1200 ? false : transparentSidenav);
+      setWhiteSidenav(dispatch, window.innerWidth < 1200 ? false : whiteSidenav);
+    }
+
+    /** 
+     The event listener that's calling the handleMiniSidenav function when resizing the window.
+    */
+    window.addEventListener("resize", handleMiniSidenav);
+
+    // Call the handleMiniSidenav function to set the state with the initial value.
+    handleMiniSidenav();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleMiniSidenav);
+  }, [dispatch, location]);
+
+  // Render all the nested collapse items from the routes.js
+  const renderNestedCollapse = (collapse: any) => {
+    const template = collapse.map(({ name, route, key, href }: any) =>
+      href ? (
+        <Link
+          key={key}
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+          sx={{ textDecoration: "none" }}
+        >
+          <SidenavItem name={name} nested />
+        </Link>
+      ) : (
+        <NavLink to={route} key={key} style={{ textDecoration: "none" }}>
+          <SidenavItem name={name} active={route === pathname} nested />
+        </NavLink>
+      )
+    );
+
+    return template;
+  };
+  // Render the all the collpases from the routes.js
+  const renderCollapse = (collapses: any) =>
+    collapses.map(({ name, collapse, route, href, key }: any) => {
+      let returnValue;
+
+      if (collapse) {
+        returnValue = (
+          <SidenavItem
+            key={key}
+            color={color}
+            name={name}
+            active={key === itemParentName ? "isParent" : false}
+            open={openNestedCollapse === key}
+            onClick={({ currentTarget }: any) =>
+              openNestedCollapse === key && currentTarget.classList.contains("MuiListItem-root")
+                ? setOpenNestedCollapse(false)
+                : setOpenNestedCollapse(key)
+            }
+          >
+            {renderNestedCollapse(collapse)}
+          </SidenavItem>
+        );
+      } else {
+        returnValue = href ? (
+          <Link
+            href={href}
+            key={key}
+            target="_blank"
+            rel="noreferrer"
+            sx={{ textDecoration: "none" }}
+          >
+            <SidenavItem color={color} name={name} active={key === itemName} />
+          </Link>
+        ) : (
+          <NavLink to={route} key={key} style={{ textDecoration: "none" }}>
+            <SidenavItem color={color} name={name} active={key === itemName} />
+          </NavLink>
+        );
+      }
+      return <SidenavList key={key}>{returnValue}</SidenavList>;
+    });
+
+  // Render all the routes from the routes.js (All the visible items on the Sidenav)
+  const renderRoutes = routes.map(
+    ({ type, name, icon, title, collapse, noCollapse, key, href, route }: any) => {
+      let returnValue;
+
+      if (type === "collapse") {
+        if (href) {
+          returnValue = (
+            <Link
+              href={href}
+              key={key}
+              target="_blank"
+              rel="noreferrer"
+              sx={{ textDecoration: "none" }}
+            >
+              <SidenavCollapse
+                name={name}
+                icon={icon}
+                active={key === collapseName}
+                noCollapse={noCollapse}
+              />
+            </Link>
+          );
+        } else if (noCollapse && route) {
+          returnValue = (
+            <NavLink to={route} key={key}>
+              <SidenavCollapse
+                name={name}
+                icon={icon}
+                noCollapse={noCollapse}
+                active={key === collapseName}
+              >
+                {collapse ? renderCollapse(collapse) : null}
+              </SidenavCollapse>
+            </NavLink>
+          );
+        } else {
+          returnValue = (
+            <SidenavCollapse
+              key={key}
+              name={name}
+              icon={icon}
+              active={key === collapseName}
+              open={openCollapse === key}
+              onClick={() => (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key))}
+            >
+              {collapse ? renderCollapse(collapse) : null}
+            </SidenavCollapse>
+          );
+        }
+      } else if (type === "title") {
+        returnValue = (
+          <MDTypography
+            key={key}
+            color={textColor}
+            display="block"
+            variant="caption"
+            fontWeight="bold"
+            textTransform="uppercase"
+            pl={3}
+            mt={2}
+            mb={1}
+            ml={1}
+          >
+            {title}
+          </MDTypography>
+        );
+      } else if (type === "divider") {
+        returnValue = (
+          <Divider
+            key={key}
+            light={
+              (!darkMode && !whiteSidenav && !transparentSidenav) ||
+              (darkMode && !transparentSidenav && whiteSidenav)
+            }
+          />
+        );
+      }
+
+      return returnValue;
+    }
+  );
+
+  return (
+    <SidenavRoot
+      {...rest}
+      variant="permanent"
+      ownerState={{ transparentSidenav, whiteSidenav, miniSidenav, darkMode }}
+    >
+      <MDBox pt={3} pb={1} px={4} textAlign="center">
+        <MDBox
+          display={{ xs: "block", xl: "none" }}
+          position="absolute"
+          top={0}
+          right={0}
+          p={1.625}
+          onClick={closeSidenav}
+          sx={{ cursor: "pointer" }}
+        >
+          <MDTypography variant="h6" color="secondary">
+            <Icon sx={{ fontWeight: "bold" }}>close</Icon>
+          </MDTypography>
+        </MDBox>
+        <MDBox component={NavLink} to="/" display="flex" alignItems="center">
+          {brand && <MDBox component="img" src={brand} alt="Brand" width="2rem" />}
+          <MDBox
+            width={!brandName && "100%"}
+            sx={(theme: any) => sidenavLogoLabel(theme, { miniSidenav })}
+          >
+            <MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}>
+              {brandName}
+            </MDTypography>
+          </MDBox>
+        </MDBox>
+      </MDBox>
+      <Divider
+        light={
+          (!darkMode && !whiteSidenav && !transparentSidenav) ||
+          (darkMode && !transparentSidenav && whiteSidenav)
+        }
+      />
+      <List>{renderRoutes}</List>
+    </SidenavRoot>
+  );
+}
+
+// Declaring default props for Sidenav
+Sidenav.defaultProps = {
+  color: "info",
+  brand: "",
+};
+
+export default Sidenav;

src/examples/Sidenav/styles/sidenav.ts

@@ -0,0 +1,39 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import { Theme } from "@mui/material/styles";
+
+export default function sidenavLogoLabel(theme: Theme, ownerState: any) {
+  const { functions, transitions, typography, breakpoints } = theme;
+  const { miniSidenav } = ownerState;
+
+  const { pxToRem } = functions;
+  const { fontWeightMedium } = typography;
+
+  return {
+    ml: 0.5,
+    fontWeight: fontWeightMedium,
+    wordSpacing: pxToRem(-1),
+    transition: transitions.create("opacity", {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.standard,
+    }),
+
+    [breakpoints.up("xl")]: {
+      opacity: miniSidenav ? 0 : 1,
+    },
+  };
+}

src/examples/Sidenav/styles/sidenavCollapse.ts

@@ -0,0 +1,170 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import { Theme } from "@mui/material/styles";
+
+function collapseItem(theme: Theme, ownerState: any) {
+  const { palette, transitions, breakpoints, boxShadows, borders, functions } = theme;
+  const { active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
+
+  const { white, transparent, dark, grey } = palette;
+  const { md } = boxShadows;
+  const { borderRadius } = borders;
+  const { pxToRem, rgba } = functions;
+
+  return {
+    background: () => {
+      let backgroundValue;
+
+      if (transparentSidenav && darkMode) {
+        backgroundValue = active ? rgba(white.main, 0.2) : transparent.main;
+      } else if (transparentSidenav && !darkMode) {
+        backgroundValue = active ? grey[300] : transparent.main;
+      } else if (whiteSidenav) {
+        backgroundValue = active ? grey[200] : transparent.main;
+      } else {
+        backgroundValue = active ? rgba(white.main, 0.2) : transparent.main;
+      }
+
+      return backgroundValue;
+    },
+    color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main,
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    padding: `${pxToRem(8)} ${pxToRem(16)}`,
+    margin: `${pxToRem(1.5)} ${pxToRem(16)}`,
+    borderRadius: borderRadius.md,
+    cursor: "pointer",
+    userSelect: "none",
+    whiteSpace: "nowrap",
+    boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : "none",
+    [breakpoints.up("xl")]: {
+      transition: transitions.create(["box-shadow", "background-color"], {
+        easing: transitions.easing.easeInOut,
+        duration: transitions.duration.shorter,
+      }),
+    },
+
+    "&:hover, &:focus": {
+      backgroundColor:
+        transparentSidenav && !darkMode
+          ? grey[300]
+          : rgba(whiteSidenav ? grey[400] : white.main, 0.2),
+    },
+  };
+}
+
+function collapseIconBox(theme: Theme, ownerState: any) {
+  const { palette, transitions, borders, functions } = theme;
+  const { transparentSidenav, whiteSidenav, darkMode } = ownerState;
+
+  const { white, dark } = palette;
+  const { borderRadius } = borders;
+  const { pxToRem } = functions;
+
+  return {
+    minWidth: pxToRem(32),
+    minHeight: pxToRem(32),
+    color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main,
+    borderRadius: borderRadius.md,
+    display: "grid",
+    placeItems: "center",
+    transition: transitions.create("margin", {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.standard,
+    }),
+
+    "& svg, svg g": {
+      color: transparentSidenav || whiteSidenav ? dark.main : white.main,
+    },
+  };
+}
+
+const collapseIcon = ({ palette: { white, gradients } }: Theme, { active }: any) => ({
+  color: active ? white.main : gradients.dark.state,
+});
+
+function collapseText(theme: any, ownerState: any) {
+  const { typography, transitions, breakpoints, functions } = theme;
+  const { miniSidenav, transparentSidenav, active } = ownerState;
+
+  const { size, fontWeightRegular, fontWeightLight } = typography;
+  const { pxToRem } = functions;
+
+  return {
+    marginLeft: pxToRem(10),
+
+    [breakpoints.up("xl")]: {
+      opacity: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : 1,
+      maxWidth: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : "100%",
+      marginLeft: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : pxToRem(10),
+      transition: transitions.create(["opacity", "margin"], {
+        easing: transitions.easing.easeInOut,
+        duration: transitions.duration.standard,
+      }),
+    },
+
+    "& span": {
+      fontWeight: active ? fontWeightRegular : fontWeightLight,
+      fontSize: size.sm,
+      lineHeight: 0,
+    },
+  };
+}
+
+function collapseArrow(theme: Theme, ownerState: any) {
+  const { palette, typography, transitions, breakpoints, functions } = theme;
+  const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } =
+    ownerState;
+
+  const { white, dark } = palette;
+  const { size } = typography;
+  const { pxToRem, rgba } = functions;
+
+  return {
+    fontSize: `${size.lg} !important`,
+    fontWeight: 700,
+    marginBottom: pxToRem(-1),
+    transform: open ? "rotate(0)" : "rotate(-180deg)",
+    color: () => {
+      let colorValue;
+
+      if (transparentSidenav && darkMode) {
+        colorValue = open || active ? white.main : rgba(white.main, 0.25);
+      } else if (transparentSidenav || whiteSidenav) {
+        colorValue = open || active ? dark.main : rgba(dark.main, 0.25);
+      } else {
+        colorValue = open || active ? white.main : rgba(white.main, 0.5);
+      }
+
+      return colorValue;
+    },
+    transition: transitions.create(["color", "transform", "opacity"], {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.shorter,
+    }),
+
+    [breakpoints.up("xl")]: {
+      display:
+        noCollapse || (transparentSidenav && miniSidenav) || miniSidenav
+          ? "none !important"
+          : "block !important",
+    },
+  };
+}
+
+export { collapseItem, collapseIconBox, collapseIcon, collapseText, collapseArrow };

src/examples/Sidenav/styles/sidenavItem.ts

@@ -0,0 +1,160 @@
+/* eslint-disable prefer-destructuring */
+
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import { Theme } from "@mui/material/styles";
+
+function item(theme: Theme | any, ownerState: any) {
+  const { palette, borders, functions, transitions } = theme;
+  const { active, color, transparentSidenav, whiteSidenav, darkMode } = ownerState;
+
+  const { transparent, white, grey } = palette;
+  const { borderRadius } = borders;
+  const { rgba } = functions;
+
+  return {
+    pl: 3,
+    mt: 0.375,
+    mb: 0.3,
+    width: "100%",
+    borderRadius: borderRadius.md,
+    cursor: "pointer",
+    backgroundColor: () => {
+      let backgroundValue = transparent.main;
+
+      if (
+        (active === "isParent" && !transparentSidenav && !whiteSidenav) ||
+        (active === "isParent" && transparentSidenav && darkMode)
+      ) {
+        backgroundValue = rgba(white.main, 0.2);
+      } else if (active === "isParent" && transparentSidenav) {
+        backgroundValue = grey[300];
+      } else if (active === "isParent" && whiteSidenav) {
+        backgroundValue = grey[200];
+      } else if (active) {
+        backgroundValue = palette[color].main;
+      }
+
+      return backgroundValue;
+    },
+    transition: transitions.create("background-color", {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.shorter,
+    }),
+
+    "&:hover, &:focus": {
+      backgroundColor:
+        !active &&
+        rgba((transparentSidenav && !darkMode) || whiteSidenav ? grey[400] : white.main, 0.2),
+    },
+  };
+}
+
+function itemContent(theme: Theme, ownerState: any) {
+  const { palette, typography, transitions, functions } = theme;
+  const { miniSidenav, name, active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
+
+  const { white, dark } = palette;
+  const { size, fontWeightRegular, fontWeightLight } = typography;
+  const { pxToRem } = functions;
+
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: `${pxToRem(12)} ${pxToRem(16)}`,
+    marginLeft: pxToRem(18),
+    userSelect: "none",
+    position: "relative",
+
+    "& span": {
+      color:
+        ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active)
+          ? dark.main
+          : white.main,
+      fontWeight: active ? fontWeightRegular : fontWeightLight,
+      fontSize: size.sm,
+      opacity: miniSidenav ? 0 : 1,
+      transition: transitions.create(["opacity", "color"], {
+        easing: transitions.easing.easeInOut,
+        duration: transitions.duration.standard,
+      }),
+    },
+
+    "&::before": {
+      content: `"${name[0]}"`,
+      color:
+        ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active)
+          ? dark.main
+          : white.main,
+      fontWeight: fontWeightRegular,
+      display: "flex",
+      alignItems: "center",
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      left: pxToRem(-15),
+      opacity: 1,
+      borderRadius: "50%",
+      fontSize: size.sm,
+    },
+  };
+}
+
+function itemArrow(theme: Theme, ownerState: any) {
+  const { palette, typography, transitions, breakpoints, functions } = theme;
+  const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } =
+    ownerState;
+
+  const { white, dark } = palette;
+  const { size } = typography;
+  const { pxToRem, rgba } = functions;
+
+  return {
+    fontSize: `${size.lg} !important`,
+    fontWeight: 700,
+    marginBottom: pxToRem(-1),
+    transform: open ? "rotate(0)" : "rotate(-180deg)",
+    color: () => {
+      let colorValue;
+
+      if (transparentSidenav && darkMode) {
+        colorValue = open || active ? white.main : rgba(white.main, 0.25);
+      } else if (transparentSidenav || whiteSidenav) {
+        colorValue = open || active ? dark.main : rgba(dark.main, 0.25);
+      } else {
+        colorValue = open || active ? white.main : rgba(white.main, 0.5);
+      }
+
+      return colorValue;
+    },
+    transition: transitions.create(["color", "transform", "opacity"], {
+      easing: transitions.easing.easeInOut,
+      duration: transitions.duration.shorter,
+    }),
+
+    [breakpoints.up("xl")]: {
+      display:
+        noCollapse || (transparentSidenav && miniSidenav) || miniSidenav
+          ? "none !important"
+          : "block !important",
+    },
+  };
+}
+
+export { item, itemContent, itemArrow };

src/examples/Tables/DataTable/DataTableBodyCell.tsx

@@ -0,0 +1,61 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import { Theme } from "@mui/material/styles";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+
+// Declaring prop types for DataTableBodyCell
+interface Props {
+  children: ReactNode;
+  noBorder?: boolean;
+  align?: "left" | "right" | "center";
+}
+
+function DataTableBodyCell({ noBorder, align, children }: Props): JSX.Element {
+  return (
+    <MDBox
+      component="td"
+      textAlign={align}
+      py={1.5}
+      px={3}
+      sx={({ palette: { light }, typography: { size }, borders: { borderWidth } }: Theme) => ({
+        fontSize: size.sm,
+        borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`,
+      })}
+    >
+      <MDBox
+        display="inline-block"
+        width="max-content"
+        color="text"
+        sx={{ verticalAlign: "middle" }}
+      >
+        {children}
+      </MDBox>
+    </MDBox>
+  );
+}
+
+// Declaring default props for DataTableBodyCell
+DataTableBodyCell.defaultProps = {
+  noBorder: false,
+  align: "left",
+};
+
+export default DataTableBodyCell;

src/examples/Tables/DataTable/DataTableHeadCell.tsx

@@ -0,0 +1,105 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Icon from "@mui/material/Icon";
+import { Theme } from "@mui/material/styles";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+
+// Material Dashboard 2 PRO React TS contexts
+import { useMaterialUIController } from "context";
+
+// Declaring props types for DataTableHeadCell
+interface Props {
+  width?: string | number;
+  children: ReactNode;
+  sorted?: false | "none" | "asce" | "desc";
+  align?: "left" | "right" | "center";
+}
+
+function DataTableHeadCell({ width, children, sorted, align, ...rest }: Props): JSX.Element {
+  const [controller] = useMaterialUIController();
+  const { darkMode } = controller;
+
+  return (
+    <MDBox
+      component="th"
+      width={width}
+      py={1.5}
+      px={3}
+      sx={({ palette: { light }, borders: { borderWidth } }: Theme) => ({
+        borderBottom: `${borderWidth[1]} solid ${light.main}`,
+      })}
+    >
+      <MDBox
+        {...rest}
+        position="relative"
+        textAlign={align}
+        color={darkMode ? "white" : "secondary"}
+        opacity={0.7}
+        sx={({ typography: { size, fontWeightBold } }: Theme) => ({
+          fontSize: size.xxs,
+          fontWeight: fontWeightBold,
+          textTransform: "uppercase",
+          cursor: sorted && "pointer",
+          userSelect: sorted && "none",
+        })}
+      >
+        {children}
+        {sorted && (
+          <MDBox
+            position="absolute"
+            top={0}
+            right={align !== "right" ? "16px" : 0}
+            left={align === "right" ? "-5px" : "unset"}
+            sx={({ typography: { size } }: any) => ({
+              fontSize: size.lg,
+            })}
+          >
+            <MDBox
+              position="absolute"
+              top={-6}
+              color={sorted === "asce" ? "text" : "secondary"}
+              opacity={sorted === "asce" ? 1 : 0.5}
+            >
+              <Icon>arrow_drop_up</Icon>
+            </MDBox>
+            <MDBox
+              position="absolute"
+              top={0}
+              color={sorted === "desc" ? "text" : "secondary"}
+              opacity={sorted === "desc" ? 1 : 0.5}
+            >
+              <Icon>arrow_drop_down</Icon>
+            </MDBox>
+          </MDBox>
+        )}
+      </MDBox>
+    </MDBox>
+  );
+}
+
+// Declaring default props for DataTableHeadCell
+DataTableHeadCell.defaultProps = {
+  width: "auto",
+  sorted: "none",
+  align: "left",
+};
+
+export default DataTableHeadCell;

src/examples/Tables/DataTable/index.tsx

@@ -0,0 +1,306 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo, useEffect, useState } from "react";
+
+// react-table components
+import { useTable, usePagination, useGlobalFilter, useAsyncDebounce, useSortBy } from "react-table";
+
+// @mui material components
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableContainer from "@mui/material/TableContainer";
+import TableRow from "@mui/material/TableRow";
+import Icon from "@mui/material/Icon";
+import Autocomplete from "@mui/material/Autocomplete";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDInput from "components/MDInput";
+import MDPagination from "components/MDPagination";
+
+// Material Dashboard 2 PRO React TS examples components
+import DataTableHeadCell from "examples/Tables/DataTable/DataTableHeadCell";
+import DataTableBodyCell from "examples/Tables/DataTable/DataTableBodyCell";
+
+// Declaring props types for DataTable
+interface Props {
+  entriesPerPage?:
+    | false
+    | {
+        defaultValue: number;
+        entries: number[];
+      };
+  canSearch?: boolean;
+  showTotalEntries?: boolean;
+  table: {
+    columns: { [key: string]: any }[];
+    rows: { [key: string]: any }[];
+  };
+  pagination?: {
+    variant: "contained" | "gradient";
+    color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light";
+  };
+  isSorted?: boolean;
+  noEndBorder?: boolean;
+}
+
+function DataTable({
+  entriesPerPage,
+  canSearch,
+  showTotalEntries,
+  table,
+  pagination,
+  isSorted,
+  noEndBorder,
+}: Props): JSX.Element {
+  let defaultValue: any;
+  let entries: any[];
+
+  if (entriesPerPage) {
+    defaultValue = entriesPerPage.defaultValue ? entriesPerPage.defaultValue : "10";
+    entries = entriesPerPage.entries ? entriesPerPage.entries : ["10", "25", "50", "100"];
+  }
+
+  const columns = useMemo<any>(() => table.columns, [table]);
+  const data = useMemo<any>(() => table.rows, [table]);
+
+  const tableInstance = useTable(
+    { columns, data, initialState: { pageIndex: 0 } },
+    useGlobalFilter,
+    useSortBy,
+    usePagination
+  );
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    prepareRow,
+    rows,
+    page,
+    pageOptions,
+    canPreviousPage,
+    canNextPage,
+    gotoPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    setGlobalFilter,
+    state: { pageIndex, pageSize, globalFilter },
+  }: any = tableInstance;
+
+  // Set the default value for the entries per page when component mounts
+  useEffect(() => setPageSize(defaultValue || 10), [defaultValue]);
+
+  // Set the entries per page value based on the select value
+  const setEntriesPerPage = (value: any) => setPageSize(value);
+
+  // Render the paginations
+  const renderPagination = pageOptions.map((option: any) => (
+    <MDPagination
+      item
+      key={option}
+      onClick={() => gotoPage(Number(option))}
+      active={pageIndex === option}
+    >
+      {option + 1}
+    </MDPagination>
+  ));
+
+  // Handler for the input to set the pagination index
+  const handleInputPagination = ({ target: { value } }: any) =>
+    value > pageOptions.length || value < 0 ? gotoPage(0) : gotoPage(Number(value));
+
+  // Customized page options starting from 1
+  const customizedPageOptions = pageOptions.map((option: any) => option + 1);
+
+  // Setting value for the pagination input
+  const handleInputPaginationValue = ({ target: value }: any) => gotoPage(Number(value.value - 1));
+
+  // Search input value state
+  const [search, setSearch] = useState(globalFilter);
+
+  // Search input state handle
+  const onSearchChange = useAsyncDebounce((value) => {
+    setGlobalFilter(value || undefined);
+  }, 100);
+
+  // A function that sets the sorted value for the table
+  const setSortedValue = (column: any) => {
+    let sortedValue;
+
+    if (isSorted && column.isSorted) {
+      sortedValue = column.isSortedDesc ? "desc" : "asce";
+    } else if (isSorted) {
+      sortedValue = "none";
+    } else {
+      sortedValue = false;
+    }
+
+    return sortedValue;
+  };
+
+  // Setting the entries starting point
+  const entriesStart = pageIndex === 0 ? pageIndex + 1 : pageIndex * pageSize + 1;
+
+  // Setting the entries ending point
+  let entriesEnd;
+
+  if (pageIndex === 0) {
+    entriesEnd = pageSize;
+  } else if (pageIndex === pageOptions.length - 1) {
+    entriesEnd = rows.length;
+  } else {
+    entriesEnd = pageSize * (pageIndex + 1);
+  }
+
+  return (
+    <TableContainer sx={{ boxShadow: "none" }}>
+      {entriesPerPage || canSearch ? (
+        <MDBox display="flex" justifyContent="space-between" alignItems="center" p={3}>
+          {entriesPerPage && (
+            <MDBox display="flex" alignItems="center">
+              <Autocomplete
+                disableClearable
+                value={pageSize.toString()}
+                options={entries}
+                onChange={(event, newValue) => {
+                  setEntriesPerPage(parseInt(newValue, 10));
+                }}
+                size="small"
+                sx={{ width: "5rem" }}
+                renderInput={(params) => <MDInput {...params} />}
+              />
+              <MDTypography variant="caption" color="secondary">
+                &nbsp;&nbsp;entries per page
+              </MDTypography>
+            </MDBox>
+          )}
+          {canSearch && (
+            <MDBox width="12rem" ml="auto">
+              <MDInput
+                placeholder="Search..."
+                value={search}
+                size="small"
+                fullWidth
+                onChange={({ currentTarget }: any) => {
+                  setSearch(search);
+                  onSearchChange(currentTarget.value);
+                }}
+              />
+            </MDBox>
+          )}
+        </MDBox>
+      ) : null}
+      <Table {...getTableProps()}>
+        <MDBox component="thead">
+          {headerGroups.map((headerGroup: any) => (
+            <TableRow {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((column: any) => (
+                <DataTableHeadCell
+                  {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
+                  width={column.width ? column.width : "auto"}
+                  align={column.align ? column.align : "left"}
+                  sorted={setSortedValue(column)}
+                >
+                  {column.render("Header")}
+                </DataTableHeadCell>
+              ))}
+            </TableRow>
+          ))}
+        </MDBox>
+        <TableBody {...getTableBodyProps()}>
+          {page.map((row: any, key: any) => {
+            prepareRow(row);
+            return (
+              <TableRow {...row.getRowProps()}>
+                {row.cells.map((cell: any) => (
+                  <DataTableBodyCell
+                    noBorder={noEndBorder && rows.length - 1 === key}
+                    align={cell.column.align ? cell.column.align : "left"}
+                    {...cell.getCellProps()}
+                  >
+                    {cell.render("Cell")}
+                  </DataTableBodyCell>
+                ))}
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+
+      <MDBox
+        display="flex"
+        flexDirection={{ xs: "column", sm: "row" }}
+        justifyContent="space-between"
+        alignItems={{ xs: "flex-start", sm: "center" }}
+        p={!showTotalEntries && pageOptions.length === 1 ? 0 : 3}
+      >
+        {showTotalEntries && (
+          <MDBox mb={{ xs: 3, sm: 0 }}>
+            <MDTypography variant="button" color="secondary" fontWeight="regular">
+              Showing {entriesStart} to {entriesEnd} of {rows.length} entries
+            </MDTypography>
+          </MDBox>
+        )}
+        {pageOptions.length > 1 && (
+          <MDPagination
+            variant={pagination.variant ? pagination.variant : "gradient"}
+            color={pagination.color ? pagination.color : "info"}
+          >
+            {canPreviousPage && (
+              <MDPagination item onClick={() => previousPage()}>
+                <Icon sx={{ fontWeight: "bold" }}>chevron_left</Icon>
+              </MDPagination>
+            )}
+            {renderPagination.length > 6 ? (
+              <MDBox width="5rem" mx={1}>
+                <MDInput
+                  inputProps={{ type: "number", min: 1, max: customizedPageOptions.length }}
+                  value={customizedPageOptions[pageIndex]}
+                  onChange={(event: any) => {
+                    handleInputPagination(event);
+                    handleInputPaginationValue(event);
+                  }}
+                />
+              </MDBox>
+            ) : (
+              renderPagination
+            )}
+            {canNextPage && (
+              <MDPagination item onClick={() => nextPage()}>
+                <Icon sx={{ fontWeight: "bold" }}>chevron_right</Icon>
+              </MDPagination>
+            )}
+          </MDPagination>
+        )}
+      </MDBox>
+    </TableContainer>
+  );
+}
+
+// Declaring default props for DataTable
+DataTable.defaultProps = {
+  entriesPerPage: { defaultValue: 10, entries: ["5", "10", "15", "20", "25"] },
+  canSearch: false,
+  showTotalEntries: true,
+  pagination: { variant: "gradient", color: "info" },
+  isSorted: true,
+  noEndBorder: false,
+};
+
+export default DataTable;

src/examples/Tables/SalesTable/SalesTableCell.tsx

@@ -0,0 +1,91 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import TableCell from "@mui/material/TableCell";
+
+// Material Dashboard 2 PRO React TS components
+import MDTypography from "components/MDTypography";
+import MDBox from "components/MDBox";
+
+// Declaring prop types for SalesTableCell
+interface Props {
+  title: string;
+  content?: string | number;
+  image?: string;
+  noBorder?: boolean;
+  [key: string]: any;
+}
+
+function SalesTableCell({ title, content, image, noBorder, ...rest }: Props): JSX.Element {
+  let template;
+
+  if (image) {
+    template = (
+      <TableCell {...rest} align="left" width="30%" sx={{ border: noBorder && 0 }}>
+        <MDBox display="flex" alignItems="center" width="max-content">
+          <MDBox
+            component="img"
+            src={image}
+            alt={content.toString()}
+            width="1.5rem"
+            height="auto"
+          />{" "}
+          <MDBox display="flex" flexDirection="column" ml={3}>
+            <MDTypography
+              variant="caption"
+              color="text"
+              fontWeight="medium"
+              textTransform="capitalize"
+            >
+              {title}:
+            </MDTypography>
+            <MDTypography variant="button" fontWeight="regular" textTransform="capitalize">
+              {content}
+            </MDTypography>
+          </MDBox>
+        </MDBox>
+      </TableCell>
+    );
+  } else {
+    template = (
+      <TableCell {...rest} align="center" sx={{ border: noBorder && 0 }}>
+        <MDBox display="flex" flexDirection="column">
+          <MDTypography
+            variant="caption"
+            color="text"
+            fontWeight="medium"
+            textTransform="capitalize"
+          >
+            {title}:
+          </MDTypography>
+          <MDTypography variant="button" fontWeight="regular" textTransform="capitalize">
+            {content}
+          </MDTypography>
+        </MDBox>
+      </TableCell>
+    );
+  }
+
+  return template;
+}
+
+// Declaring default props for SalesTableCell
+SalesTableCell.defaultProps = {
+  image: "",
+  noBorder: false,
+};
+
+export default SalesTableCell;

src/examples/Tables/SalesTable/index.tsx

@@ -0,0 +1,97 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useMemo } from "react";
+
+// @mui material components
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+
+// Material Dashboard 2 PRO React TS components
+import MDTypography from "components/MDTypography";
+import MDBox from "components/MDBox";
+
+// Material Dashboard 2 PRO React TS examples components
+import SalesTableCell from "examples/Tables/SalesTable/SalesTableCell";
+
+// Declaring props types for SalesTable
+interface Props {
+  title?: string;
+  rows?: {
+    [key: string]: string | number | (string | number)[];
+  }[];
+  shadow?: boolean;
+}
+
+function SalesTable({ title, rows, shadow }: Props): JSX.Element {
+  const renderTableCells = rows.map(
+    (row: { [key: string]: string | number | (string | number)[] }, key: any) => {
+      const tableRows: any = [];
+      const rowKey = `row-${key}`;
+
+      Object.entries(row).map(([cellTitle, cellContent]: any) =>
+        Array.isArray(cellContent)
+          ? tableRows.push(
+              <SalesTableCell
+                key={cellContent[1]}
+                title={cellTitle}
+                content={cellContent[1]}
+                image={cellContent[0]}
+                noBorder={key === rows.length - 1}
+              />
+            )
+          : tableRows.push(
+              <SalesTableCell
+                key={cellContent}
+                title={cellTitle}
+                content={cellContent}
+                noBorder={key === rows.length - 1}
+              />
+            )
+      );
+
+      return <TableRow key={rowKey}>{tableRows}</TableRow>;
+    }
+  );
+
+  return (
+    <TableContainer sx={{ height: "100%", boxShadow: !shadow && "none" }}>
+      <Table>
+        {title ? (
+          <TableHead>
+            <MDBox component="tr" width="max-content" display="block" mb={1.5}>
+              <MDTypography variant="h6" component="td">
+                {title}
+              </MDTypography>
+            </MDBox>
+          </TableHead>
+        ) : null}
+        <TableBody>{useMemo(() => renderTableCells, [rows])}</TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+// Declaring default props for SalesTable
+SalesTable.defaultProps = {
+  title: "",
+  rows: [{}],
+  shadow: true,
+};
+
+export default SalesTable;

src/examples/Timeline/TimelineItem/index.tsx

@@ -0,0 +1,96 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Timeline context
+import { useTimeline } from "examples/Timeline/context";
+
+// Custom styles for the TimelineItem
+import timelineItem from "examples/Timeline/TimelineItem/styles";
+
+// Declaring prop types for TimelineItem
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light";
+  icon: ReactNode;
+  title: string;
+  dateTime: string;
+  description?: string;
+  lastItem?: boolean;
+  [key: string]: any;
+}
+
+function TimelineItem({ color, icon, title, dateTime, description, lastItem }: Props): JSX.Element {
+  const isDark = useTimeline();
+
+  return (
+    <MDBox
+      position="relative"
+      mb={3}
+      sx={(theme: any) => timelineItem(theme, { lastItem, isDark })}
+    >
+      <MDBox
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        bgColor={color}
+        color="white"
+        width="2rem"
+        height="2rem"
+        borderRadius="50%"
+        position="absolute"
+        top="8%"
+        left="2px"
+        zIndex={2}
+        sx={{ fontSize: ({ typography: { size } }: any) => size.sm }}
+      >
+        <Icon fontSize="inherit">{icon}</Icon>
+      </MDBox>
+      <MDBox ml={5.75} pt={description ? 0.7 : 0.5} lineHeight={0} maxWidth="30rem">
+        <MDTypography variant="button" fontWeight="medium" color={isDark ? "white" : "dark"}>
+          {title}
+        </MDTypography>
+        <MDBox mt={0.5}>
+          <MDTypography variant="caption" color={isDark ? "secondary" : "text"}>
+            {dateTime}
+          </MDTypography>
+        </MDBox>
+        <MDBox mt={2} mb={1.5}>
+          {description ? (
+            <MDTypography variant="button" color={isDark ? "white" : "dark"}>
+              {description}
+            </MDTypography>
+          ) : null}
+        </MDBox>
+      </MDBox>
+    </MDBox>
+  );
+}
+
+// Declaring default props for TimelineItem
+TimelineItem.defaultProps = {
+  color: "info",
+  lastItem: false,
+  description: "",
+};
+
+export default TimelineItem;

src/examples/Timeline/TimelineItem/styles.ts

@@ -0,0 +1,23 @@
+// @mui material components
+import { Theme } from "@mui/material/styles";
+
+function timelineItem(theme: Theme, ownerState: any) {
+  const { borders } = theme;
+  const { lastItem, isDark } = ownerState;
+
+  const { borderWidth, borderColor } = borders;
+
+  return {
+    "&:after": {
+      content: !lastItem && "''",
+      position: "absolute",
+      top: "2rem",
+      left: "17px",
+      height: "100%",
+      opacity: isDark ? 0.1 : 1,
+      borderRight: `${borderWidth[2]} solid ${borderColor}`,
+    },
+  };
+}
+
+export default timelineItem;

src/examples/Timeline/TimelineList/index.tsx

@@ -0,0 +1,68 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { ReactNode } from "react";
+
+// @mui material components
+import Card from "@mui/material/Card";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 PRO React TS components
+import { useMaterialUIController } from "context";
+
+// Timeline context
+import { TimelineProvider } from "examples/Timeline/context";
+
+// Declaring props types for TimelineList
+interface Props {
+  title: string;
+  dark?: boolean;
+  children: ReactNode;
+}
+
+function TimelineList({ title, dark, children }: Props): JSX.Element {
+  const [controller] = useMaterialUIController();
+  const { darkMode } = controller;
+
+  return (
+    <TimelineProvider value={dark}>
+      <Card>
+        <MDBox
+          bgColor={dark ? "dark" : "white"}
+          variant="gradient"
+          borderRadius="xl"
+          sx={{ background: ({ palette: { background } }: any) => darkMode && background.card }}
+        >
+          <MDBox pt={3} px={3}>
+            <MDTypography variant="h6" fontWeight="medium" color={dark ? "white" : "dark"}>
+              {title}
+            </MDTypography>
+          </MDBox>
+          <MDBox p={2}>{children}</MDBox>
+        </MDBox>
+      </Card>
+    </TimelineProvider>
+  );
+}
+
+// Declaring default props for TimelineList
+TimelineList.defaultProps = {
+  dark: false,
+};
+
+export default TimelineList;

src/examples/Timeline/context/index.tsx

@@ -0,0 +1,42 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+/* eslint-disable react/prop-types */
+/**
+  This file is used for controlling the dark and light state of the TimelineList and TimelineItem.
+*/
+
+import { createContext, useContext, ReactNode } from "react";
+
+// The Timeline main context
+const Timeline = createContext<JSX.Element | boolean | null>(null);
+
+// Declaring props types for TimelineProvider
+interface Props {
+  children: ReactNode;
+  value: boolean;
+}
+
+// Timeline context provider
+function TimelineProvider({ children, value }: Props): JSX.Element {
+  return <Timeline.Provider value={value}>{children}</Timeline.Provider>;
+}
+
+// Timeline custom hook for using context
+function useTimeline() {
+  return useContext(Timeline);
+}
+
+export { TimelineProvider, useTimeline };