PRDONE-94: updated dashboards, new styles everywhere, moved 90% of codes we are using under qqq directory

.eslintrc.json

@@ -87,6 +87,7 @@
       "no-plusplus": "off",
       "no-underscore-dangle": "off",
       "no-else-return": "off",
+      "react/display-name": "off",
       "spaced-comment": "off",
       "object-curly-spacing": [
          "error",

package.json

@@ -22,6 +22,7 @@
     "@mui/x-license-pro": "5.12.3",
     "@react-jvectormap/core": "1.0.1",
     "@react-jvectormap/world": "1.0.0",
+    "@react-jvectormap/unitedstates": "1.0.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "13.5.0",

public/index.html

@@ -18,7 +18,7 @@ Coded by www.creative-tim.com
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#1A73E8" />
+    <meta name="theme-color" content="#04aaef" />
     <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Nutrifresh One</title>

public/manifest.json

@@ -10,6 +10,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#1A73E8",
+  "theme_color": "#04aaef",
   "background_color": "#ffffff"
 }

src/App.tsx

@@ -31,26 +31,23 @@ import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} f
 import {useCookies} from "react-cookie";
 import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
 import {Md5} from "ts-md5/dist/md5";
-import theme from "assets/theme";
-import themeDark from "assets/theme-dark";
-import MDBox from "components/MDBox";
 import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context";
-import Configurator from "examples/Configurator";
-import Sidenav from "examples/Sidenav";
+import Sidenav from "qqq/components/Sidenav";
+import Configurator from "qqq/components/Temporary/Configurator";
+import MDAvatar from "qqq/components/Temporary/MDAvatar";
+import MDBox from "qqq/components/Temporary/MDBox";
+import theme from "qqq/components/Temporary/Theme"
+import Logo from "qqq/images/logo-blue.png";
 import AppHome from "qqq/pages/app-home";
+import CarrierPerformance from "qqq/pages/dashboards/CarrierPerformance";
+import Overview from "qqq/pages/dashboards/Overview";
+import EntityCreate from "qqq/pages/entity-create";
+import EntityEdit from "qqq/pages/entity-edit";
+import EntityList from "qqq/pages/entity-list";
+import EntityView from "qqq/pages/entity-view";
+import ProcessRun from "qqq/pages/process-run";
+import QClient from "qqq/utils/QClient";
 import QProcessUtils from "qqq/utils/QProcessUtils";
-import MDAvatar from "./components/MDAvatar";
-import Analytics from "./layouts/dashboards/analytics";
-import Sales from "./layouts/dashboards/sales";
-import Settings from "./layouts/pages/account/settings";
-import ProfileOverview from "./layouts/pages/profile/profile-overview";
-import Logo from "./qqq/images/logo.png";
-import EntityCreate from "./qqq/pages/entity-create";
-import EntityEdit from "./qqq/pages/entity-edit";
-import EntityList from "./qqq/pages/entity-list";
-import EntityView from "./qqq/pages/entity-view";
-import ProcessRun from "./qqq/pages/process-run";
-import QClient from "./qqq/utils/QClient";
 
 ///////////////////////////////////////////////////////////////////////////////////////////////
 // define the parts of the nav that are static - before the qqq tables etc get dynamic added //
@@ -66,16 +63,16 @@ function getStaticRoutes()
          icon: <Icon fontSize="medium">dashboard</Icon>,
          collapse: [
             {
-               name: "Analytics",
-               key: "analytics",
-               route: "/dashboards/analytics",
-               component: <Analytics />,
+               name: "Overview",
+               key: "overview",
+               route: "/dashboards/overview",
+               component: <Overview />,
             },
             {
-               name: "Sales",
-               key: "sales",
-               route: "/dashboards/sales",
-               component: <Sales />,
+               name: "Carrier Performance",
+               key: "carrierPerformance",
+               route: "/dashboards/carrierPerformance",
+               component: <CarrierPerformance />,
             },
          ],
       },
@@ -129,7 +126,6 @@ export default function App()
       layout,
       openConfigurator,
       sidenavColor,
-      darkMode,
    } = controller;
    const [onMouseEnter, setOnMouseEnter] = useState(false);
    const {pathname} = useLocation();
@@ -296,20 +292,6 @@ export default function App()
                name: user.name,
                key: user.name,
                icon: <MDAvatar src={profilePicture} alt="{user.name}" size="sm" />,
-               collapse: [
-                  {
-                     name: "My Profile",
-                     key: "my-profile",
-                     route: "/pages/profile/profile-overview",
-                     component: <ProfileOverview />,
-                  },
-                  {
-                     name: "Settings",
-                     key: "profile-settings",
-                     route: "/pages/account/settings",
-                     component: <Settings />,
-                  },
-               ],
             };
             setProfileRoutes(profileRoutes);
 
