reformatted all relevant files to new style

package.json

@@ -5,6 +5,7 @@
   "proxy": "http://localhost:8000",
   "dependencies": {
     "@asseinfo/react-kanban": "2.2.0",
+    "@auth0/auth0-react": "1.10.2",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.7.1",
     "@emotion/styled": "11.6.0",

src/App.tsx

@@ -12,8 +12,8 @@ import {
 } from "react-router-dom";
 
 // @mui material components
-import { LicenseInfo } from "@mui/x-license-pro";
-import { ThemeProvider } from "@mui/material/styles";
+import {LicenseInfo} from "@mui/x-license-pro";
+import {ThemeProvider} from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 import Icon from "@mui/material/Icon";
 
@@ -31,13 +31,13 @@ import theme from "assets/theme";
 import themeDark from "assets/theme-dark";
 
 // Material Dashboard 2 PRO React TS contexts
-import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "context";
+import {useMaterialUIController, setMiniSidenav, setOpenConfigurator} from "context";
 
 // Images
 import nfLogo from "assets/images/nutrifresh_one_icon_white.png";
 import brandWhite from "assets/images/logo-ct.png";
 import brandDark from "assets/images/logo-ct-dark.png";
-import { Md5 } from "ts-md5/dist/md5";
+import {Md5} from "ts-md5/dist/md5";
 import EntityCreate from "./qqq/pages/entity-create";
 import EntityList from "./qqq/pages/entity-list";
 import EntityView from "./qqq/pages/entity-view";
@@ -87,7 +87,7 @@ function getStaticRoutes()
             },
          ],
       },
-      { type: "divider", key: "divider-0" },
+      {type: "divider", key: "divider-0"},
       {
          type: "collapse",
          name: "Dashboards",
@@ -108,8 +108,8 @@ function getStaticRoutes()
             },
          ],
       },
-      { type: "divider", key: "divider-1" },
-      { type: "title", title: "Tables", key: "title-docs" },
+      {type: "divider", key: "divider-1"},
+      {type: "title", title: "Tables", key: "title-docs"},
    ];
 }
 
@@ -129,7 +129,7 @@ export default function App()
       darkMode,
    } = controller;
    const [onMouseEnter, setOnMouseEnter] = useState(false);
-   const { pathname } = useLocation();
+   const {pathname} = useLocation();
 
    const [needToLoadRoutes, setNeedToLoadRoutes] = useState(true);
    const [routes, setRoutes] = useState(getStaticRoutes());