@@ -430,7 +412,7 @@ export default function App()
 
    return (
       appRoutes && (
-         <ThemeProvider theme={darkMode ? themeDark : theme}>
+         <ThemeProvider theme={theme}>
             <CssBaseline />
             {layout === "dashboard" && (
                <>
@@ -446,7 +428,7 @@ export default function App()
                </>
             )}
             <Routes>
-               <Route path="*" element={<Navigate to="/dashboards/analytics" />} />
+               <Route path="*" element={<Navigate to="/dashboards/overview" />} />
                {appRoutes && getRoutes(appRoutes)}
                {getRoutes(getStaticRoutes())}
                {profileRoutes && getRoutes([profileRoutes])}

src/assets/theme-dark/base/colors.ts

@@ -183,7 +183,7 @@ const colors: Types = {
   },
 
   info: {
-    main: "#1A73E8",
+    main: "#04aaef",
     focus: "#1662C4",
   },
 
@@ -237,7 +237,7 @@ const colors: Types = {
 
     info: {
       main: "#49a3f1",
-      state: "#1A73E8",
+      state: "#04aaef",
     },
 
     success: {

src/assets/theme/base/colors.ts

@@ -181,7 +181,7 @@ const colors: Types = {
   },
 
   info: {
-    main: "#1A73E8",
+    main: "#04aaef",
     focus: "#1662C4",
   },
 
@@ -235,7 +235,7 @@ const colors: Types = {
 
     info: {
       main: "#49a3f1",
-      state: "#1A73E8",
+      state: "#04aaef",
     },
 
     success: {

src/examples/Sidenav/index.tsx

@@ -287,7 +287,7 @@ function Sidenav({ color, brand, brandName, routes, ...rest }: Props): JSX.Eleme
       variant="permanent"
       ownerState={{ transparentSidenav, whiteSidenav, miniSidenav, darkMode }}
     >
-      <MDBox pt={3} pb={1} px={4} textAlign="center">
+      <MDBox pt={3} mr={1} pb={0} px={4} textAlign="center">
         <MDBox
           display={{ xs: "block", xl: "none" }}
           position="absolute"
@@ -302,15 +302,7 @@ function Sidenav({ color, brand, brandName, routes, ...rest }: Props): JSX.Eleme
           </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 component="img" src={brand} alt="Brand" width="100%" />
         </MDBox>
       </MDBox>
       <Divider

src/index.tsx

@@ -24,12 +24,11 @@ import React from "react";
 import {render} from "react-dom";
 import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom";
 import App from "App";
+import "qqq/styles/qqq-override-styles.css";
 import {MaterialUIControllerProvider} from "context";
-import "./qqq/styles/qqq-override-styles.css";
 import HandleAuthorizationError from "HandleAuthorizationError";
 import ProtectedRoute from "qqq/auth0/protected-route";
 
-
 const domain = process.env.REACT_APP_AUTH0_DOMAIN;
 const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
 
@@ -67,7 +66,7 @@ render(
       <Auth0ProviderWithRedirectCallback
          domain={domain}
          clientId={clientId}
-         redirectUri={`${window.location.origin}/dashboards/analytics`}
+         redirectUri={`${window.location.origin}/dashboards/overview`}
       >
          <MaterialUIControllerProvider>
             <ProtectedRoute component={App} />

src/page.routes.tsx

@@ -49,8 +49,8 @@ const pageRoutes = [
             icon: <Icon>dashboard</Icon>,
             collapse: [
                {
-                  name: "analytics",
-                  route: "/dashboards/analytics",
+                  name: "overview",
+                  route: "/dashboards/overview",
                },
                {
                   name: "sales",

src/qqq/components/BaseLayout/index.tsx

@@ -19,19 +19,29 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {useState, useEffect, ReactNode} from "react";
-import breakpoints from "assets/theme/base/breakpoints";
-import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import {useState, ReactNode, useEffect} from "react";
+import DashboardLayout from "qqq/components/DashboardLayout";
 import Footer from "qqq/components/Footer";
 import Navbar from "qqq/components/Navbar";
-import MDBox from "../../../components/MDBox";
+import MDBox from "qqq/components/Temporary/MDBox";
 
-// Declaring props types for BaseLayout
-interface Props {
-  stickyNavbar?: boolean;
-  children: ReactNode;
+interface Props
+{
+   stickyNavbar?: boolean;
+   children: ReactNode;
 }
 
+export const breakpoints = {
+   values: {
+      xs: 0,
+      sm: 576,
+      md: 768,
+      lg: 992,
+      xl: 1200,
+      xxl: 1400,
+   }
+};
+
 function BaseLayout({stickyNavbar, children}: Props): JSX.Element
 {
    const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal");
@@ -47,8 +57,8 @@ function BaseLayout({stickyNavbar, children}: Props): JSX.Element
       }
 
       /**
-         The event listener that's calling the handleTabsOrientation function when resizing the window.
-         */
+       The event listener that's calling the handleTabsOrientation function when resizing the window.
+       */
       window.addEventListener("resize", handleTabsOrientation);
 
       // Call the handleTabsOrientation function to set the state with the initial value.

src/qqq/components/DashboardLayout/index.tsx

@@ -0,0 +1,58 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {useEffect, ReactNode} from "react";
+import {useLocation} from "react-router-dom";
+import {useMaterialUIController, setLayout} from "context";
+import MDBox from "qqq/components/Temporary/MDBox";
+
+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/qqq/components/EntityForm/index.tsx

@@ -32,13 +32,13 @@ import {Form, Formik} from "formik";
 import React, {useReducer, useState} from "react";
 import {useParams, useNavigate, useLocation} from "react-router-dom";
 import * as Yup from "yup";
-import colors from "assets/theme/base/colors";
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
 import {QCancelButton, QSaveButton} from "qqq/components/QButtons";
 import QDynamicForm from "qqq/components/QDynamicForm";
 import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
 import QRecordSidebar from "qqq/components/QRecordSidebar";
+import colors from "qqq/components/Temporary/colors";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
 import QClient from "qqq/utils/QClient";
 import QTableUtils from "qqq/utils/QTableUtils";
 

src/qqq/components/Footer/index.tsx

@@ -20,9 +20,9 @@
  */
 
 import Link from "@mui/material/Link";
-import typography from "assets/theme/base/typography";
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
+import typography from "qqq/components/Temporary/typography";
 
 
 // Declaring props types for Footer

src/qqq/components/Navbar/index.tsx

@@ -26,13 +26,13 @@ import Menu from "@mui/material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import {useState, useEffect} from "react";
 import {useLocation} from "react-router-dom";
-import MDBadge from "components/MDBadge";
-import MDBox from "components/MDBox";
-import MDInput from "components/MDInput";
 import {useMaterialUIController, setTransparentNavbar, setMiniSidenav, setOpenConfigurator,} from "context";
-import NotificationItem from "examples/Items/NotificationItem";
 import {navbar, navbarContainer, navbarRow, navbarIconButton, navbarDesktopMenu, navbarMobileMenu,} from "qqq/components/Navbar/styles";
 import QBreadcrumbs, {routeToLabel} from "qqq/components/QBreadcrumbs";
+import MDBadge from "qqq/components/Temporary/MDBadge";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDInput from "qqq/components/Temporary/MDInput";
+import NotificationItem from "qqq/components/Temporary/NotificationItem";
 
 // Declaring prop types for Navbar
 interface Props

src/qqq/components/ProcessLinkCard/index.tsx

@@ -23,8 +23,8 @@ import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
 import Icon from "@mui/material/Icon";
 import {ReactNode} from "react";
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
 
 interface Props {
   color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";

src/qqq/components/QBreadcrumbs/index.tsx

@@ -23,8 +23,8 @@ import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material";
 import Icon from "@mui/material/Icon";
 import {ReactNode} from "react";
 import {Link} from "react-router-dom";
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
 
 interface Props {
   icon: ReactNode;
@@ -124,7 +124,6 @@ function QBreadcrumbs({
             color={light ? "white" : "dark"}
             noWrap
          >
-            {routeToLabel(title)}
          </MDTypography>
       </MDBox>
    );

src/qqq/components/QButtons/index.tsx

@@ -22,8 +22,8 @@
 import Icon from "@mui/material/Icon";
 import React from "react";
 import {Link} from "react-router-dom";
-import MDBox from "components/MDBox";
-import MDButton from "components/MDButton";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDButton from "qqq/components/Temporary/MDButton";
 
 // eslint-disable import/prefer-default-export
 

src/qqq/components/QDynamicForm/index.tsx

@@ -22,9 +22,9 @@
 import Grid from "@mui/material/Grid";
 import {useFormikContext} from "formik";
 import React from "react";
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
 import QDynamicFormField from "qqq/components/QDynamicFormField";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
 
 interface Props
 {

src/qqq/components/QDynamicFormField/index.tsx

@@ -24,9 +24,9 @@ import Grid from "@mui/material/Grid";
 import Switch from "@mui/material/Switch";
 import {ErrorMessage, Field} from "formik";
 import React, {useState} from "react";
-import MDBox from "components/MDBox";
-import MDInput from "components/MDInput";
-import MDTypography from "components/MDTypography";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDInput from "qqq/components/Temporary/MDInput";
+import MDTypography from "qqq/components/Temporary/MDTypography";
 
 // Declaring props types for FormField
 interface Props

src/qqq/components/QRecordSidebar/index.tsx

@@ -20,14 +20,12 @@
  */
 
 import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
-import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
-import React, {ReactNode} from "react";
-import {Link} from "react-router-dom";
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
+import React from "react";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
 
 interface Props {
    tableSections: QSection[];

src/qqq/components/Sidenav/SidenavCollapse.tsx

@@ -0,0 +1,121 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Collapse from "@mui/material/Collapse";
+import Icon from "@mui/material/Icon";
+import ListItem from "@mui/material/ListItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import {ReactNode} from "react";
+import {useMaterialUIController} from "context";
+import {collapseItem, collapseIconBox, collapseIcon, collapseText, collapseArrow,} from "qqq/components/Sidenav/styles/sidenavCollapse";
+import MDBox from "qqq/components/Temporary/MDBox";
+
+// 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/qqq/components/Sidenav/SidenavItem.tsx

@@ -0,0 +1,100 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Collapse from "@mui/material/Collapse";
+import Icon from "@mui/material/Icon";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import {Theme} from "@mui/material/styles";
+import {ReactNode} from "react";
+import {useMaterialUIController} from "context";
+import {item, itemContent, itemArrow} from "qqq/components/Sidenav/styles/sidenavItem"
+import MDBox from "qqq/components/Temporary/MDBox";
+
+// 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/qqq/components/Sidenav/SidenavList.tsx

@@ -0,0 +1,39 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import List from "@mui/material/List";
+import {ReactNode} from "react";
+
+function SidenavList({children}: { children: ReactNode }): JSX.Element 
+{
+   return (
+      <List
+         sx={{
+            px: 2,
+            my: 0.3,
+         }}
+      >
+         {children}
+      </List>
+   );
+}
+
+export default SidenavList;

src/qqq/components/Sidenav/SidenavRoot.tsx

@@ -0,0 +1,101 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+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/qqq/components/Sidenav/index.tsx

@@ -0,0 +1,337 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+import Link from "@mui/material/Link";
+import List from "@mui/material/List";
+import {useEffect, useState, ReactNode, useReducer} from "react";
+import {useLocation, NavLink} from "react-router-dom";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import {useMaterialUIController, setMiniSidenav, setTransparentSidenav, setWhiteSidenav,} from "context";
+import AuthenticationButton from "qqq/components/Buttons/AuthenticationButton";
+import SidenavCollapse from "qqq/components/Sidenav/SidenavCollapse";
+import SidenavItem from "qqq/components/Sidenav/SidenavItem";
+import SidenavList from "qqq/components/Sidenav/SidenavList";
+import SidenavRoot from "qqq/components/Sidenav/SidenavRoot";
+
+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]: 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];
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+   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);
+      window.onload = () =>
+      {
+         forceUpdate();
+      };
+
+      // 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} mr={1} pb={0} 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">
+               <MDBox component="img" src={brand} alt="Brand" width="100%" />
+            </MDBox>
+         </MDBox>
+         <Divider
+            light={
+               (!darkMode && !whiteSidenav && !transparentSidenav) ||
+          (darkMode && !transparentSidenav && whiteSidenav)
+            }
+         />
+         <List>{renderRoutes}</List>
+         <AuthenticationButton />
+      </SidenavRoot>
+   );
+}
+
+// Declaring default props for Sidenav
+Sidenav.defaultProps = {
+   color: "info",
+   brand: "",
+};
+
+export default Sidenav;

src/qqq/components/Sidenav/styles/sidenav.ts

@@ -0,0 +1,46 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+// @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/qqq/components/Sidenav/styles/sidenavCollapse.ts

@@ -0,0 +1,193 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+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/qqq/components/Sidenav/styles/sidenavItem.ts

@@ -0,0 +1,180 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+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/qqq/components/Temporary/BookingCard/index.tsx

@@ -0,0 +1,128 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+import {ReactNode} from "react";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
+
+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/qqq/components/Temporary/Configurator/ConfiguratorRoot.tsx

@@ -0,0 +1,66 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+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/qqq/components/Temporary/Configurator/index.tsx

@@ -0,0 +1,385 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import FacebookIcon from "@mui/icons-material/Facebook";
+import TwitterIcon from "@mui/icons-material/Twitter";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import Link from "@mui/material/Link";
+import {Theme} from "@mui/material/styles";
+import Switch from "@mui/material/Switch";
+import {useState, useEffect} from "react";
+import GitHubButton from "react-github-btn";
+import {useMaterialUIController, setOpenConfigurator, setTransparentSidenav, setWhiteSidenav, setMiniSidenav, setFixedNavbar, setSidenavColor, setDarkMode,} from "context";
+import ConfiguratorRoot from "qqq/components/Temporary/Configurator/ConfiguratorRoot";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDButton from "qqq/components/Temporary/MDButton";
+import MDTypography from "qqq/components/Temporary/MDTypography";
+
+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/qqq/components/Temporary/DefaultInfoCard/index.tsx

@@ -0,0 +1,84 @@
+/* QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+import {ReactNode} from "react";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
+
+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/qqq/components/Temporary/MDAlert/MDAlertCloseIcon.tsx

@@ -0,0 +1,41 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {styled} from "@mui/material";
+
+export default styled("span")(({theme}) =>
+{
+   const {palette, typography, functions} = theme;
+
+   const {white} = palette;
+   const {size, fontWeightMedium} = typography;
+   const {pxToRem} = functions;
+
+   return {
+      color: white.main,
+      fontSize: size.xl,
+      padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`,
+      marginLeft: pxToRem(40),
+      fontWeight: fontWeightMedium,
+      cursor: "pointer",
+      lineHeight: 0,
+   };
+});

src/qqq/components/Temporary/MDAlert/MDAlertRoot.tsx

@@ -0,0 +1,54 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {styled, Theme} from "@mui/material";
+import Box from "@mui/material/Box";
+
+export default styled(Box)(({theme, ownerState}: { theme?: Theme; ownerState: any }) =>
+{
+   const {palette, typography, borders, functions} = theme;
+   const {color} = ownerState;
+
+   const {white, gradients} = palette;
+   const {size, fontWeightMedium} = typography;
+   const {borderRadius} = borders;
+   const {pxToRem, linearGradient} = functions;
+
+   // backgroundImage value
+   const backgroundImageValue = gradients[color]
+      ? linearGradient(gradients[color].main, gradients[color].state)
+      : linearGradient(gradients.info.main, gradients.info.state);
+
+   return {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      minHeight: pxToRem(60),
+      backgroundImage: backgroundImageValue,
+      color: white.main,
+      position: "relative",
+      padding: pxToRem(16),
+      marginBottom: pxToRem(16),
+      borderRadius: borderRadius.md,
+      fontSize: size.md,
+      fontWeight: fontWeightMedium,
+   };
+});

src/qqq/components/Temporary/MDAlert/index.tsx

@@ -0,0 +1,81 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Fade from "@mui/material/Fade";
+import {useState, ReactNode} from "react";
+import MDAlertCloseIcon from "qqq/components/Temporary/MDAlert/MDAlertCloseIcon";
+import MDAlertRoot from "qqq/components/Temporary/MDAlert/MDAlertRoot";
+import MDBox from "qqq/components/Temporary/MDBox";
+
+// Declaring props types for MDAlert
+interface Props
+{
+   color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+   dismissible?: boolean;
+   children: ReactNode;
+
+   [key: string]: any;
+}
+
+function MDAlert({color, dismissible, children, ...rest}: Props): JSX.Element | null
+{
+   const [alertStatus, setAlertStatus] = useState("mount");
+
+   const handleAlertStatus = () => setAlertStatus("fadeOut");
+
+   // The base template for the alert
+   const alertTemplate: any = (mount: boolean = true) => (
+      <Fade in={mount} timeout={300}>
+         <MDAlertRoot ownerState={{color}} {...rest}>
+            <MDBox display="flex" alignItems="center" color="white">
+               {children}
+            </MDBox>
+            {dismissible ? (
+               <MDAlertCloseIcon onClick={mount ? handleAlertStatus : undefined}>
+                  &times;
+               </MDAlertCloseIcon>
+            ) : null}
+         </MDAlertRoot>
+      </Fade>
+   );
+
+   switch (true)
+   {
+      case alertStatus === "mount":
+         return alertTemplate();
+      case alertStatus === "fadeOut":
+         setTimeout(() => setAlertStatus("unmount"), 400);
+         return alertTemplate(false);
+      default:
+         alertTemplate();
+         break;
+   }
+
+   return null;
+}
+
+// Declaring default props for MDAlert
+MDAlert.defaultProps = {
+   color: "info",
+   dismissible: false,
+};
+
+export default MDAlert;

src/qqq/components/Temporary/MDAvatar/MDAvatarRoot.tsx

@@ -0,0 +1,96 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Avatar from "@mui/material/Avatar";
+import {styled, Theme} from "@mui/material/styles";
+
+export default styled(Avatar)(({theme, ownerState}: { theme?: Theme | any; ownerState: any }) =>
+{
+   const {palette, functions, typography, boxShadows} = theme;
+   const {shadow, bgColor, size} = ownerState;
+
+   const {gradients, transparent, white} = palette;
+   const {pxToRem, linearGradient} = functions;
+   const {size: fontSize, fontWeightRegular} = typography;
+
+   // backgroundImage value
+   const backgroundValue =
+    bgColor === "transparent"
+       ? transparent.main
+       : linearGradient(gradients[bgColor].main, gradients[bgColor].state);
+
+   // size value
+   let sizeValue;
+
+   switch (size)
+   {
+      case "xs":
+         sizeValue = {
+            width: pxToRem(24),
+            height: pxToRem(24),
+            fontSize: fontSize.xs,
+         };
+         break;
+      case "sm":
+         sizeValue = {
+            width: pxToRem(36),
+            height: pxToRem(36),
+            fontSize: fontSize.sm,
+         };
+         break;
+      case "lg":
+         sizeValue = {
+            width: pxToRem(58),
+            height: pxToRem(58),
+            fontSize: fontSize.sm,
+         };
+         break;
+      case "xl":
+         sizeValue = {
+            width: pxToRem(74),
+            height: pxToRem(74),
+            fontSize: fontSize.md,
+         };
+         break;
+      case "xxl":
+         sizeValue = {
+            width: pxToRem(110),
+            height: pxToRem(110),
+            fontSize: fontSize.md,
+         };
+         break;
+      default: {
+         sizeValue = {
+            width: pxToRem(48),
+            height: pxToRem(48),
+            fontSize: fontSize.md,
+         };
+      }
+   }
+
+   return {
+      background: backgroundValue,
+      color: white.main,
+      fontWeight: fontWeightRegular,
+      boxShadow: boxShadows[shadow],
+      ...sizeValue,
+   };
+});

src/qqq/components/Temporary/MDAvatar/index.tsx

@@ -0,0 +1,54 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {AvatarProps} from "@mui/material";
+import {FC, forwardRef} from "react";
+import MDAvatarRoot from "qqq/components/Temporary/MDAvatar/MDAvatarRoot";
+
+// declare props types for MDAvatar
+interface Props extends AvatarProps {
+  bgColor?:
+    | "transparent"
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "warning"
+    | "error"
+    | "light"
+    | "dark";
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+  shadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "inset";
+  [key: string]: any;
+}
+
+const MDAvatar: FC<Props> = forwardRef(({bgColor, size, shadow, ...rest}, ref) => (
+   <MDAvatarRoot ref={ref} ownerState={{shadow, bgColor, size}} {...rest} />
+));
+
+// Declaring default props for MDAvatar
+MDAvatar.defaultProps = {
+   bgColor: "transparent",
+   size: "md",
+   shadow: "none",
+};
+
+export default MDAvatar;

src/qqq/components/Temporary/MDBadge/MDBadgeRoot.tsx

@@ -0,0 +1,147 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Badge from "@mui/material/Badge";
+import {styled, Theme} from "@mui/material/styles";
+
+export default styled(Badge)(({theme, ownerState}: { theme?: Theme; ownerState: any }) =>
+{
+   const {palette, typography, borders, functions} = theme;
+   const {color, circular, border, size, indicator, variant, container, children} = ownerState;
+
+   const {white, dark, gradients, badgeColors} = palette;
+   const {size: fontSize, fontWeightBold} = typography;
+   const {borderRadius, borderWidth} = borders;
+   const {pxToRem, linearGradient} = functions;
+
+   // padding values
+   const paddings: { [key: string]: string } = {
+      xs: "0.45em 0.775em",
+      sm: "0.55em 0.9em",
+      md: "0.65em 1em",
+      lg: "0.85em 1.375em",
+   };
+
+   // fontSize value
+   const fontSizeValue = size === "xs" ? fontSize.xxs : fontSize.xs;
+
+   // border value
+   const borderValue = border ? `${borderWidth[3]} solid ${white.main}` : "none";
+
+   // borderRadius value
+   const borderRadiusValue = circular ? borderRadius.section : borderRadius.md;
+
+   // styles for the badge with indicator={true}
+   const indicatorStyles = (sizeProp: string) =>
+   {
+      let widthValue = pxToRem(20);
+      let heightValue = pxToRem(20);
+
+      if (sizeProp === "medium")
+      {
+         widthValue = pxToRem(24);
+         heightValue = pxToRem(24);
+      }
+      else if (sizeProp === "large")
+      {
+         widthValue = pxToRem(32);
+         heightValue = pxToRem(32);
+      }
+
+      return {
+         width: widthValue,
+         height: heightValue,
+         display: "grid",
+         placeItems: "center",
+         textAlign: "center",
+         borderRadius: "50%",
+         padding: 0,
+         border: borderValue,
+      };
+   };
+
+   // styles for the badge with variant="gradient"
+   const gradientStyles = (colorProp: string) =>
+   {
+      const backgroundValue = gradients[colorProp]
+         ? linearGradient(gradients[colorProp].main, gradients[colorProp].state)
+         : linearGradient(gradients.info.main, gradients.info.state);
+      const colorValue = colorProp === "light" ? dark.main : white.main;
+
+      return {
+         background: backgroundValue,
+         color: colorValue,
+      };
+   };
+
+   // styles for the badge with variant="contained"
+   const containedStyles = (colorProp: string) =>
+   {
+      const backgroundValue = badgeColors[colorProp]
+         ? badgeColors[colorProp].background
+         : badgeColors.info.background;
+      let colorValue = badgeColors[colorProp] ? badgeColors[colorProp].text : badgeColors.info.text;
+
+      if (colorProp === "light")
+      {
+         colorValue = dark.main;
+      }
+      return {
+         background: backgroundValue,
+         color: colorValue,
+      };
+   };
+
+   // styles for the badge with no children and container={false}
+   const standAloneStyles = () => ({
+      position: "static",
+      marginLeft: pxToRem(8),
+      transform: "none",
+      fontSize: pxToRem(9),
+   });
+
+   // styles for the badge with container={true}
+   const containerStyles = () => ({
+      position: "relative",
+      transform: "none",
+   });
+
+   return {
+      "& .MuiBadge-badge": {
+         height: "auto",
+         padding: paddings[size] || paddings.xs,
+         fontSize: fontSizeValue,
+         fontWeight: fontWeightBold,
+         textTransform: "uppercase",
+         lineHeight: 1,
+         textAlign: "center",
+         whiteSpace: "nowrap",
+         verticalAlign: "baseline",
+         border: borderValue,
+         borderRadius: borderRadiusValue,
+         ...(indicator && indicatorStyles(size)),
+         ...(variant === "gradient" && gradientStyles(color)),
+         ...(variant === "contained" && containedStyles(color)),
+         ...(!children && !container && standAloneStyles()),
+         ...(container && containerStyles()),
+      },
+   };
+});

src/qqq/components/Temporary/MDBadge/index.tsx

@@ -0,0 +1,63 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {BadgeProps} from "@mui/material";
+import {FC, ReactNode, forwardRef} from "react";
+import MDBadgeRoot from "qqq/components/Temporary/MDBadge/MDBadgeRoot";
+
+interface Props extends Omit<BadgeProps, "color" | "variant"> {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+  variant?: "gradient" | "contained";
+  size?: "xs" | "sm" | "md" | "lg";
+  circular?: boolean;
+  indicator?: boolean;
+  border?: boolean;
+  children?: ReactNode;
+  container?: boolean;
+  [key: string]: any;
+}
+
+const MDBadge: FC<Props | any> = forwardRef(
+   ({color, variant, size, circular, indicator, border, container, children, ...rest}, ref) => (
+      <MDBadgeRoot
+         {...rest}
+         ownerState={{color, variant, size, circular, indicator, border, container, children}}
+         ref={ref}
+         color="default"
+      >
+         {children}
+      </MDBadgeRoot>
+   )
+);
+
+// declaring default props for MDBadge
+MDBadge.defaultProps = {
+   color: "info",
+   variant: "gradient",
+   size: "sm",
+   circular: false,
+   indicator: false,
+   border: false,
+   container: false,
+   children: false,
+};
+
+export default MDBadge;

src/qqq/components/Temporary/MDBadgeDot/index.tsx

@@ -0,0 +1,120 @@
+/* QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {FC, forwardRef} from "react";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// declaring props types for MDBadgeDot
+interface Props
+{
+   variant?: "gradient" | "contained";
+   color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+   size?: "xs" | "sm" | "md" | "lg";
+   badgeContent: string;
+   font?:
+      | {
+      color: string;
+      weight: string;
+   }
+      | any;
+
+   [key: string]: any;
+}
+
+const MDBadgeDot: FC<Props> = forwardRef(
+   ({variant, color, size, badgeContent, font = {}, ...rest}, ref) =>
+   {
+      let finalSize;
+      let fontSize: any;
+      let padding;
+
+      if (size === "sm")
+      {
+         finalSize = "0.5rem";
+         fontSize = "caption";
+         padding = "0.45em 0.775em";
+      }
+      else if (size === "lg")
+      {
+         finalSize = "0.625rem";
+         fontSize = "body2";
+         padding = "0.85em 1.375em";
+      }
+      else if (size === "md")
+      {
+         finalSize = "0.5rem";
+         fontSize = "button";
+         padding = "0.65em 1em";
+      }
+      else
+      {
+         finalSize = "0.375rem";
+         fontSize = "caption";
+         padding = "0.45em 0.775em";
+      }
+
+      const validColors = [
+         "primary",
+         "secondary",
+         "info",
+         "success",
+         "warning",
+         "error",
+         "light",
+         "dark",
+      ];
+
+      const validColorIndex = validColors.findIndex((el) => el === color);
+
+      return (
+         <MDBox ref={ref} display="flex" alignItems="center" p={padding} {...rest}>
+            <MDBox
+               component="i"
+               display="inline-block"
+               width={finalSize}
+               height={finalSize}
+               borderRadius="50%"
+               bgColor={validColors[validColorIndex]}
+               variant={variant}
+               mr={1}
+            />
+            <MDTypography
+               variant={fontSize}
+               fontWeight={font.weight ? font.weight : "regular"}
+               color={font.color ? font.color : "dark"}
+               sx={{lineHeight: 0}}
+            >
+               {badgeContent}
+            </MDTypography>
+         </MDBox>
+      );
+   }
+);
+
+// Declaring default props for MDBadgeDot
+MDBadgeDot.defaultProps = {
+   variant: "contained",
+   color: "info",
+   size: "xs",
+   font: {},
+};
+
+export default MDBadgeDot;

src/qqq/components/Temporary/MDBox/MDBoxRoot.tsx

@@ -0,0 +1,138 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Box from "@mui/material/Box";
+import {styled, Theme} from "@mui/material/styles";
+
+export default styled(Box)(({theme, ownerState}: { theme?: Theme | any; ownerState: any }) =>
+{
+   const {palette, functions, borders, boxShadows} = theme;
+   const {variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow} = ownerState;
+
+   const {gradients, grey, white} = palette;
+   const {linearGradient} = functions;
+   const {borderRadius: radius} = borders;
+   const {colored} = boxShadows;
+
+   const greyColors: { [key: string]: string } = {
+      "grey-100": grey[100],
+      "grey-200": grey[200],
+      "grey-300": grey[300],
+      "grey-400": grey[400],
+      "grey-500": grey[500],
+      "grey-600": grey[600],
+      "grey-700": grey[700],
+      "grey-800": grey[800],
+      "grey-900": grey[900],
+   };
+
+   const validGradients = [
+      "primary",
+      "secondary",
+      "info",
+      "success",
+      "warning",
+      "error",
+      "dark",
+      "light",
+   ];
+
+   const validColors = [
+      "transparent",
+      "white",
+      "black",
+      "primary",
+      "secondary",
+      "info",
+      "success",
+      "warning",
+      "error",
+      "light",
+      "dark",
+      "text",
+      "grey-100",
+      "grey-200",
+      "grey-300",
+      "grey-400",
+      "grey-500",
+      "grey-600",
+      "grey-700",
+      "grey-800",
+      "grey-900",
+   ];
+
+   const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"];
+   const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"];
+
+   // background value
+   let backgroundValue = bgColor;
+
+   if (variant === "gradient")
+   {
+      backgroundValue = validGradients.find((el) => el === bgColor)
+         ? linearGradient(gradients[bgColor].main, gradients[bgColor].state)
+         : white.main;
+   }
+   else if (validColors.find((el) => el === bgColor))
+   {
+      backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor];
+   }
+   else
+   {
+      backgroundValue = bgColor;
+   }
+
+   // color value
+   let colorValue = color;
+
+   if (validColors.find((el) => el === color))
+   {
+      colorValue = palette[color] ? palette[color].main : greyColors[color];
+   }
+
+   // borderRadius value
+   let borderRadiusValue = borderRadius;
+
+   if (validBorderRadius.find((el) => el === borderRadius))
+   {
+      borderRadiusValue = radius[borderRadius];
+   }
+
+   // boxShadow value
+   let boxShadowValue = "none";
+
+   if (validBoxShadows.find((el) => el === shadow))
+   {
+      boxShadowValue = boxShadows[shadow];
+   }
+   else if (coloredShadow)
+   {
+      boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : "none";
+   }
+
+   return {
+      opacity,
+      background: backgroundValue,
+      color: colorValue,
+      borderRadius: borderRadiusValue,
+      boxShadow: boxShadowValue,
+   };
+});

src/qqq/components/Temporary/MDBox/index.tsx

@@ -0,0 +1,60 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {BoxProps} from "@mui/material";
+import {forwardRef, FC} from "react";
+import MDBoxRoot from "qqq/components/Temporary/MDBox/MDBoxRoot";
+
+
+// declaring props types for MDBox
+interface Props extends BoxProps {
+  variant?: "contained" | "gradient";
+  bgColor?: string;
+  color?: string;
+  opacity?: number;
+  borderRadius?: string;
+  shadow?: string;
+  coloredShadow?: string;
+  [key: string]: any;
+}
+
+const MDBox: FC<Props> = forwardRef(
+   ({variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest}, ref) => (
+      <MDBoxRoot
+         {...rest}
+         ref={ref}
+         ownerState={{variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow}}
+      />
+   )
+);
+
+// Declaring default props for MDBox
+MDBox.defaultProps = {
+   variant: "contained",
+   bgColor: "transparent",
+   color: "dark",
+   opacity: 1,
+   borderRadius: "none",
+   shadow: "none",
+   coloredShadow: "none",
+};
+
+export default MDBox;

src/qqq/components/Temporary/MDButton/MDButtonRoot.tsx

@@ -0,0 +1,309 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Button from "@mui/material/Button";
+import {styled, Theme} from "@mui/material/styles";
+
+export default styled(Button)(({theme, ownerState}: { theme?: Theme | any; ownerState: any }) =>
+{
+   const {palette, functions, borders, boxShadows} = theme;
+   const {color, variant, size, circular, iconOnly, darkMode} = ownerState;
+
+   const {white, text, transparent, gradients, grey} = palette;
+   const {boxShadow, linearGradient, pxToRem, rgba} = functions;
+   const {borderRadius} = borders;
+   const {colored} = boxShadows;
+
+   // styles for the button with variant="contained"
+   const containedStyles = () =>
+   {
+      // background color value
+      const backgroundValue = palette[color] ? palette[color].main : white.main;
+
+      // backgroundColor value when button is focused
+      const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus;
+
+      // boxShadow value
+      const boxShadowValue = colored[color]
+         ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow(
+            [0, 3],
+            [1, -2],
+            palette[color].main,
+            0.2
+         )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}`
+         : "none";
+
+      // boxShadow value when button is hovered
+      const hoveredBoxShadowValue = colored[color]
+         ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow(
+            [0, 4],
+            [23, 0],
+            palette[color].main,
+            0.15
+         )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}`
+         : "none";
+
+      // color value
+      let colorValue = white.main;
+
+      if (!darkMode && (color === "white" || color === "light" || !palette[color]))
+      {
+         colorValue = text.main;
+      }
+      else if (darkMode && (color === "white" || color === "light" || !palette[color]))
+      {
+         colorValue = grey[600];
+      }
+
+      // color value when button is focused
+      let focusedColorValue = white.main;
+
+      if (color === "white")
+      {
+         focusedColorValue = text.main;
+      }
+      else if (color === "primary" || color === "error" || color === "dark")
+      {
+         focusedColorValue = white.main;
+      }
+
+      return {
+         background: backgroundValue,
+         color: colorValue,
+         boxShadow: boxShadowValue,
+
+         "&:hover": {
+            backgroundColor: backgroundValue,
+            color: colorValue,
+            boxShadow: hoveredBoxShadowValue,
+         },
+
+         "&:focus:not(:hover)": {
+            backgroundColor: focusedBackgroundValue,
+            color: colorValue,
+            boxShadow: palette[color]
+               ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5)
+               : boxShadow([0, 0], [0, 3.2], white.main, 0.5),
+         },
+
+         "&:disabled": {
+            backgroundColor: backgroundValue,
+            color: focusedColorValue,
+         },
+      };
+   };
+
+   // styles for the button with variant="outlined"
+   const outlinedStyles = () =>
+   {
+      // background color value
+      const backgroundValue = color === "white" ? rgba(white.main, 0.1) : transparent.main;
+
+      // color value
+      const colorValue = palette[color] ? palette[color].main : white.main;
+
+      // boxShadow value
+      const boxShadowValue = palette[color]
+         ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5)
+         : boxShadow([0, 0], [0, 3.2], white.main, 0.5);
+
+      // border color value
+      let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75);
+
+      if (color === "white")
+      {
+         borderColorValue = rgba(white.main, 0.75);
+      }
+
+      return {
+         background: backgroundValue,
+         color: colorValue,
+         border: `${pxToRem(1)} solid ${borderColorValue}`,
+
+         "&:hover": {
+            background: transparent.main,
+            color: colorValue,
+            borderColor: colorValue,
+            opacity: 0.85,
+         },
+
+         "&:focus:not(:hover)": {
+            background: transparent.main,
+            color: colorValue,
+            boxShadow: boxShadowValue,
+         },
+
+         "&:active:not(:hover)": {
+            backgroundColor: colorValue,
+            color: white.main,
+            opacity: 0.85,
+         },
+
+         "&:disabled": {
+            color: colorValue,
+            borderColor: colorValue,
+         },
+      };
+   };
+
+   // styles for the button with variant="gradient"
+   const gradientStyles = () =>
+   {
+      // background value
+      const backgroundValue =
+         color === "white" || !gradients[color]
+            ? white.main
+            : linearGradient(gradients[color].main, gradients[color].state);
+
+      // boxShadow value
+      const boxShadowValue = colored[color]
+         ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow(
+            [0, 3],
+            [1, -2],
+            palette[color].main,
+            0.2
+         )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}`
+         : "none";
+
+      // boxShadow value when button is hovered
+      const hoveredBoxShadowValue = colored[color]
+         ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow(
+            [0, 4],
+            [23, 0],
+            palette[color].main,
+            0.15
+         )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}`
+         : "none";
+
+      // color value
+      let colorValue = white.main;
+
+      if (color === "white")
+      {
+         colorValue = text.main;
+      }
+      else if (color === "light")
+      {
+         colorValue = gradients.dark.state;
+      }
+
+      return {
+         background: backgroundValue,
+         color: colorValue,
+         boxShadow: boxShadowValue,
+
+         "&:hover": {
+            boxShadow: hoveredBoxShadowValue,
+            color: colorValue,
+         },
+
+         "&:focus:not(:hover)": {
+            boxShadow: boxShadowValue,
+            color: colorValue,
+         },
+
+         "&:disabled": {
+            background: backgroundValue,
+            color: colorValue,
+         },
+      };
+   };
+
+   // styles for the button with variant="text"
+   const textStyles = () =>
+   {
+      // color value
+      const colorValue = palette[color] ? palette[color].main : white.main;
+
+      // color value when button is focused
+      const focusedColorValue = palette[color] ? palette[color].focus : white.focus;
+
+      return {
+         color: colorValue,
+
+         "&:hover": {
+            color: focusedColorValue,
+         },
+
+         "&:focus:not(:hover)": {
+            color: focusedColorValue,
+         },
+      };
+   };
+
+   // styles for the button with circular={true}
+   const circularStyles = () => ({
+      borderRadius: borderRadius.section,
+   });
+
+   // styles for the button with iconOnly={true}
+   const iconOnlyStyles = () =>
+   {
+      // width, height, minWidth and minHeight values
+      let sizeValue = pxToRem(38);
+
+      if (size === "small")
+      {
+         sizeValue = pxToRem(25.4);
+      }
+      else if (size === "large")
+      {
+         sizeValue = pxToRem(52);
+      }
+
+      // padding value
+      let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`;
+
+      if (size === "small")
+      {
+         paddingValue = pxToRem(4.5);
+      }
+      else if (size === "large")
+      {
+         paddingValue = pxToRem(16);
+      }
+
+      return {
+         width: sizeValue,
+         minWidth: sizeValue,
+         height: sizeValue,
+         minHeight: sizeValue,
+         padding: paddingValue,
+
+         "& .material-icons": {
+            marginTop: 0,
+         },
+
+         "&:hover, &:focus, &:active": {
+            transform: "none",
+         },
+      };
+   };
+
+   return {
+      ...(variant === "contained" && containedStyles()),
+      ...(variant === "outlined" && outlinedStyles()),
+      ...(variant === "gradient" && gradientStyles()),
+      ...(variant === "text" && textStyles()),
+      ...(circular && circularStyles()),
+      ...(iconOnly && iconOnlyStyles()),
+   };
+});

src/qqq/components/Temporary/MDButton/index.tsx

@@ -0,0 +1,75 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {ButtonProps} from "@mui/material";
+import {FC, ReactNode, forwardRef} from "react";
+import {useMaterialUIController} from "context";
+import MDButtonRoot from "qqq/components/Temporary/MDButton/MDButtonRoot";
+
+// Declaring props types for MDButton
+export interface Props extends Omit<ButtonProps, "color" | "variant"> {
+  color?:
+    | "white"
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "warning"
+    | "error"
+    | "light"
+    | "dark"
+    | "default";
+  variant?: "text" | "contained" | "outlined" | "gradient";
+  size?: "small" | "medium" | "large";
+  circular?: boolean;
+  iconOnly?: boolean;
+  children?: ReactNode;
+  [key: string]: any;
+}
+
+const MDButton: FC<Props> = forwardRef(
+   ({color, variant, size, circular, iconOnly, children, ...rest}, ref) =>
+   {
+      const [controller] = useMaterialUIController();
+      const {darkMode} = controller;
+
+      return (
+         <MDButtonRoot
+            {...rest}
+            ref={ref}
+            ownerState={{color, variant, size, circular, iconOnly, darkMode}}
+         >
+            {children}
+         </MDButtonRoot>
+      );
+   }
+);
+
+// Declaring default props for MDButton
+MDButton.defaultProps = {
+   color: "white",
+   variant: "contained",
+   size: "medium",
+   circular: false,
+   iconOnly: false,
+};
+
+export default MDButton;

src/qqq/components/Temporary/MDInput/MDInputRoot.tsx

@@ -0,0 +1,77 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {styled, Theme} from "@mui/material/styles";
+import TextField from "@mui/material/TextField";
+
+export default styled(TextField)(({theme, ownerState}: { theme?: Theme; ownerState: any }) =>
+{
+   const {palette, functions} = theme;
+   const {error, success, disabled} = ownerState;
+
+   const {grey, transparent, error: colorError, success: colorSuccess} = palette;
+   const {pxToRem} = functions;
+
+   // styles for the input with error={true}
+   const errorStyles = () => ({
+      backgroundImage:
+         "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F44335' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23F44335' stroke='none'/%3E%3C/svg%3E\")",
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: `right ${pxToRem(12)} center`,
+      backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`,
+
+      "& .Mui-focused": {
+         "& .MuiOutlinedInput-notchedOutline, &:after": {
+            borderColor: colorError.main,
+         },
+      },
+
+      "& .MuiInputLabel-root.Mui-focused": {
+         color: colorError.main,
+      },
+   });
+
+   // styles for the input with success={true}
+   const successStyles = () => ({
+      backgroundImage:
+         "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E\")",
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: `right ${pxToRem(12)} center`,
+      backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`,
+
+      "& .Mui-focused": {
+         "& .MuiOutlinedInput-notchedOutline, &:after": {
+            borderColor: colorSuccess.main,
+         },
+      },
+
+      "& .MuiInputLabel-root.Mui-focused": {
+         color: colorSuccess.main,
+      },
+   });
+
+   return {
+      backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
+      pointerEvents: disabled ? "none" : "auto",
+      ...(error && errorStyles()),
+      ...(success && successStyles()),
+   };
+});

src/qqq/components/Temporary/MDInput/index.tsx

@@ -0,0 +1,44 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {OutlinedTextFieldProps, StandardTextFieldProps} from "@mui/material";
+import {FC, forwardRef} from "react";
+import MDInputRoot from "qqq/components/Temporary/MDInput/MDInputRoot";
+
+interface Props extends Omit<OutlinedTextFieldProps | StandardTextFieldProps, "variant"> {
+  variant?: "standard" | "outlined";
+  error?: boolean;
+  success?: boolean;
+  disabled?: boolean;
+}
+
+const MDInput: FC<Props | any> = forwardRef(({error, success, disabled, ...rest}, ref) => (
+   <MDInputRoot {...rest} ref={ref} ownerState={{error, success, disabled}} />
+));
+
+// Declaring default props for MDInput
+MDInput.defaultProps = {
+   error: false,
+   success: false,
+   disabled: false,
+};
+
+export default MDInput;

src/qqq/components/Temporary/MDTypography/MDTypographyRoot.tsx

@@ -0,0 +1,74 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {styled} from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+
+export default styled(Typography)(({theme, ownerState}: any): any => 
+{
+   const {palette, typography, functions}: any = theme;
+   const {color, textTransform, verticalAlign, fontWeight, opacity, textGradient, darkMode} =
+    ownerState;
+
+   const {gradients, transparent, white} = palette;
+   const {fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold} = typography;
+   const {linearGradient} = functions;
+
+   // fontWeight styles
+   const fontWeights: { [key: string]: number } = {
+      light: fontWeightLight,
+      regular: fontWeightRegular,
+      medium: fontWeightMedium,
+      bold: fontWeightBold,
+   };
+
+   // styles for the typography with textGradient={true}
+   const gradientStyles = () => ({
+      backgroundImage:
+      color !== "inherit" && color !== "text" && color !== "white" && gradients[color]
+         ? linearGradient(gradients[color].main, gradients[color].state)
+         : linearGradient(gradients.dark.main, gradients.dark.state),
+      display: "inline-block",
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: transparent.main,
+      position: "relative",
+      zIndex: 1,
+   });
+
+   // color value
+   let colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main;
+
+   if (darkMode && (color === "inherit" || !palette[color])) 
+   {
+      colorValue = "inherit";
+   }
+   else if (darkMode && color === "dark") colorValue = white.main;
+
+   return {
+      opacity,
+      textTransform,
+      verticalAlign,
+      textDecoration: "none",
+      color: colorValue,
+      fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight],
+      ...(textGradient && gradientStyles()),
+   };
+});

src/qqq/components/Temporary/MDTypography/index.tsx

@@ -0,0 +1,100 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {TypographyProps} from "@mui/material";
+import {FC, ReactNode, forwardRef} from "react";
+import {useMaterialUIController} from "context";
+import MDTypographyRoot from "qqq/components/Temporary/MDTypography/MDTypographyRoot";
+
+// Declaring props types for MDTypography
+interface Props extends TypographyProps
+{
+   color?:
+      | "inherit"
+      | "primary"
+      | "secondary"
+      | "info"
+      | "success"
+      | "warning"
+      | "error"
+      | "light"
+      | "dark"
+      | "text"
+      | "white";
+   fontWeight?: "light" | "regular" | "medium" | "bold" | undefined;
+   textTransform?: "none" | "capitalize" | "uppercase" | "lowercase";
+   verticalAlign?:
+      | "unset"
+      | "baseline"
+      | "sub"
+      | "super"
+      | "text-top"
+      | "text-bottom"
+      | "middle"
+      | "top"
+      | "bottom";
+   textGradient?: boolean;
+   children: ReactNode;
+   opacity?: number;
+
+   [key: string]: any;
+}
+
+const MDTypography: FC<Props | any> = forwardRef(
+   (
+      {color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest},
+      ref
+   ) =>
+   {
+      const [controller] = useMaterialUIController();
+      const {darkMode} = controller;
+
+      return (
+         <MDTypographyRoot
+            {...rest}
+            ref={ref}
+            ownerState={{
+               color,
+               textTransform,
+               verticalAlign,
+               fontWeight,
+               opacity,
+               textGradient,
+               darkMode,
+            }}
+         >
+            {children}
+         </MDTypographyRoot>
+      );
+   }
+);
+
+// Declaring default props for MDTypography
+MDTypography.defaultProps = {
+   color: "dark",
+   fontWeight: undefined,
+   textTransform: "none",
+   verticalAlign: "unset",
+   textGradient: false,
+   opacity: 1,
+};
+
+export default MDTypography;

src/qqq/components/Temporary/MiniStatisticsCard/index.tsx

@@ -0,0 +1,162 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import Icon from "@mui/material/Icon";
+import {ReactNode} from "react";
+import {useMaterialUIController} from "context";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
+
+// 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/qqq/components/Temporary/NotificationItem/index.tsx

@@ -0,0 +1,50 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {MenuItemProps} from "@mui/material";
+import Link from "@mui/material/Link";
+import MenuItem from "@mui/material/MenuItem";
+import {forwardRef, FC, ReactNode} from "react";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
+import menuItem from "qqq/components/Temporary/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/qqq/components/Temporary/NotificationItem/styles.ts

@@ -0,0 +1,60 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+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/qqq/components/Temporary/Theme.ts

@@ -0,0 +1,159 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {createTheme} from "@mui/material";
+import borders from "assets/theme/base/borders";
+import boxShadows from "assets/theme/base/boxShadows";
+import breakpoints from "assets/theme/base/breakpoints";
+import colors from "assets/theme/base/colors";
+import globals from "assets/theme/base/globals";
+import typography from "assets/theme/base/typography";
+import appBar from "assets/theme/components/appBar";
+import avatar from "assets/theme/components/avatar";
+import breadcrumbs from "assets/theme/components/breadcrumbs";
+import button from "assets/theme/components/button";
+import buttonBase from "assets/theme/components/buttonBase";
+import card from "assets/theme/components/card";
+import cardContent from "assets/theme/components/card/cardContent";
+import cardMedia from "assets/theme/components/card/cardMedia";
+import container from "assets/theme/components/container";
+import dialog from "assets/theme/components/dialog";
+import dialogActions from "assets/theme/components/dialog/dialogActions";
+import dialogContent from "assets/theme/components/dialog/dialogContent";
+import dialogContentText from "assets/theme/components/dialog/dialogContentText";
+import dialogTitle from "assets/theme/components/dialog/dialogTitle";
+import divider from "assets/theme/components/divider";
+import flatpickr from "assets/theme/components/flatpickr";
+import autocomplete from "assets/theme/components/form/autocomplete";
+import checkbox from "assets/theme/components/form/checkbox";
+import formControlLabel from "assets/theme/components/form/formControlLabel";
+import formLabel from "assets/theme/components/form/formLabel";
+import input from "assets/theme/components/form/input";
+import inputLabel from "assets/theme/components/form/inputLabel";
+import inputOutlined from "assets/theme/components/form/inputOutlined";
+import radio from "assets/theme/components/form/radio";
+import select from "assets/theme/components/form/select";
+import switchButton from "assets/theme/components/form/switchButton";
+import textField from "assets/theme/components/form/textField";
+import icon from "assets/theme/components/icon";
+import iconButton from "assets/theme/components/iconButton";
+import linearProgress from "assets/theme/components/linearProgress";
+import link from "assets/theme/components/link";
+import list from "assets/theme/components/list";
+import listItem from "assets/theme/components/list/listItem";
+import listItemText from "assets/theme/components/list/listItemText";
+import menu from "assets/theme/components/menu";
+import menuItem from "assets/theme/components/menu/menuItem";
+import popover from "assets/theme/components/popover";
+import sidenav from "assets/theme/components/sidenav";
+import slider from "assets/theme/components/slider";
+import stepper from "assets/theme/components/stepper";
+import step from "assets/theme/components/stepper/step";
+import stepConnector from "assets/theme/components/stepper/stepConnector";
+import stepIcon from "assets/theme/components/stepper/stepIcon";
+import stepLabel from "assets/theme/components/stepper/stepLabel";
+import svgIcon from "assets/theme/components/svgIcon";
+import tableCell from "assets/theme/components/table/tableCell";
+import tableContainer from "assets/theme/components/table/tableContainer";
+import tableHead from "assets/theme/components/table/tableHead";
+import tabs from "assets/theme/components/tabs";
+import tab from "assets/theme/components/tabs/tab";
+import tooltip from "assets/theme/components/tooltip";
+import boxShadow from "assets/theme/functions/boxShadow";
+import hexToRgb from "assets/theme/functions/hexToRgb";
+import linearGradient from "assets/theme/functions/linearGradient";
+import pxToRem from "assets/theme/functions/pxToRem";
+import rgba from "assets/theme/functions/rgba";
+
+export default createTheme({
+   breakpoints: {...breakpoints},
+   palette: {...colors},
+   typography: {...typography},
+   boxShadows: {...boxShadows},
+   borders: {...borders},
+   functions: {
+      boxShadow,
+      hexToRgb,
+      linearGradient,
+      pxToRem,
+      rgba,
+   },
+
+   components: {
+      MuiCssBaseline: {
+
+         styleOverrides: {
+            ...globals,
+            ...flatpickr,
+            ...container,
+         },
+      },
+      MuiDrawer: {...sidenav},
+      MuiList: {...list},
+      MuiListItem: {...listItem},
+      MuiListItemText: {...listItemText},
+      MuiCard: {...card},
+      MuiCardMedia: {...cardMedia},
+      MuiCardContent: {...cardContent},
+      MuiButton: {...button},
+      MuiIconButton: {...iconButton},
+      MuiInput: {...input},
+      MuiInputLabel: {...inputLabel},
+      MuiOutlinedInput: {...inputOutlined},
+      MuiTextField: {...textField},
+      MuiMenu: {...menu},
+      MuiMenuItem: {...menuItem},
+      MuiSwitch: {...switchButton},
+      MuiDivider: {...divider},
+      MuiTableContainer: {...tableContainer},
+      MuiTableHead: {...tableHead},
+      MuiTableCell: {...tableCell},
+      MuiLinearProgress: {...linearProgress},
+      MuiBreadcrumbs: {...breadcrumbs},
+      MuiSlider: {...slider},
+      MuiAvatar: {...avatar},
+      MuiTooltip: {...tooltip},
+      MuiAppBar: {...appBar},
+      MuiTabs: {...tabs},
+      MuiTab: {...tab},
+      MuiStepper: {...stepper},
+      MuiStep: {...step},
+      MuiStepConnector: {...stepConnector},
+      MuiStepLabel: {...stepLabel},
+      MuiStepIcon: {...stepIcon},
+      MuiSelect: {...select},
+      MuiFormControlLabel: {...formControlLabel},
+      MuiFormLabel: {...formLabel},
+      MuiCheckbox: {...checkbox},
+      MuiRadio: {...radio},
+      MuiAutocomplete: {...autocomplete},
+      MuiPopover: {...popover},
+      MuiButtonBase: {...buttonBase},
+      MuiIcon: {...icon},
+      MuiSvgIcon: {...svgIcon},
+      MuiLink: {...link},
+      MuiDialog: {...dialog},
+      MuiDialogTitle: {...dialogTitle},
+      MuiDialogContent: {...dialogContent},
+      MuiDialogContentText: {...dialogContentText},
+      MuiDialogActions: {...dialogActions},
+   },
+});

src/qqq/components/Temporary/Theme/base/borders.ts

@@ -0,0 +1,75 @@
+/**
+=========================================================
+* 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.
+*/
+
+/**
+ * The base border styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
+ * You can add new border width, border color or border radius using this file.
+ * You can customized the borders value for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
+ */
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { grey } = colors;
+
+// types
+interface Types {
+  borderColor: string;
+  borderWidth: {
+    0: number;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+  };
+  borderRadius: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    section: string;
+  };
+}
+
+const borders: Types = {
+  borderColor: grey[300],
+
+  borderWidth: {
+    0: 0,
+    1: pxToRem(1),
+    2: pxToRem(2),
+    3: pxToRem(3),
+    4: pxToRem(4),
+    5: pxToRem(5),
+  },
+
+  borderRadius: {
+    xs: pxToRem(1.6),
+    sm: pxToRem(2),
+    md: pxToRem(6),
+    lg: pxToRem(8),
+    xl: pxToRem(12),
+    xxl: pxToRem(16),
+    section: pxToRem(160),
+  },
+};
+
+export default borders;

src/qqq/components/Temporary/Theme/base/boxShadows.ts

@@ -0,0 +1,148 @@
+/**
+=========================================================
+* 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.
+*/
+
+/**
+ * The base box-shadow styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
+ * You can add new box-shadow using this file.
+ * You can customized the box-shadow for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
+ */
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import boxShadow from "assets/theme/functions/boxShadow";
+
+const { black, white, tabs, coloredShadows } = colors;
+
+// types
+interface Types {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  xxl: string;
+  inset: string;
+  colored:
+    | {
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+        light: string;
+        dark: string;
+      }
+    | any;
+  navbarBoxShadow: string;
+  sliderBoxShadow: {
+    thumb: string;
+  };
+  tabsBoxShadow: {
+    indicator: string;
+  };
+}
+
+const boxShadows: Types = {
+  xs: boxShadow([0, 2], [9, -5], black.main, 0.15),
+  sm: boxShadow([0, 5], [10, 0], black.main, 0.12),
+  md: `${boxShadow([0, 4], [6, -1], black.main, 0.1)}, ${boxShadow(
+    [0, 2],
+    [4, -1],
+    black.main,
+    0.06
+  )}`,
+  lg: `${boxShadow([0, 10], [15, -3], black.main, 0.1)}, ${boxShadow(
+    [0, 4],
+    [6, -2],
+    black.main,
+    0.05
+  )}`,
+  xl: `${boxShadow([0, 20], [25, -5], black.main, 0.1)}, ${boxShadow(
+    [0, 10],
+    [10, -5],
+    black.main,
+    0.04
+  )}`,
+  xxl: boxShadow([0, 20], [27, 0], black.main, 0.05),
+  inset: boxShadow([0, 1], [2, 0], black.main, 0.075, "inset"),
+  colored: {
+    primary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
+      [0, 7],
+      [10, -5],
+      coloredShadows.primary,
+      0.4
+    )}`,
+    secondary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
+      [0, 7],
+      [10, -5],
+      coloredShadows.secondary,
+      0.4
+    )}`,
+    info: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
+      [0, 7],
+      [10, -5],
+      coloredShadows.info,
+      0.4
+    )}`,
+    success: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
+      [0, 7],
+      [10, -5],
+      coloredShadows.success,
+      0.4
+    )}`,
+    warning: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
+      [0, 7],
+      [10, -5],
+      coloredShadows.warning,
+      0.4
+    )}`,
+    error: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
+      [0, 7],
+      [10, -5],
+      coloredShadows.error,
+      0.4
+    )}`,
+    light: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
+      [0, 7],
+      [10, -5],
+      coloredShadows.light,
+      0.4
+    )}`,
+    dark: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
+      [0, 7],
+      [10, -5],
+      coloredShadows.dark,
+      0.4
+    )}`,
+  },
+
+  navbarBoxShadow: `${boxShadow([0, 0], [1, 1], white.main, 0.9, "inset")}, ${boxShadow(
+    [0, 20],
+    [27, 0],
+    black.main,
+    0.05
+  )}`,
+  sliderBoxShadow: {
+    thumb: boxShadow([0, 1], [13, 0], black.main, 0.2),
+  },
+  tabsBoxShadow: {
+    indicator: boxShadow([0, 1], [5, 1], tabs.indicator.boxShadow, 1),
+  },
+};
+
+export default boxShadows;

src/qqq/components/Temporary/Theme/base/breakpoints.ts

@@ -0,0 +1,33 @@
+/**
+=========================================================
+* 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.
+*/
+
+/**
+ * The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
+ * You can add new breakpoints using this file.
+ * You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
+ */
+
+const breakpoints = {
+  values: {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1400,
+  },
+};
+
+export default breakpoints;

src/qqq/components/Temporary/Theme/base/colors.ts

@@ -0,0 +1,389 @@
+/**
+=========================================================
+* 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.
+*/
+
+/**
+ * The base colors for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
+ * You can add new color using this file.
+ * You can customized the colors for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
+ */
+
+// types
+interface ColorsTypes {
+  main: string;
+  focus: string;
+}
+
+interface GradientsTypes {
+  main: string;
+  state: string;
+}
+
+interface SocialMediaColorsTypes {
+  main: string;
+  dark: string;
+}
+
+interface BadgeColorsTypes {
+  background: string;
+  text: string;
+}
+
+interface Types {
+  background:
+    | {
+        default: string;
+        sidenav?: string;
+        card?: string;
+      }
+    | any;
+  white:
+    | {
+        main: string;
+        focus: string;
+      }
+    | any;
+  text:
+    | {
+        main: string;
+        focus: string;
+        primary?: string;
+        secondary?: string;
+        disabled?: string;
+      }
+    | any;
+  transparent:
+    | {
+        main: string;
+      }
+    | any;
+  black:
+    | {
+        light: string;
+        main: string;
+        focus: string;
+      }
+    | any;
+  primary: ColorsTypes | any;
+  secondary: ColorsTypes | any;
+  info: ColorsTypes | any;
+  success: ColorsTypes | any;
+  warning: ColorsTypes | any;
+  error: ColorsTypes | any;
+  light: ColorsTypes | any;
+  dark: ColorsTypes | any;
+  grey:
+    | {
+        [key: string | number]: string;
+      }
+    | any;
+  gradients:
+    | {
+        primary: GradientsTypes;
+        secondary: GradientsTypes;
+        info: GradientsTypes;
+        success: GradientsTypes;
+        warning: GradientsTypes;
+        error: GradientsTypes;
+        light: GradientsTypes;
+        dark: GradientsTypes;
+      }
+    | any;
+  socialMediaColors:
+    | {
+        facebook: SocialMediaColorsTypes;
+        twitter: SocialMediaColorsTypes;
+        instagram: SocialMediaColorsTypes;
+        linkedin: SocialMediaColorsTypes;
+        pinterest: SocialMediaColorsTypes;
+        youtube: SocialMediaColorsTypes;
+        vimeo: SocialMediaColorsTypes;
+        slack: SocialMediaColorsTypes;
+        dribbble: SocialMediaColorsTypes;
+        github: SocialMediaColorsTypes;
+        reddit: SocialMediaColorsTypes;
+        tumblr: SocialMediaColorsTypes;
+      }
+    | any;
+  badgeColors:
+    | {
+        primary: BadgeColorsTypes;
+        secondary: BadgeColorsTypes;
+        info: BadgeColorsTypes;
+        success: BadgeColorsTypes;
+        warning: BadgeColorsTypes;
+        error: BadgeColorsTypes;
+        light: BadgeColorsTypes;
+        dark: BadgeColorsTypes;
+      }
+    | any;
+  coloredShadows:
+    | {
+        [key: string]: string;
+      }
+    | any;
+  inputBorderColor: string;
+  tabs:
+    | {
+        indicator:
+          | {
+              boxShadow: string;
+            }
+          | any;
+      }
+    | any;
+}
+
+const colors: Types = {
+  background: {
+    default: "#f0f2f5",
+  },
+
+  text: {
+    main: "#7b809a",
+    focus: "#7b809a",
+  },
+
+  transparent: {
+    main: "transparent",
+  },
+
+  white: {
+    main: "#ffffff",
+    focus: "#ffffff",
+  },
+
+  black: {
+    light: "#000000",
+    main: "#000000",
+    focus: "#000000",
+  },
+
+  primary: {
+    main: "#e91e63",
+    focus: "#e91e63",
+  },
+
+  secondary: {
+    main: "#7b809a",
+    focus: "#8f93a9",
+  },
+
+  info: {
+    main: "#04aaef",
+    focus: "#1662C4",
+  },
+
+  success: {
+    main: "#4CAF50",
+    focus: "#67bb6a",
+  },
+
+  warning: {
+    main: "#fb8c00",
+    focus: "#fc9d26",
+  },
+
+  error: {
+    main: "#F44335",
+    focus: "#f65f53",
+  },
+
+  light: {
+    main: "#f0f2f5",
+    focus: "#f0f2f5",
+  },
+
+  dark: {
+    main: "#344767",
+    focus: "#2c3c58",
+  },
+
+  grey: {
+    100: "#f8f9fa",
+    200: "#f0f2f5",
+    300: "#dee2e6",
+    400: "#ced4da",
+    500: "#adb5bd",
+    600: "#6c757d",
+    700: "#495057",
+    800: "#343a40",
+    900: "#212529",
+  },
+
+  gradients: {
+    primary: {
+      main: "#EC407A",
+      state: "#D81B60",
+    },
+
+    secondary: {
+      main: "#747b8a",
+      state: "#495361",
+    },
+
+    info: {
+      main: "#49a3f1",
+      state: "#04aaef",
+    },
+
+    success: {
+      main: "#66BB6A",
+      state: "#43A047",
+    },
+
+    warning: {
+      main: "#FFA726",
+      state: "#FB8C00",
+    },
+
+    error: {
+      main: "#EF5350",
+      state: "#E53935",
+    },
+
+    light: {
+      main: "#EBEFF4",
+      state: "#CED4DA",
+    },
+
+    dark: {
+      main: "#42424a",
+      state: "#191919",
+    },
+  },
+
+  socialMediaColors: {
+    facebook: {
+      main: "#3b5998",
+      dark: "#344e86",
+    },
+
+    twitter: {
+      main: "#55acee",
+      dark: "#3ea1ec",
+    },
+
+    instagram: {
+      main: "#125688",
+      dark: "#0e456d",
+    },
+
+    linkedin: {
+      main: "#0077b5",
+      dark: "#00669c",
+    },
+
+    pinterest: {
+      main: "#cc2127",
+      dark: "#b21d22",
+    },
+
+    youtube: {
+      main: "#e52d27",
+      dark: "#d41f1a",
+    },
+
+    vimeo: {
+      main: "#1ab7ea",
+      dark: "#13a3d2",
+    },
+
+    slack: {
+      main: "#3aaf85",
+      dark: "#329874",
+    },
+
+    dribbble: {
+      main: "#ea4c89",
+      dark: "#e73177",
+    },
+
+    github: {
+      main: "#24292e",
+      dark: "#171a1d",
+    },
+
+    reddit: {
+      main: "#ff4500",
+      dark: "#e03d00",
+    },
+
+    tumblr: {
+      main: "#35465c",
+      dark: "#2a3749",
+    },
+  },
+
+  badgeColors: {
+    primary: {
+      background: "#f8b3ca",
+      text: "#cc084b",
+    },
+
+    secondary: {
+      background: "#d7d9e1",
+      text: "#6c757d",
+    },
+
+    info: {
+      background: "#aecef7",
+      text: "#095bc6",
+    },
+
+    success: {
+      background: "#bce2be",
+      text: "#339537",
+    },
+
+    warning: {
+      background: "#ffd59f",
+      text: "#c87000",
+    },
+
+    error: {
+      background: "#fcd3d0",
+      text: "#f61200",
+    },
+
+    light: {
+      background: "#ffffff",
+      text: "#c7d3de",
+    },
+
+    dark: {
+      background: "#8097bf",
+      text: "#1e2e4a",
+    },
+  },
+
+  coloredShadows: {
+    primary: "#e91e62",
+    secondary: "#110e0e",
+    info: "#00bbd4",
+    success: "#4caf4f",
+    warning: "#ff9900",
+    error: "#f44336",
+    light: "#adb5bd",
+    dark: "#404040",
+  },
+
+  inputBorderColor: "#d2d6da",
+
+  tabs: {
+    indicator: { boxShadow: "#ddd" },
+  },
+};
+
+export default colors;

src/qqq/components/Temporary/Theme/base/globals.ts

@@ -0,0 +1,41 @@
+/**
+=========================================================
+* 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 colors from "assets/theme/base/colors";
+
+const { info, dark } = colors;
+
+const globals = {
+  html: {
+    scrollBehavior: "smooth",
+  },
+  "*, *::before, *::after": {
+    margin: 0,
+    padding: 0,
+  },
+  "a, a:link, a:visited": {
+    textDecoration: "none !important",
+  },
+  "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": {
+    color: `${dark.main} !important`,
+    transition: "color 150ms ease-in !important",
+  },
+  "a.link:hover, .link:hover, a.link:focus, .link:focus": {
+    color: `${info.main} !important`,
+  },
+};
+
+export default globals;

src/qqq/components/Temporary/Theme/base/typography.ts

@@ -0,0 +1,320 @@
+/**
+=========================================================
+* 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.
+*/
+
+/**
+ * The base typography styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
+ * You can add new typography style using this file.
+ * You can customized the typography styles for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
+ */
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { dark } = colors;
+
+// types
+interface DisplayTypes {
+  fontFamily: string;
+  color: string;
+  fontWeight: number;
+  lineHeight: number;
+  fontSize: string;
+}
+
+interface Types {
+  fontFamily: string;
+  fontWeightLighter: number;
+  fontWeightLight: number;
+  fontWeightRegular: number;
+  fontWeightMedium: number;
+  fontWeightBold: number;
+  h1: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    color: string;
+    lineHeight: number;
+  };
+  h2: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    color: string;
+    lineHeight: number;
+  };
+  h3: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    color: string;
+    lineHeight: number;
+  };
+  h4: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    color: string;
+    lineHeight: number;
+  };
+  h5: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    color: string;
+    lineHeight: number;
+  };
+  h6: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    color: string;
+    lineHeight: number;
+  };
+  subtitle1: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: number;
+  };
+  subtitle2: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: number;
+  };
+  body1: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: number;
+  };
+  body2: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: number;
+  };
+  button: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: number;
+    textTransform: any;
+  };
+  caption: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: number;
+  };
+  overline: {
+    fontFamily: string;
+  };
+  d1: DisplayTypes;
+  d2: DisplayTypes;
+  d3: DisplayTypes;
+  d4: DisplayTypes;
+  d5: DisplayTypes;
+  d6: DisplayTypes;
+  size: {
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+  };
+  lineHeight: {
+    sm: number;
+    md: number;
+    lg: number;
+  };
+}
+
+const baseProperties = {
+  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontWeightLighter: 100,
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 600,
+  fontWeightBold: 700,
+  fontSizeXXS: pxToRem(10.4),
+  fontSizeXS: pxToRem(12),
+  fontSizeSM: pxToRem(14),
+  fontSizeMD: pxToRem(16),
+  fontSizeLG: pxToRem(18),
+  fontSizeXL: pxToRem(20),
+  fontSize2XL: pxToRem(24),
+  fontSize3XL: pxToRem(30),
+};
+
+const baseHeadingProperties = {
+  fontFamily: baseProperties.fontFamily,
+  color: dark.main,
+  fontWeight: baseProperties.fontWeightBold,
+};
+
+const baseDisplayProperties = {
+  fontFamily: baseProperties.fontFamily,
+  color: dark.main,
+  fontWeight: baseProperties.fontWeightLight,
+  lineHeight: 1.2,
+};
+
+const typography: Types = {
+  fontFamily: baseProperties.fontFamily,
+  fontWeightLighter: baseProperties.fontWeightLighter,
+  fontWeightLight: baseProperties.fontWeightLight,
+  fontWeightRegular: baseProperties.fontWeightRegular,
+  fontWeightMedium: baseProperties.fontWeightMedium,
+  fontWeightBold: baseProperties.fontWeightBold,
+
+  h1: {
+    fontSize: pxToRem(48),
+    lineHeight: 1.25,
+    ...baseHeadingProperties,
+  },
+
+  h2: {
+    fontSize: pxToRem(36),
+    lineHeight: 1.3,
+    ...baseHeadingProperties,
+  },
+
+  h3: {
+    fontSize: pxToRem(30),
+    lineHeight: 1.375,
+    ...baseHeadingProperties,
+  },
+
+  h4: {
+    fontSize: pxToRem(24),
+    lineHeight: 1.375,
+    ...baseHeadingProperties,
+  },
+
+  h5: {
+    fontSize: pxToRem(20),
+    lineHeight: 1.375,
+    ...baseHeadingProperties,
+  },
+
+  h6: {
+    fontSize: pxToRem(16),
+    lineHeight: 1.625,
+    ...baseHeadingProperties,
+  },
+
+  subtitle1: {
+    fontFamily: baseProperties.fontFamily,
+    fontSize: baseProperties.fontSizeXL,
+    fontWeight: baseProperties.fontWeightLight,
+    lineHeight: 1.625,
+  },
+
+  subtitle2: {
+    fontFamily: baseProperties.fontFamily,
+    fontSize: baseProperties.fontSizeMD,
+    fontWeight: baseProperties.fontWeightLight,
+    lineHeight: 1.6,
+  },
+
+  body1: {
+    fontFamily: baseProperties.fontFamily,
+    fontSize: baseProperties.fontSizeXL,
+    fontWeight: baseProperties.fontWeightRegular,
+    lineHeight: 1.625,
+  },
+
+  body2: {
+    fontFamily: baseProperties.fontFamily,
+    fontSize: baseProperties.fontSizeMD,
+    fontWeight: baseProperties.fontWeightLight,
+    lineHeight: 1.6,
+  },
+
+  button: {
+    fontFamily: baseProperties.fontFamily,
+    fontSize: baseProperties.fontSizeSM,
+    fontWeight: baseProperties.fontWeightLight,
+    lineHeight: 1.5,
+    textTransform: "uppercase",
+  },
+
+  caption: {
+    fontFamily: baseProperties.fontFamily,
+    fontSize: baseProperties.fontSizeXS,
+    fontWeight: baseProperties.fontWeightLight,
+    lineHeight: 1.25,
+  },
+
+  overline: {
+    fontFamily: baseProperties.fontFamily,
+  },
+
+  d1: {
+    fontSize: pxToRem(80),
+    ...baseDisplayProperties,
+  },
+
+  d2: {
+    fontSize: pxToRem(72),
+    ...baseDisplayProperties,
+  },
+
+  d3: {
+    fontSize: pxToRem(64),
+    ...baseDisplayProperties,
+  },
+
+  d4: {
+    fontSize: pxToRem(56),
+    ...baseDisplayProperties,
+  },
+
+  d5: {
+    fontSize: pxToRem(48),
+    ...baseDisplayProperties,
+  },
+
+  d6: {
+    fontSize: pxToRem(40),
+    ...baseDisplayProperties,
+  },
+
+  size: {
+    xxs: baseProperties.fontSizeXXS,
+    xs: baseProperties.fontSizeXS,
+    sm: baseProperties.fontSizeSM,
+    md: baseProperties.fontSizeMD,
+    lg: baseProperties.fontSizeLG,
+    xl: baseProperties.fontSizeXL,
+    "2xl": baseProperties.fontSize2XL,
+    "3xl": baseProperties.fontSize3XL,
+  },
+
+  lineHeight: {
+    sm: 1.25,
+    md: 1.5,
+    lg: 2,
+  },
+};
+
+export default typography;

src/qqq/components/Temporary/Theme/components/appBar.ts

@@ -0,0 +1,31 @@
+/**
+=========================================================
+* 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.
+*/
+
+// types
+type Types = any;
+
+const appBar: Types = {
+  defaultProps: {
+    color: "transparent",
+  },
+
+  styleOverrides: {
+    root: {
+      boxShadow: "none",
+    },
+  },
+};
+
+export default appBar;

src/qqq/components/Temporary/Theme/components/avatar.ts

@@ -0,0 +1,40 @@
+/**
+=========================================================
+* 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 borders from "assets/theme/base/borders";
+
+const { borderRadius } = borders;
+
+// types
+type Types = any;
+
+const avatar: Types = {
+  styleOverrides: {
+    root: {
+      transition: "all 200ms ease-in-out",
+    },
+
+    rounded: {
+      borderRadius: borderRadius.lg,
+    },
+
+    img: {
+      height: "auto",
+    },
+  },
+};
+
+export default avatar;

src/qqq/components/Temporary/Theme/components/breadcrumbs.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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+import typography from "assets/theme/base/typography";
+
+const { grey } = colors;
+const { size } = typography;
+
+// types
+type Types = any;
+
+const breadcrumbs: Types = {
+  styleOverrides: {
+    li: {
+      lineHeight: 0,
+    },
+
+    separator: {
+      fontSize: size.sm,
+      color: grey[600],
+    },
+  },
+};
+
+export default breadcrumbs;

src/qqq/components/Temporary/Theme/components/button/contained.ts

@@ -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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+import typography from "assets/theme/base/typography";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { white, text, info, secondary } = colors;
+const { size } = typography;
+
+const contained = {
+  base: {
+    backgroundColor: white.main,
+    minHeight: pxToRem(40),
+    color: text.main,
+    padding: `${pxToRem(10)} ${pxToRem(24)}`,
+
+    "&:hover": {
+      backgroundColor: white.main,
+    },
+
+    "&:active, &:active:focus, &:active:hover": {
+      opacity: 0.85,
+    },
+
+    "& .material-icon, .material-icons-round, svg": {
+      fontSize: `${pxToRem(16)} !important`,
+    },
+  },
+
+  small: {
+    minHeight: pxToRem(32),
+    padding: `${pxToRem(6)} ${pxToRem(16)}`,
+    fontSize: size.xs,
+
+    "& .material-icon, .material-icons-round, svg": {
+      fontSize: `${pxToRem(12)} !important`,
+    },
+  },
+
+  large: {
+    minHeight: pxToRem(47),
+    padding: `${pxToRem(12)} ${pxToRem(28)}`,
+    fontSize: size.sm,
+
+    "& .material-icon, .material-icons-round, svg": {
+      fontSize: `${pxToRem(22)} !important`,
+    },
+  },
+
+  primary: {
+    backgroundColor: info.main,
+
+    "&:hover": {
+      backgroundColor: info.main,
+    },
+
+    "&:focus:not(:hover)": {
+      backgroundColor: info.focus,
+    },
+  },
+
+  secondary: {
+    backgroundColor: secondary.main,
+
+    "&:hover": {
+      backgroundColor: secondary.main,
+    },
+
+    "&:focus:not(:hover)": {
+      backgroundColor: secondary.focus,
+    },
+  },
+};
+
+export default contained;

src/qqq/components/Temporary/Theme/components/button/index.ts

@@ -0,0 +1,49 @@
+/**
+=========================================================
+* 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 Button Styles
+import root from "assets/theme/components/button/root";
+import contained from "assets/theme/components/button/contained";
+import outlined from "assets/theme/components/button/outlined";
+import text from "assets/theme/components/button/text";
+
+// types
+type Types = any;
+
+const button: Types = {
+  defaultProps: {
+    disableRipple: false,
+  },
+  styleOverrides: {
+    root: { ...root },
+    contained: { ...contained.base },
+    containedSizeSmall: { ...contained.small },
+    containedSizeLarge: { ...contained.large },
+    containedPrimary: { ...contained.primary },
+    containedSecondary: { ...contained.secondary },
+    outlined: { ...outlined.base },
+    outlinedSizeSmall: { ...outlined.small },
+    outlinedSizeLarge: { ...outlined.large },
+    outlinedPrimary: { ...outlined.primary },
+    outlinedSecondary: { ...outlined.secondary },
+    text: { ...text.base },
+    textSizeSmall: { ...text.small },
+    textSizeLarge: { ...text.large },
+    textPrimary: { ...text.primary },
+    textSecondary: { ...text.secondary },
+  },
+};
+
+export default button;

src/qqq/components/Temporary/Theme/components/button/outlined.ts

@@ -0,0 +1,82 @@
+/**
+=========================================================
+* 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 colors from "assets/theme/base/colors";
+import typography from "assets/theme/base/typography";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { transparent, light, info, secondary } = colors;
+const { size } = typography;
+
+const outlined = {
+  base: {
+    minHeight: pxToRem(40),
+    color: light.main,
+    borderColor: light.main,
+    padding: `${pxToRem(10)} ${pxToRem(24)}`,
+
+    "&:hover": {
+      opacity: 0.75,
+      backgroundColor: transparent.main,
+    },
+
+    "& .material-icon, .material-icons-round, svg": {
+      fontSize: `${pxToRem(16)} !important`,
+    },
+  },
+
+  small: {
+    minHeight: pxToRem(32),
+    padding: `${pxToRem(6)} ${pxToRem(16)}`,
+    fontSize: size.xs,
+
+    "& .material-icon, .material-icons-round, svg": {
+      fontSize: `${pxToRem(12)} !important`,
+    },
+  },
+
+  large: {
+    minHeight: pxToRem(47),
+    padding: `${pxToRem(12)} ${pxToRem(28)}`,
+    fontSize: size.sm,
+
+    "& .material-icon, .material-icons-round, svg": {
+      fontSize: `${pxToRem(22)} !important`,
+    },
+  },
+
+  primary: {
+    backgroundColor: transparent.main,
+    borderColor: info.main,
+
+    "&:hover": {
+      backgroundColor: transparent.main,
+    },
+  },
+
+  secondary: {
+    backgroundColor: transparent.main,
+    borderColor: secondary.main,
+
+    "&:hover": {
+      backgroundColor: transparent.main,
+    },
+  },
+};
+
+export default outlined;

src/qqq/components/Temporary/Theme/components/button/root.ts

@@ -0,0 +1,53 @@
+/**
+=========================================================
+* 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";
+import borders from "assets/theme/base/borders";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { fontWeightBold, size } = typography;
+const { borderRadius } = borders;
+
+const root = {
+  display: "inline-flex",
+  justifyContent: "center",
+  alignItems: "center",
+  fontSize: size.xs,
+  fontWeight: fontWeightBold,
+  borderRadius: borderRadius.lg,
+  padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`,
+  lineHeight: 1.4,
+  textAlign: "center",
+  textTransform: "uppercase",
+  userSelect: "none",
+  backgroundSize: "150% !important",
+  backgroundPositionX: "25% !important",
+  transition: "all 150ms ease-in",
+
+  "&:disabled": {
+    pointerEvent: "none",
+    opacity: 0.65,
+  },
+
+  "& .material-icons": {
+    fontSize: pxToRem(15),
+    marginTop: pxToRem(-2),
+  },
+};
+
+export default root;

src/qqq/components/Temporary/Theme/components/button/text.ts

@@ -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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+import typography from "assets/theme/base/typography";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { text, info, secondary, transparent } = colors;
+const { size } = typography;
+
+const buttonText = {
+  base: {
+    backgroundColor: transparent.main,
+    minHeight: pxToRem(40),
+    color: text.main,
+    boxShadow: "none",
+    padding: `${pxToRem(10)} ${pxToRem(24)}`,
+
+    "&:hover": {
+      backgroundColor: transparent.main,
+      boxShadow: "none",
+    },
+
+    "&:focus": {
+      boxShadow: "none",
+    },
+
+    "&:active, &:active:focus, &:active:hover": {
+      opacity: 0.85,
+      boxShadow: "none",
+    },
+
+    "&:disabled": {
+      boxShadow: "none",
+    },
+
+    "& .material-icon, .material-icons-round, svg": {
+      fontSize: `${pxToRem(16)} !important`,
+    },
+  },
+
+  small: {
+    minHeight: pxToRem(32),
+    padding: `${pxToRem(6)} ${pxToRem(16)}`,
+    fontSize: size.xs,
+
+    "& .material-icon, .material-icons-round, svg": {
+      fontSize: `${pxToRem(12)} !important`,
+    },
+  },
+
+  large: {
+    minHeight: pxToRem(47),
+    padding: `${pxToRem(12)} ${pxToRem(28)}`,
+    fontSize: size.sm,
+
+    "& .material-icon, .material-icons-round, svg": {
+      fontSize: `${pxToRem(22)} !important`,
+    },
+  },
+
+  primary: {
+    color: info.main,
+
+    "&:hover": {
+      color: info.main,
+    },
+
+    "&:focus:not(:hover)": {
+      color: info.focus,
+      boxShadow: "none",
+    },
+  },
+
+  secondary: {
+    color: secondary.main,
+
+    "&:hover": {
+      color: secondary.main,
+    },
+
+    "&:focus:not(:hover)": {
+      color: secondary.focus,
+      boxShadow: "none",
+    },
+  },
+};
+
+export default buttonText;

src/qqq/components/Temporary/Theme/components/buttonBase.ts

@@ -0,0 +1,25 @@
+/**
+=========================================================
+* 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.
+*/
+
+// types
+type Types = any;
+
+const buttonBase: Types = {
+  defaultProps: {
+    disableRipple: false,
+  },
+};
+
+export default buttonBase;