@@ -223,11 +223,11 @@ export default function App()
 
    const getRoutes = (allRoutes: any[]): any => allRoutes.map(
       (route: {
-      collapse: any;
-      route: string;
-      component: ReactElement<any, string | JSXElementConstructor<any>>;
-      key: Key;
-    }) =>
+         collapse: any;
+         route: string;
+         component: ReactElement<any, string | JSXElementConstructor<any>>;
+         key: Key;
+      }) =>
       {
          if (route.collapse)
          {
@@ -258,7 +258,7 @@ export default function App()
          bottom="2rem"
          zIndex={99}
          color="dark"
-         sx={{ cursor: "pointer" }}
+         sx={{cursor: "pointer"}}
          onClick={handleConfiguratorOpen}
       >
          <Icon fontSize="small" color="inherit">

src/index.tsx

@@ -14,11 +14,11 @@ Coded by www.creative-tim.com
 */
 
 import ReactDOM from "react-dom";
-import { BrowserRouter } from "react-router-dom";
+import {BrowserRouter} from "react-router-dom";
 import App from "App";
 
 // Material Dashboard 2 PRO React TS Context Provider
-import { MaterialUIControllerProvider } from "context";
+import {MaterialUIControllerProvider} from "context";
 import "./qqq/styles/qqq-override-styles.css";
 
 ReactDOM.render(

src/qqq/components/BaseLayout/index.tsx

@@ -13,15 +13,16 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  */
 
-import { useState, useEffect, ReactNode } from "react";
+import {useState, useEffect, ReactNode} from "react";
 
 // Material Dashboard 2 PRO React TS Base Styles
 import breakpoints from "assets/theme/base/breakpoints";
 
 // Material Dashboard 2 PRO React TS examples components
 import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
-import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Navbar from "qqq/components/Navbar";
 import Footer from "qqq/components/Footer";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
 import MDBox from "../../../components/MDBox";
 
 // Declaring props types for BaseLayout
@@ -30,7 +31,7 @@ interface Props {
   children: ReactNode;
 }
 
-function BaseLayout({ stickyNavbar, children }: Props): JSX.Element
+function BaseLayout({stickyNavbar, children}: Props): JSX.Element
 {
    const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal");
 

src/qqq/components/EntityForm/components/CustomerCell/index.tsx

@@ -34,14 +34,14 @@ interface Props {
     | "dark";
 }
 
-function CustomerCell({ image, name, color }: Props): JSX.Element
+function CustomerCell({image, name, color}: Props): JSX.Element
 {
    return (
       <MDBox display="flex" alignItems="center">
          <MDBox mr={1}>
             <MDAvatar bgColor={color} src={image} alt={name} size="xs" />
          </MDBox>
-         <MDTypography variant="caption" fontWeight="medium" color="text" sx={{ lineHeight: 0 }}>
+         <MDTypography variant="caption" fontWeight="medium" color="text" sx={{lineHeight: 0}}>
             {name}
          </MDTypography>
       </MDBox>

src/qqq/components/EntityForm/components/DefaultCell/index.tsx

@@ -22,7 +22,7 @@ interface Props {
   suffix?: string | boolean;
 }
 
-function DefaultCell({ value, suffix }: Props): JSX.Element
+function DefaultCell({value, suffix}: Props): JSX.Element
 {
    return (
       <MDTypography variant="caption" fontWeight="medium" color="text">

src/qqq/components/EntityForm/components/IdCell/index.tsx

@@ -27,7 +27,7 @@ interface Props {
   checked?: boolean;
 }
 
-function IdCell({ id, checked }: Props): JSX.Element
+function IdCell({id, checked}: Props): JSX.Element
 {
    const pathParts = window.location.pathname.split("/");
    const tableName = pathParts[1];

src/qqq/components/EntityForm/components/StatusCell/index.tsx

@@ -38,16 +38,16 @@ interface Props {
   status: string;
 }
 
-function StatusCell({ icon, color, status }: Props): JSX.Element
+function StatusCell({icon, color, status}: Props): JSX.Element
 {
    return (
       <MDBox display="flex" alignItems="center">
          <MDBox mr={1}>
             <MDButton variant="outlined" color={color} size="small" iconOnly circular>
-               <Icon sx={{ fontWeight: "bold" }}>{icon}</Icon>
+               <Icon sx={{fontWeight: "bold"}}>{icon}</Icon>
             </MDButton>
          </MDBox>
-         <MDTypography variant="caption" fontWeight="medium" color="text" sx={{ lineHeight: 0 }}>
+         <MDTypography variant="caption" fontWeight="medium" color="text" sx={{lineHeight: 0}}>
             {status}
          </MDTypography>
       </MDBox>

src/qqq/components/EntityForm/index.tsx

@@ -1,21 +1,21 @@
 // react components
-import { useParams, useSearchParams } from "react-router-dom";
-import React, { useReducer, useState } from "react";
+import {useParams, useSearchParams} from "react-router-dom";
+import React, {useReducer, useState} from "react";
 
 // misc components
 import * as Yup from "yup";
-import { Form, Formik } from "formik";
+import {Form, Formik} from "formik";
 
 // qqq components
-import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
+import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
 import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
 import QDynamicForm from "qqq/components/QDynamicForm";
-import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 
 // @material-ui core components
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
-import { Alert } from "@mui/material";
+import {Alert} from "@mui/material";
 
 // Material Dashboard 2 PRO React TS components
 import MDBox from "components/MDBox";
@@ -28,10 +28,10 @@ interface Props
   id?: string;
 }
 
-function EntityForm({ id }: Props): JSX.Element
+function EntityForm({id}: Props): JSX.Element
 {
    const qController = new QController("");
-   const { tableName } = useParams();
+   const {tableName} = useParams();
 
    const [validations, setValidations] = useState({});
    const [initialValues, setInitialValues] = useState({} as { [key: string]: string });
@@ -154,7 +154,7 @@ function EntityForm({ id }: Props): JSX.Element
                ) : (
                   ""
                )}
-               <Card id="edit-form-container" sx={{ overflow: "visible" }}>
+               <Card id="edit-form-container" sx={{overflow: "visible"}}>
                   <MDBox p={3}>
                      <MDTypography variant="h5">{formTitle}</MDTypography>
                   </MDBox>

src/qqq/components/Footer/index.tsx

@@ -37,10 +37,10 @@ interface Props {
   [key: string]: any;
 }
 
-function Footer({ company, links }: Props): JSX.Element
+function Footer({company, links}: Props): JSX.Element
 {
-   const { href, name } = company;
-   const { size } = typography;
+   const {href, name} = company;
+   const {size} = typography;
 
    const renderLinks = () => links.map((link) => (
       <MDBox key={link.name} component="li" px={2} lineHeight={1}>
@@ -56,7 +56,7 @@ function Footer({ company, links }: Props): JSX.Element
       <MDBox
          width="100%"
          display="flex"
-         flexDirection={{ xs: "column", lg: "row" }}
+         flexDirection={{xs: "column", lg: "row"}}
          justifyContent="space-between"
          alignItems="center"
          px={1.5}
@@ -84,7 +84,7 @@ function Footer({ company, links }: Props): JSX.Element
          </MDBox>
          <MDBox
             component="ul"
-            sx={({ breakpoints }) => ({
+            sx={({breakpoints}) => ({
                display: "flex",
                flexWrap: "wrap",
                alignItems: "center",
@@ -107,7 +107,7 @@ function Footer({ company, links }: Props): JSX.Element
 
 // Declaring default props for Footer
 Footer.defaultProps = {
-   company: { href: "https://www.nutrifreshservices.com/", name: "Nutrifresh Services" },
+   company: {href: "https://www.nutrifreshservices.com/", name: "Nutrifresh Services"},
    links: [],
 };
 

src/qqq/components/Navbar/index.tsx

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

src/qqq/components/Navbar/styles.ts

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

src/qqq/components/QDynamicForm/index.tsx

@@ -22,7 +22,7 @@ import MDTypography from "components/MDTypography";
 
 // NewUser page components
 import FormField from "layouts/pages/users/new-user/components/FormField";
-import { QFrontendStepMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
+import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
 
 interface Props {
   formLabel?: string;
@@ -32,7 +32,7 @@ interface Props {
 
 function QDynamicForm(props: Props): JSX.Element
 {
-   const { formData, formLabel, primaryKeyId } = props;
+   const {formData, formLabel, primaryKeyId} = props;
    const {
       formFields, values, errors, touched,
    } = formData;

src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts

@@ -23,8 +23,8 @@
 import * as Yup from "yup";
 
 // qqq imports
-import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import { QFieldType } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 
 /*******************************************************************************
  ** Meta-data to represent a single field in a table.
@@ -42,23 +42,23 @@ class DynamicFormUtils
          let fieldType: string;
          switch (field.type.toString())
          {
-         case QFieldType.DECIMAL:
-         case QFieldType.INTEGER:
-            fieldType = "number";
-            break;
-         case QFieldType.DATE_TIME:
-            fieldType = "datetime-local";
-            break;
-         case QFieldType.PASSWORD:
-         case QFieldType.TIME:
-         case QFieldType.DATE:
-            fieldType = field.type.toString();
-            break;
-         case QFieldType.TEXT:
-         case QFieldType.HTML:
-         case QFieldType.STRING:
-         default:
-            fieldType = "text";
+            case QFieldType.DECIMAL:
+            case QFieldType.INTEGER:
+               fieldType = "number";
+               break;
+            case QFieldType.DATE_TIME:
+               fieldType = "datetime-local";
+               break;
+            case QFieldType.PASSWORD:
+            case QFieldType.TIME:
+            case QFieldType.DATE:
+               fieldType = field.type.toString();
+               break;
+            case QFieldType.TEXT:
+            case QFieldType.HTML:
+            case QFieldType.STRING:
+            default:
+               fieldType = "text";
          }
 
          let label = field.label ? field.label : field.name;
@@ -78,7 +78,7 @@ class DynamicFormUtils
          }
       });
 
-      return { dynamicFormFields, formValidations };
+      return {dynamicFormFields, formValidations};
    }
 }
 

src/qqq/components/buttons/AuthenticationButton/index.tsx

@@ -0,0 +1,17 @@
+import {useAuth0} from "@auth0/auth0-react";
+import React from "react";
+import {Button} from "@mui/material";
+
+function AuthenticationButton()
+{
+   const {loginWithRedirect, logout, isAuthenticated} = useAuth0();
+
+   if (isAuthenticated)
+   {
+      return <Button onClick={() => logout({returnTo: window.location.origin})}>Log Out</Button>;
+   }
+
+   return <Button onClick={() => loginWithRedirect()}>Log In</Button>;
+}
+
+export default AuthenticationButton;

src/qqq/pages/entity-edit/index.tsx

@@ -21,12 +21,12 @@ import MDBox from "components/MDBox";
 
 // Settings page components
 import BaseLayout from "qqq/components/BaseLayout";
-import { useParams } from "react-router-dom";
+import {useParams} from "react-router-dom";
 import EntityForm from "qqq/components/EntityForm";
 
 function EntityEdit(): JSX.Element
 {
-   const { id } = useParams();
+   const {id} = useParams();
 
    return (
       <BaseLayout>

src/qqq/pages/entity-view/components/ViewContents/index.tsx

@@ -11,8 +11,8 @@
  */
 
 // react components
-import { useParams, useSearchParams } from "react-router-dom";
-import React, { useReducer, useState } from "react";
+import {useParams, useSearchParams} from "react-router-dom";
+import React, {useReducer, useState} from "react";
 
 // @material-ui core components
 import Card from "@mui/material/Card";
@@ -26,8 +26,8 @@ import DialogActions from "@mui/material/DialogActions";
 import Button from "@mui/material/Button";
 
 // qqq imports
-import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
-import { QProcessMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
+import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
+import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 
 // Material Dashboard 2 PRO React TS components
 import MDBox from "components/MDBox";
@@ -47,9 +47,9 @@ interface Props
   id: string;
 }
 
-function ViewContents({ id }: Props): JSX.Element
+function ViewContents({id}: Props): JSX.Element
 {
-   const { tableName } = useParams();
+   const {tableName} = useParams();
 
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
    const [nameValues, setNameValues] = useState([] as JSX.Element[]);
@@ -178,7 +178,7 @@ function ViewContents({ id }: Props): JSX.Element
                </MDAlert>
             ) : ("")
          }
-         <Card id="basic-info" sx={{ overflow: "visible" }}>
+         <Card id="basic-info" sx={{overflow: "visible"}}>
             <MDBox p={3}>
                <MDBox display="flex" justifyContent="space-between">
                   <MDTypography variant="h5">

src/qqq/pages/process-run/index.tsx

@@ -13,10 +13,10 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  */
 
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 
 // formik components
-import { Formik, Form } from "formik";
+import {Formik, Form} from "formik";
 
 // @mui material components
 import Grid from "@mui/material/Grid";
@@ -36,15 +36,15 @@ import Footer from "examples/Footer";
 
 // ProcessRun layout schemas for form and form fields
 import * as Yup from "yup";
-import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
-import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import { QFrontendStepMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
-import { useLocation, useParams } from "react-router-dom";
+import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
+import {useLocation, useParams} from "react-router-dom";
 import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
-import { QJobStarted } from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
-import { QJobComplete } from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
-import { QJobError } from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
-import { QJobRunning } from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
+import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
+import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
+import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
+import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
 import {
    DataGrid, GridColDef, GridRowParams, GridRowsProp,
 } from "@mui/x-data-grid";
@@ -148,7 +148,7 @@ const qController = new QController("");
 
 function ProcessRun(): JSX.Element
 {
-   const { processName } = useParams();
+   const {processName} = useParams();
    const [processUUID, setProcessUUID] = useState(null as string);
    const [jobUUID, setJobUUID] = useState(null as string);
    const [activeStepIndex, setActiveStepIndex] = useState(0);
@@ -238,7 +238,7 @@ function ProcessRun(): JSX.Element
          ///////////////////////////////////////////////////
          if (activeStep.formFields)
          {
-            const { dynamicFormFields, formValidations } = DynamicFormUtils.getFormData(
+            const {dynamicFormFields, formValidations} = DynamicFormUtils.getFormData(
                activeStep.formFields,
             );
 
@@ -271,7 +271,7 @@ function ProcessRun(): JSX.Element
             const newRecordConfig = buildNewRecordConfig();
             activeStep.recordListFields.forEach((field) =>
             {
-               newRecordConfig.columns.push({ field: field.name, headerName: field.label, width: 200 });
+               newRecordConfig.columns.push({field: field.name, headerName: field.label, width: 200});
             });
             setRecordConfig(newRecordConfig);
             setNeedRecords(true);
@@ -388,7 +388,7 @@ function ProcessRun(): JSX.Element
       setNeedInitialLoad(false);
       (async () =>
       {
-         const { search } = useLocation();
+         const {search} = useLocation();
          const urlSearchParams = new URLSearchParams(search);
          let queryStringForInit = null;
          if (urlSearchParams.get("recordIds"))
@@ -466,7 +466,7 @@ function ProcessRun(): JSX.Element
                container
                justifyContent="center"
                alignItems="center"
-               sx={{ height: "100%", mt: 8 }}
+               sx={{height: "100%", mt: 8}}
             >
                <Grid item xs={12} lg={8}>
                   <Formik
@@ -480,7 +480,7 @@ function ProcessRun(): JSX.Element
                         values, errors, touched, isSubmitting,
                      }) => (
                         <Form id={formId} autoComplete="off">
-                           <Card sx={{ height: "100%" }}>
+                           <Card sx={{height: "100%"}}>
                               <MDBox mx={2} mt={-3}>
                                  <Stepper activeStep={activeStepIndex} alternativeLabel>
                                     {steps.map((step) => (

src/qqq/utils/QClient.ts

@@ -19,9 +19,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
-import { QQueryFilter } from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
 
 /*******************************************************************************
  ** client wrapper of qqq backend

src/qqq/utils/QProcessUtils.ts

@@ -19,8 +19,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { QProcessMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
-import { QInstance } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 
 /*******************************************************************************
  ** Utility class for working with QQQ Processes