src/qqq/components/Temporary/Theme/components/card/cardContent.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.
+*/
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+// types
+type Types = any;
+
+const cardContent: Types = {
+  styleOverrides: {
+    root: {
+      marginTop: 0,
+      marginBottom: 0,
+      padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`,
+    },
+  },
+};
+
+export default cardContent;

src/qqq/components/Temporary/Theme/components/card/cardMedia.ts

@@ -0,0 +1,40 @@
+/**
+=========================================================
+* 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 borders from "assets/theme/base/borders";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { borderRadius } = borders;
+
+// types
+type Types = any;
+
+const cardMedia: Types = {
+  styleOverrides: {
+    root: {
+      borderRadius: borderRadius.xl,
+      margin: `${pxToRem(16)} ${pxToRem(16)} 0`,
+    },
+
+    media: {
+      width: "auto",
+    },
+  },
+};
+
+export default cardMedia;

src/qqq/components/Temporary/Theme/components/card/index.ts

@@ -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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+import borders from "assets/theme/base/borders";
+import boxShadows from "assets/theme/base/boxShadows";
+
+// Material Dashboard 2 PRO React Helper Function
+import rgba from "assets/theme/functions/rgba";
+
+const { black, white } = colors;
+const { borderWidth, borderRadius } = borders;
+const { md } = boxShadows;
+
+// types
+// types
+type Types = any;
+
+const card: Types = {
+  styleOverrides: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      minWidth: 0,
+      wordWrap: "break-word",
+      backgroundColor: white.main,
+      backgroundClip: "border-box",
+      border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`,
+      borderRadius: borderRadius.xl,
+      boxShadow: md,
+      overflow: "visible",
+    },
+  },
+};
+
+export default card;

src/qqq/components/Temporary/Theme/components/container.ts

@@ -0,0 +1,77 @@
+/**
+=========================================================
+* 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 breakpoints from "assets/theme/base/breakpoints";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+// types
+type Types = any;
+
+const {
+  values: { sm, md, lg, xl, xxl },
+} = breakpoints;
+
+const SM = `@media (min-width: ${sm}px)`;
+const MD = `@media (min-width: ${md}px)`;
+const LG = `@media (min-width: ${lg}px)`;
+const XL = `@media (min-width: ${xl}px)`;
+const XXL = `@media (min-width: ${xxl}px)`;
+
+const sharedClasses = {
+  paddingRight: `${pxToRem(24)} !important`,
+  paddingLeft: `${pxToRem(24)} !important`,
+  marginRight: "auto !important",
+  marginLeft: "auto !important",
+  width: "100% !important",
+  position: "relative",
+};
+
+const container: Types = {
+  [SM]: {
+    ".MuiContainer-root": {
+      ...sharedClasses,
+      maxWidth: "540px !important",
+    },
+  },
+  [MD]: {
+    ".MuiContainer-root": {
+      ...sharedClasses,
+      maxWidth: "720px !important",
+    },
+  },
+  [LG]: {
+    ".MuiContainer-root": {
+      ...sharedClasses,
+      maxWidth: "960px !important",
+    },
+  },
+  [XL]: {
+    ".MuiContainer-root": {
+      ...sharedClasses,
+      maxWidth: "1140px !important",
+    },
+  },
+  [XXL]: {
+    ".MuiContainer-root": {
+      ...sharedClasses,
+      maxWidth: "1320px !important",
+    },
+  },
+};
+
+export default container;

src/qqq/components/Temporary/Theme/components/dialog/dialogActions.ts

@@ -0,0 +1,30 @@
+/**
+=========================================================
+* 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 Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+// types
+type Types = any;
+
+const dialogActions: Types = {
+  styleOverrides: {
+    root: {
+      padding: pxToRem(16),
+    },
+  },
+};
+
+export default dialogActions;

src/qqq/components/Temporary/Theme/components/dialog/dialogContent.ts

@@ -0,0 +1,46 @@
+/**
+=========================================================
+* 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";
+import borders from "assets/theme/base/borders";
+import colors from "assets/theme/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { size } = typography;
+const { text } = colors;
+const { borderWidth, borderColor } = borders;
+
+// types
+type Types = any;
+
+const dialogContent: Types = {
+  styleOverrides: {
+    root: {
+      padding: pxToRem(16),
+      fontSize: size.md,
+      color: text.main,
+    },
+
+    dividers: {
+      borderTop: `${borderWidth[1]} solid ${borderColor}`,
+      borderBottom: `${borderWidth[1]} solid ${borderColor}`,
+    },
+  },
+};
+
+export default dialogContent;

src/qqq/components/Temporary/Theme/components/dialog/dialogContentText.ts

@@ -0,0 +1,35 @@
+/**
+=========================================================
+* 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";
+import colors from "assets/theme/base/colors";
+
+const { size } = typography;
+const { text } = colors;
+
+// types
+type Types = any;
+
+const dialogContentText: Types = {
+  styleOverrides: {
+    root: {
+      fontSize: size.md,
+      color: text.main,
+    },
+  },
+};
+
+export default dialogContentText;

src/qqq/components/Temporary/Theme/components/dialog/dialogTitle.ts

@@ -0,0 +1,36 @@
+/**
+=========================================================
+* 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";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { size } = typography;
+
+// types
+type Types = any;
+
+const dialogTitle: Types = {
+  styleOverrides: {
+    root: {
+      padding: pxToRem(16),
+      fontSize: size.xl,
+    },
+  },
+};
+
+export default dialogTitle;

src/qqq/components/Temporary/Theme/components/dialog/index.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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import borders from "assets/theme/base/borders";
+import boxShadows from "assets/theme/base/boxShadows";
+
+const { borderRadius } = borders;
+const { xxl } = boxShadows;
+
+// types
+type Types = any;
+
+const dialog: Types = {
+  styleOverrides: {
+    paper: {
+      borderRadius: borderRadius.lg,
+      boxShadow: xxl,
+    },
+
+    paperFullScreen: {
+      borderRadius: 0,
+    },
+  },
+};
+
+export default dialog;

src/qqq/components/Temporary/Theme/components/divider.ts

@@ -0,0 +1,71 @@
+/**
+=========================================================
+* 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 colors from "assets/theme/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import rgba from "assets/theme/functions/rgba";
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { dark, transparent, white } = colors;
+
+// types
+type Types = any;
+
+const divider: Types = {
+  styleOverrides: {
+    root: {
+      backgroundColor: transparent.main,
+      backgroundImage: `linear-gradient(to right, ${rgba(dark.main, 0)}, ${rgba(
+        dark.main,
+        0.4
+      )}, ${rgba(dark.main, 0)}) !important`,
+      height: pxToRem(1),
+      margin: `${pxToRem(16)} 0`,
+      borderBottom: "none",
+      opacity: 0.25,
+    },
+
+    vertical: {
+      backgroundColor: transparent.main,
+      backgroundImage: `linear-gradient(to bottom, ${rgba(dark.main, 0)}, ${rgba(
+        dark.main,
+        0.4
+      )}, ${rgba(dark.main, 0)}) !important`,
+      width: pxToRem(1),
+      height: "100%",
+      margin: `0 ${pxToRem(16)}`,
+      borderRight: "none",
+    },
+
+    light: {
+      backgroundColor: transparent.main,
+      backgroundImage: `linear-gradient(to right, ${rgba(white.main, 0)}, ${white.main}, ${rgba(
+        white.main,
+        0
+      )}) !important`,
+
+      "&.MuiDivider-vertical": {
+        backgroundImage: `linear-gradient(to bottom, ${rgba(white.main, 0)}, ${white.main}, ${rgba(
+          white.main,
+          0
+        )}) !important`,
+      },
+    },
+  },
+};
+
+export default divider;

src/qqq/components/Temporary/Theme/components/flatpickr.ts

@@ -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.
+*/
+
+// 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";
+
+const { info, white, gradients } = colors;
+
+// types
+type Types = any;
+
+const flatpickr: Types = {
+  ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus":
+    {
+      background: rgba(info.main, 0.28),
+      border: "none",
+    },
+
+  ".flatpickr-day.today": {
+    background: info.main,
+    color: white.main,
+    border: "none",
+
+    "&:hover, &:focus": {
+      background: `${info.focus} !important`,
+    },
+  },
+
+  ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus":
+    {
+      background: `${gradients.info.state} !important`,
+      color: white.main,
+      border: "none",
+    },
+
+  ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg":
+    {
+      color: `${info.main} !important`,
+      fill: `${info.main} !important`,
+    },
+};
+
+export default flatpickr;

src/qqq/components/Temporary/Theme/components/form/autocomplete.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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import boxShadows from "assets/theme/base/boxShadows";
+import typography from "assets/theme/base/typography";
+import colors from "assets/theme/base/colors";
+import borders from "assets/theme/base/borders";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { lg } = boxShadows;
+const { size } = typography;
+const { text, white, transparent, light, dark, gradients } = colors;
+const { borderRadius } = borders;
+
+// types
+type Types = any;
+
+const autocomplete: Types = {
+  styleOverrides: {
+    popper: {
+      boxShadow: lg,
+      padding: pxToRem(8),
+      fontSize: size.sm,
+      color: text.main,
+      textAlign: "left",
+      backgroundColor: `${white.main} !important`,
+      borderRadius: borderRadius.md,
+    },
+
+    paper: {
+      boxShadow: "none",
+      backgroundColor: transparent.main,
+    },
+
+    option: {
+      padding: `${pxToRem(4.8)} ${pxToRem(16)}`,
+      borderRadius: borderRadius.md,
+      fontSize: size.sm,
+      color: text.main,
+      transition: "background-color 300ms ease, color 300ms ease",
+
+      "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": {
+        backgroundColor: light.main,
+        color: dark.main,
+      },
+
+      '&[aria-selected="true"]': {
+        backgroundColor: `${light.main} !important`,
+        color: `${dark.main} !important`,
+      },
+    },
+
+    noOptions: {
+      fontSize: size.sm,
+      color: text.main,
+    },
+
+    groupLabel: {
+      color: dark.main,
+    },
+
+    loading: {
+      fontSize: size.sm,
+      color: text.main,
+    },
+
+    tag: {
+      display: "flex",
+      alignItems: "center",
+      height: "auto",
+      padding: pxToRem(4),
+      backgroundColor: gradients.dark.state,
+      color: white.main,
+
+      "& .MuiChip-label": {
+        lineHeight: 1.2,
+        padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`,
+      },
+
+      "& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": {
+        color: white.main,
+        marginRight: 0,
+      },
+    },
+  },
+};
+
+export default autocomplete;

src/qqq/components/Temporary/Theme/components/form/checkbox.ts

@@ -0,0 +1,86 @@
+/**
+=========================================================
+* 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 borders from "assets/theme/base/borders";
+import colors from "assets/theme/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+import linearGradient from "assets/theme/functions/linearGradient";
+
+const { borderWidth, borderColor } = borders;
+const { transparent, info } = colors;
+
+// types
+type Types = any;
+
+const checkbox: Types = {
+  styleOverrides: {
+    root: {
+      "& .MuiSvgIcon-root": {
+        backgroundPosition: "center",
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat",
+        width: pxToRem(20),
+        height: pxToRem(20),
+        color: transparent.main,
+        border: `${borderWidth[1]} solid ${borderColor}`,
+        borderRadius: pxToRem(5.6),
+      },
+
+      "&:hover": {
+        backgroundColor: transparent.main,
+      },
+
+      "&.Mui-focusVisible": {
+        border: `${borderWidth[2]} solid ${info.main} !important`,
+      },
+    },
+
+    colorPrimary: {
+      color: borderColor,
+
+      "&.Mui-checked": {
+        color: info.main,
+
+        "& .MuiSvgIcon-root": {
+          backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(
+            info.main,
+            info.main
+          )}`,
+          borderColor: info.main,
+        },
+      },
+    },
+
+    colorSecondary: {
+      color: borderColor,
+
+      "& .MuiSvgIcon-root": {
+        color: info.main,
+        "&.Mui-checked": {
+          backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(
+            info.main,
+            info.main
+          )}`,
+          borderColor: info.main,
+        },
+      },
+    },
+  },
+};
+
+export default checkbox;

src/qqq/components/Temporary/Theme/components/form/formControlLabel.ts

@@ -0,0 +1,53 @@
+/**
+=========================================================
+* 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 colors from "assets/theme/base/colors";
+import typography from "assets/theme/base/typography";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { dark } = colors;
+const { size, fontWeightBold } = typography;
+
+// types
+type Types = any;
+
+const formControlLabel: Types = {
+  styleOverrides: {
+    root: {
+      display: "block",
+      minHeight: pxToRem(24),
+      marginBottom: pxToRem(2),
+    },
+
+    label: {
+      display: "inline-block",
+      fontSize: size.sm,
+      fontWeight: fontWeightBold,
+      color: dark.main,
+      lineHeight: 1,
+      transform: `translateY(${pxToRem(1)})`,
+      marginLeft: pxToRem(4),
+
+      "&.Mui-disabled": {
+        color: dark.main,
+      },
+    },
+  },
+};
+
+export default formControlLabel;

src/qqq/components/Temporary/Theme/components/form/formLabel.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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+const { text } = colors;
+
+// types
+type Types = any;
+
+const formLabel: Types = {
+  styleOverrides: {
+    root: {
+      color: text.main,
+    },
+  },
+};
+
+export default formLabel;

src/qqq/components/Temporary/Theme/components/form/input.ts

@@ -0,0 +1,49 @@
+/**
+=========================================================
+* 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 colors from "assets/theme/base/colors";
+import typography from "assets/theme/base/typography";
+import borders from "assets/theme/base/borders";
+
+const { info, inputBorderColor, dark } = colors;
+const { size } = typography;
+const { borderWidth } = borders;
+
+// types
+type Types = any;
+
+const input: Types = {
+  styleOverrides: {
+    root: {
+      fontSize: size.sm,
+      color: dark.main,
+
+      "&:hover:not(.Mui-disabled):before": {
+        borderBottom: `${borderWidth[1]} solid ${inputBorderColor}`,
+      },
+
+      "&:before": {
+        borderColor: inputBorderColor,
+      },
+
+      "&:after": {
+        borderColor: info.main,
+      },
+    },
+  },
+};
+
+export default input;

src/qqq/components/Temporary/Theme/components/form/inputLabel.ts

@@ -0,0 +1,63 @@
+/**
+=========================================================
+* 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 colors from "assets/theme/base/colors";
+import typography from "assets/theme/base/typography";
+
+const { text, info } = colors;
+const { size } = typography;
+
+// types
+type Types = any;
+
+const inputLabel: Types = {
+  styleOverrides: {
+    root: {
+      fontSize: size.sm,
+      color: text.main,
+      lineHeight: 0.9,
+
+      "&.Mui-focused": {
+        color: info.main,
+      },
+
+      "&.MuiInputLabel-shrink": {
+        lineHeight: 1.5,
+        fontSize: size.md,
+
+        "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": {
+          fontSize: "0.85em",
+        },
+      },
+    },
+
+    sizeSmall: {
+      fontSize: size.xs,
+      lineHeight: 1.625,
+
+      "&.MuiInputLabel-shrink": {
+        lineHeight: 1.6,
+        fontSize: size.sm,
+
+        "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": {
+          fontSize: "0.72em",
+        },
+      },
+    },
+  },
+};
+
+export default inputLabel;

src/qqq/components/Temporary/Theme/components/form/inputOutlined.ts

@@ -0,0 +1,71 @@
+/**
+=========================================================
+* 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 colors from "assets/theme/base/colors";
+import borders from "assets/theme/base/borders";
+import typography from "assets/theme/base/typography";
+
+// // Material Dashboard 2 PRO React TSUI Dashboard PRO helper functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { inputBorderColor, info, grey, transparent } = colors;
+const { borderRadius } = borders;
+const { size } = typography;
+
+// types
+type Types = any;
+
+const inputOutlined: Types = {
+  styleOverrides: {
+    root: {
+      backgroundColor: transparent.main,
+      fontSize: size.sm,
+      borderRadius: borderRadius.md,
+
+      "&:hover .MuiOutlinedInput-notchedOutline": {
+        borderColor: inputBorderColor,
+      },
+
+      "&.Mui-focused": {
+        "& .MuiOutlinedInput-notchedOutline": {
+          borderColor: info.main,
+        },
+      },
+    },
+
+    notchedOutline: {
+      borderColor: inputBorderColor,
+    },
+
+    input: {
+      color: grey[700],
+      padding: pxToRem(12),
+      backgroundColor: transparent.main,
+    },
+
+    inputSizeSmall: {
+      fontSize: size.xs,
+      padding: pxToRem(10),
+    },
+
+    multiline: {
+      color: grey[700],
+      padding: 0,
+    },
+  },
+};
+
+export default inputOutlined;

src/qqq/components/Temporary/Theme/components/form/radio.ts

@@ -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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import borders from "assets/theme/base/borders";
+import colors from "assets/theme/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+import linearGradient from "assets/theme/functions/linearGradient";
+
+const { borderWidth, borderColor } = borders;
+const { transparent, info } = colors;
+
+// types
+type Types = any;
+
+const radio: Types = {
+  styleOverrides: {
+    root: {
+      "& .MuiSvgIcon-root": {
+        width: pxToRem(20),
+        height: pxToRem(20),
+        color: transparent.main,
+        border: `${borderWidth[1]} solid ${borderColor}`,
+        borderRadius: "50%",
+      },
+
+      "&:after": {
+        transition: "opacity 250ms ease-in-out",
+        content: `""`,
+        position: "absolute",
+        width: pxToRem(14),
+        height: pxToRem(14),
+        borderRadius: "50%",
+        backgroundImage: linearGradient(info.main, info.main),
+        opacity: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        margin: "auto",
+      },
+
+      "&:hover": {
+        backgroundColor: transparent.main,
+      },
+
+      "&.Mui-focusVisible": {
+        border: `${borderWidth[2]} solid ${info.main} !important`,
+      },
+    },
+
+    colorPrimary: {
+      color: borderColor,
+
+      "&.Mui-checked": {
+        color: info.main,
+
+        "& .MuiSvgIcon-root": {
+          borderColor: info.main,
+        },
+
+        "&:after": {
+          opacity: 1,
+        },
+      },
+    },
+
+    colorSecondary: {
+      color: borderColor,
+
+      "&.Mui-checked": {
+        color: info.main,
+
+        "& .MuiSvgIcon-root": {
+          borderColor: info.main,
+        },
+
+        "&:after": {
+          opacity: 1,
+        },
+      },
+    },
+  },
+};
+
+export default radio;

src/qqq/components/Temporary/Theme/components/form/select.ts

@@ -0,0 +1,52 @@
+/**
+=========================================================
+* 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 colors from "assets/theme/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { transparent } = colors;
+
+// types
+type Types = any;
+
+const select: Types = {
+  styleOverrides: {
+    select: {
+      display: "grid",
+      alignItems: "center",
+      padding: `0 ${pxToRem(12)} !important`,
+
+      "& .Mui-selected": {
+        backgroundColor: transparent.main,
+      },
+    },
+
+    selectMenu: {
+      background: "none",
+      height: "none",
+      minHeight: "none",
+      overflow: "unset",
+    },
+
+    icon: {
+      display: "none",
+    },
+  },
+};
+
+export default select;

src/qqq/components/Temporary/Theme/components/form/switchButton.ts

@@ -0,0 +1,90 @@
+/**
+=========================================================
+* 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 colors from "assets/theme/base/colors";
+import borders from "assets/theme/base/borders";
+import boxShadows from "assets/theme/base/boxShadows";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+import linearGradient from "assets/theme/functions/linearGradient";
+
+const { white, gradients, grey, transparent } = colors;
+const { borderWidth } = borders;
+const { md } = boxShadows;
+
+// types
+type Types = any;
+
+const switchButton: Types = {
+  defaultProps: {
+    disableRipple: false,
+  },
+
+  styleOverrides: {
+    switchBase: {
+      color: gradients.dark.main,
+
+      "&:hover": {
+        backgroundColor: transparent.main,
+      },
+
+      "&.Mui-checked": {
+        color: gradients.dark.main,
+
+        "&:hover": {
+          backgroundColor: transparent.main,
+        },
+
+        "& .MuiSwitch-thumb": {
+          borderColor: `${gradients.dark.main} !important`,
+        },
+
+        "& + .MuiSwitch-track": {
+          backgroundColor: `${gradients.dark.main} !important`,
+          borderColor: `${gradients.dark.main} !important`,
+          opacity: 1,
+        },
+      },
+
+      "&.Mui-disabled + .MuiSwitch-track": {
+        opacity: "0.3 !important",
+      },
+
+      "&.Mui-focusVisible .MuiSwitch-thumb": {
+        backgroundImage: linearGradient(gradients.info.main, gradients.info.state),
+      },
+    },
+
+    thumb: {
+      backgroundColor: white.main,
+      boxShadow: md,
+      border: `${borderWidth[1]} solid ${grey[400]}`,
+    },
+
+    track: {
+      width: pxToRem(32),
+      height: pxToRem(15),
+      backgroundColor: grey[400],
+      border: `${borderWidth[1]} solid ${grey[400]}`,
+      opacity: 1,
+    },
+
+    checked: {},
+  },
+};
+
+export default switchButton;

src/qqq/components/Temporary/Theme/components/form/textField.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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+const { transparent } = colors;
+
+// types
+type Types = any;
+
+const textField: Types = {
+  styleOverrides: {
+    root: {
+      backgroundColor: transparent.main,
+    },
+  },
+};
+
+export default textField;

src/qqq/components/Temporary/Theme/components/icon.ts

@@ -0,0 +1,43 @@
+/**
+=========================================================
+* 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 Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+// types
+type Types = any;
+
+const icon: Types = {
+  defaultProps: {
+    baseClassName: "material-icons-round",
+    fontSize: "inherit",
+  },
+
+  styleOverrides: {
+    fontSizeInherit: {
+      fontSize: "inherit !important",
+    },
+
+    fontSizeSmall: {
+      fontSize: `${pxToRem(20)} !important`,
+    },
+
+    fontSizeLarge: {
+      fontSize: `${pxToRem(36)} !important`,
+    },
+  },
+};
+
+export default icon;

src/qqq/components/Temporary/Theme/components/iconButton.ts

@@ -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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+
+const { transparent } = colors;
+
+// types
+type Types = any;
+
+const iconButton: Types = {
+  styleOverrides: {
+    root: {
+      "&:hover": {
+        backgroundColor: transparent.main,
+      },
+    },
+  },
+};
+
+export default iconButton;

src/qqq/components/Temporary/Theme/components/linearProgress.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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import borders from "assets/theme/base/borders";
+import colors from "assets/theme/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { borderRadius } = borders;
+const { light } = colors;
+
+// types
+type Types = any;
+
+const linearProgress: Types = {
+  styleOverrides: {
+    root: {
+      height: pxToRem(6),
+      borderRadius: borderRadius.md,
+      overflow: "visible",
+      position: "relative",
+    },
+
+    colorPrimary: {
+      backgroundColor: light.main,
+    },
+
+    colorSecondary: {
+      backgroundColor: light.main,
+    },
+
+    bar: {
+      height: pxToRem(6),
+      borderRadius: borderRadius.sm,
+      position: "absolute",
+      transform: `translate(0, 0) !important`,
+      transition: "width 0.6s ease !important",
+    },
+  },
+};
+
+export default linearProgress;

src/qqq/components/Temporary/Theme/components/link.ts

@@ -0,0 +1,26 @@
+/**
+=========================================================
+* 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.
+*/
+
+// types
+type Types = any;
+
+const link: Types = {
+  defaultProps: {
+    underline: "none",
+    color: "inherit",
+  },
+};
+
+export default link;

src/qqq/components/Temporary/Theme/components/list/index.ts

@@ -0,0 +1,28 @@
+/**
+=========================================================
+* 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.
+*/
+
+// types
+type Types = any;
+
+const list: Types = {
+  styleOverrides: {
+    padding: {
+      paddingTop: 0,
+      paddingBottom: 0,
+    },
+  },
+};
+
+export default list;

src/qqq/components/Temporary/Theme/components/list/listItem.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.
+*/
+
+// types
+type Types = any;
+
+const listItem: Types = {
+  defaultProps: {
+    disableGutters: true,
+  },
+
+  styleOverrides: {
+    root: {
+      paddingTop: 0,
+      paddingBottom: 0,
+    },
+  },
+};
+
+export default listItem;

src/qqq/components/Temporary/Theme/components/list/listItemText.ts

@@ -0,0 +1,28 @@
+/**
+=========================================================
+* 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.
+*/
+
+// types
+type Types = any;
+
+const listItemText: Types = {
+  styleOverrides: {
+    root: {
+      marginTop: 0,
+      marginBottom: 0,
+    },
+  },
+};
+
+export default listItemText;

src/qqq/components/Temporary/Theme/components/menu/index.ts

@@ -0,0 +1,52 @@
+/**
+=========================================================
+* 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 boxShadows from "assets/theme/base/boxShadows";
+import typography from "assets/theme/base/typography";
+import colors from "assets/theme/base/colors";
+import borders from "assets/theme/base/borders";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { lg } = boxShadows;
+const { size } = typography;
+const { text, white } = colors;
+const { borderRadius } = borders;
+
+// types
+type Types = any;
+
+const menu: Types = {
+  defaultProps: {
+    disableAutoFocusItem: true,
+  },
+
+  styleOverrides: {
+    paper: {
+      minWidth: pxToRem(160),
+      boxShadow: lg,
+      padding: `${pxToRem(16)} ${pxToRem(8)}`,
+      fontSize: size.sm,
+      color: text.main,
+      textAlign: "left",
+      backgroundColor: `${white.main} !important`,
+      borderRadius: borderRadius.md,
+    },
+  },
+};
+
+export default menu;

src/qqq/components/Temporary/Theme/components/menu/menuItem.ts

@@ -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.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme/base/colors";
+import borders from "assets/theme/base/borders";
+import typography from "assets/theme/base/typography";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme/functions/pxToRem";
+
+const { light, text, dark } = colors;
+const { borderRadius } = borders;
+const { size } = typography;
+
+// types
+type Types = any;
+
+const menuItem: Types = {
+  styleOverrides: {
+    root: {
+      minWidth: pxToRem(160),
+      minHeight: "unset",
+      padding: `${pxToRem(4.8)} ${pxToRem(16)}`,
+      borderRadius: borderRadius.md,
+      fontSize: size.sm,
+      color: text.main,
+      transition: "background-color 300ms ease, color 300ms ease",
+
+      "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": {
+        backgroundColor: light.main,
+        color: dark.main,
+      },
+    },
+  },
+};
+
+export default menuItem;