Merge branch 'feature/QQQ-38-app-home-widgets' into feature/sprint-10

.eslintrc.json

@@ -5,7 +5,8 @@
    },
    "extends": [
       "plugin:react/recommended",
-      "airbnb"
+      "plugin:import/recommended",
+      "plugin:import/typescript"
    ],
    "globals": {
       "JSX": true
@@ -27,7 +28,8 @@
    },
    "plugins": [
       "react",
-      "@typescript-eslint"
+      "@typescript-eslint",
+      "import"
    ],
    "rules": {
       "brace-style": [
@@ -56,7 +58,26 @@
             "devDependencies": true
          }
       ],
-      "import/order": "off",
+      "import/order": [
+         "error",
+         {
+            "groups": [
+               "builtin", // Built-in imports (come from NodeJS native) go first
+               "external", // <- External imports
+               "internal", // <- Absolute imports
+               ["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
+               "index", // <- index imports
+               "unknown"
+            ],
+            "newlines-between": "never",
+            "alphabetize": {
+               /* sort in ascending order. Options: ["ignore", "asc", "desc"] */
+               "order": "asc",
+               /* ignore case. Options: [true, false] */
+               "caseInsensitive": true
+            }
+         }
+      ],
       "jsx-one-expression-per-line": "off",
       "max-len": "off",
       "no-console": "off",
@@ -82,10 +103,7 @@
             ]
          }
       ],
-      "react/jsx-indent": [
+      "react/jsx-indent": "off",
-         "error",
-         3
-      ],
       "react/jsx-indent-props": [
          "error",
          3
@@ -95,6 +113,15 @@
       "quotes": [
          "error",
          "double"
+      ],
+      "sort-imports": [
+         "error",
+         {
+            "ignoreCase": false,
+            "ignoreDeclarationSort": true,
+            "ignoreMemberSort": true,
+            "allowSeparatedGroups": false
+         }
       ]
    },
    "settings": {

package.json

@@ -13,7 +13,7 @@
     "@fullcalendar/interaction": "5.10.0",
     "@fullcalendar/react": "5.10.0",
     "@fullcalendar/timegrid": "5.10.0",
-    "@kingsrook/qqq-frontend-core": "1.0.13",
+    "@kingsrook/qqq-frontend-core": "1.0.14",
     "@mui/icons-material": "5.4.1",
     "@mui/material": "5.4.1",
     "@mui/styled-engine": "5.4.1",

src/App.tsx

@@ -1,56 +1,56 @@
-import React, {
+/*
-   JSXElementConstructor, Key, ReactElement, useEffect, useState,
+ * QQQ - Low-code Application Framework for Engineers.
-} from "react";
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
-
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
-// react-router components
+ * contact@kingsrook.com
-import {
+ * https://github.com/Kingsrook/
-   Navigate, Route, Routes, useLocation,
+ *
-} from "react-router-dom";
+ * 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 {useAuth0} from "@auth0/auth0-react";
-
+import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
-// @mui material components
+import {QAppTreeNode} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppTreeNode";
-import {LicenseInfo} from "@mui/x-license-pro";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import {ThemeProvider} from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 import Icon from "@mui/material/Icon";
-
+import {ThemeProvider} from "@mui/material/styles";
-// Material Dashboard 2 PRO React TS components
+import {LicenseInfo} from "@mui/x-license-pro";
-import MDBox from "components/MDBox";
+import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
-
-// Material Dashboard 2 PRO React TS exampless
-import Sidenav from "examples/Sidenav";
-import Configurator from "examples/Configurator";
-
-// Material Dashboard 2 PRO React TS themes
-import theme from "assets/theme";
-
-// Material Dashboard 2 PRO React TS Dark Mode themes
-import themeDark from "assets/theme-dark";
-
-// Material Dashboard 2 PRO React TS contexts
-import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context";
-
-// Images
-import nfLogo from "assets/images/nutrifresh_one_icon_white.png";
-import {Md5} from "ts-md5/dist/md5";
 import {useCookies} from "react-cookie";
-import EntityCreate from "./qqq/pages/entity-create";
+import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
-import EntityList from "./qqq/pages/entity-list";
+import {Md5} from "ts-md5/dist/md5";
-import EntityView from "./qqq/pages/entity-view";
+import theme from "assets/theme";
-import EntityEdit from "./qqq/pages/entity-edit";
+import themeDark from "assets/theme-dark";
-import ProcessRun from "./qqq/pages/process-run";
+import MDBox from "components/MDBox";
+import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context";
+import Configurator from "examples/Configurator";
+import Sidenav from "examples/Sidenav";
 import AppHome from "qqq/pages/app-home";
+import QProcessUtils from "qqq/utils/QProcessUtils";
 import MDAvatar from "./components/MDAvatar";
-import ProfileOverview from "./layouts/pages/profile/profile-overview";
-import Settings from "./layouts/pages/account/settings";
 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";
-import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
-import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import QProcessUtils from "qqq/utils/QProcessUtils";
-import {QAppTreeNode} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppTreeNode";
 
 ///////////////////////////////////////////////////////////////////////////////////////////////
 // define the parts of the nav that are static - before the qqq tables etc get dynamic added //
@@ -436,7 +436,7 @@ export default function App()
                <>
                   <Sidenav
                      color={sidenavColor}
-                     brand={nfLogo}
+                     brand={Logo}
                      brandName="Nutrifresh One"
                      routes={sideNavRoutes}
                      onMouseEnter={handleOnMouseEnter}

src/HandleAuthorizationError.tsx

@@ -1,6 +1,27 @@
+/*
+ * 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 React, {useEffect} from "react";
-import {SESSION_ID_COOKIE_NAME} from "App";
 import {useCookies} from "react-cookie";
+import {SESSION_ID_COOKIE_NAME} from "App";
 
 interface Props
 {

src/index.tsx

@@ -1,16 +1,35 @@
-import ReactDOM from "react-dom";
+/*
-import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom";
+ * QQQ - Low-code Application Framework for Engineers.
-import {Auth0Provider} from "@auth0/auth0-react";
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
-import App from "App";
+ * 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/>.
+ */
 
-// Material Dashboard 2 PRO React TS Context Provider
+import {Auth0Provider} from "@auth0/auth0-react";
+import React from "react";
+import {render} from "react-dom";
+import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom";
+import App from "App";
 import {MaterialUIControllerProvider} from "context";
 import "./qqq/styles/qqq-override-styles.css";
-import ProtectedRoute from "qqq/auth0/protected-route";
-import React from "react";
 import HandleAuthorizationError from "HandleAuthorizationError";
+import ProtectedRoute from "qqq/auth0/protected-route";
+
 
-// Auth0 params from env
 const domain = process.env.REACT_APP_AUTH0_DOMAIN;
 const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
 
@@ -43,7 +62,7 @@ function Auth0ProviderWithRedirectCallback({children, ...props})
    }
 }
 
-ReactDOM.render(
+render(
    <BrowserRouter>
       <Auth0ProviderWithRedirectCallback
          domain={domain}

src/qqq/components/BaseLayout/index.tsx

@@ -20,14 +20,10 @@
  */
 
 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 Navbar from "qqq/components/Navbar";
 import Footer from "qqq/components/Footer";
+import Navbar from "qqq/components/Navbar";
 import MDBox from "../../../components/MDBox";
 
 // Declaring props types for BaseLayout

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

@@ -20,8 +20,8 @@
  */
 
 import {useAuth0} from "@auth0/auth0-react";
-import React from "react";
 import {Button} from "@mui/material";
+import React from "react";
 
 function AuthenticationButton()
 {

src/qqq/components/EntityForm/index.tsx

@@ -1,36 +1,46 @@
-// react components
+/*
-import {useParams, useNavigate, useLocation} from "react-router-dom";
+ * QQQ - Low-code Application Framework for Engineers.
-import React, {useReducer, useState} from "react";
+ * 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/>.
+ */
 
-// misc components
-import * as Yup from "yup";
-import {
-   Form, Formik, useFormik, useFormikContext,
-} from "formik";
-
-// qqq components
-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 {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
-// @material-ui core components
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import {Alert} from "@mui/material";
+import Avatar from "@mui/material/Avatar";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
-import {Alert} from "@mui/material";
+import Icon from "@mui/material/Icon";
-
+import {Form, Formik} from "formik";
-// Material Dashboard 2 PRO React TS components
+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 QClient from "qqq/utils/QClient";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QCancelButton, QSaveButton} from "qqq/components/QButtons";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import QDynamicForm from "qqq/components/QDynamicForm";
-import Avatar from "@mui/material/Avatar";
+import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
-import Icon from "@mui/material/Icon";
 import QRecordSidebar from "qqq/components/QRecordSidebar";
+import QClient from "qqq/utils/QClient";
 import QTableUtils from "qqq/utils/QTableUtils";
-import colors from "assets/theme/base/colors";
-import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
 
 interface Props
 {

src/qqq/components/Footer/index.tsx

@@ -19,28 +19,25 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @mui material components
 import Link from "@mui/material/Link";
-import Icon from "@mui/material/Icon";
+import typography from "assets/theme/base/typography";
-
-// Material Dashboard 2 PRO React TS components
 import MDBox from "components/MDBox";
 import MDTypography from "components/MDTypography";
 
-// Material Dashboard 2 PRO React TS Base Styles
-import typography from "assets/theme/base/typography";
 
 // Declaring props types for Footer
-interface Props {
+interface Props
-  company?: {
+{
-    href: string;
+   company?: {
-    name: string;
+      href: string;
-  };
+      name: string;
-  links?: {
+   };
-    href: string;
+   links?: {
-    name: string;
+      href: string;
-  }[];
+      name: string;
-  [key: string]: any;
+   }[];
+
+   [key: string]: any;
 }
 
 function Footer({company, links}: Props): JSX.Element
@@ -85,9 +82,9 @@ function Footer({company, links}: Props): JSX.Element
             ,
             <Link href={href} target="_blank">
                <MDTypography variant="button" fontWeight="medium">
-            &nbsp;
+                  &nbsp;
                   {name}
-&nbsp;
+                  &nbsp;
                </MDTypography>
             </Link>
          </MDBox>

src/qqq/components/Navbar/index.tsx

@@ -19,45 +19,19 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {useState, useEffect} from "react";
-
-// react-router components
-import {useLocation} from "react-router-dom";
-
-// @material-ui core components
 import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
+import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
 import Menu from "@mui/material/Menu";
-import Icon from "@mui/material/Icon";
+import Toolbar from "@mui/material/Toolbar";
-
+import {useState, useEffect} from "react";
-// Material Dashboard 2 PRO React TS components
+import {useLocation} from "react-router-dom";
+import MDBadge from "components/MDBadge";
 import MDBox from "components/MDBox";
 import MDInput from "components/MDInput";
-import MDBadge from "components/MDBadge";
+import {useMaterialUIController, setTransparentNavbar, setMiniSidenav, setOpenConfigurator,} from "context";
-
-// Material Dashboard 2 PRO React TS examples components
 import NotificationItem from "examples/Items/NotificationItem";
-
+import {navbar, navbarContainer, navbarRow, navbarIconButton, navbarDesktopMenu, navbarMobileMenu,} from "qqq/components/Navbar/styles";
-// 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 QBreadcrumbs, {routeToLabel} from "qqq/components/QBreadcrumbs";
 
 // Declaring prop types for Navbar

src/qqq/components/Navbar/styles.ts

@@ -19,7 +19,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @mui material components
 import {Theme} from "@mui/material/styles";
 
 function navbar(theme: Theme | any, ownerState: any)

src/qqq/components/ProcessLinkCard/index.tsx

@@ -18,14 +18,11 @@
  * 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 {ReactNode} from "react";
 
-// @mui material components
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
 import Icon from "@mui/material/Icon";
-
+import {ReactNode} from "react";
-// Material Dashboard 2 PRO React TS components
 import MDBox from "components/MDBox";
 import MDTypography from "components/MDTypography";
 

src/qqq/components/QBreadcrumbs/index.tsx

@@ -19,11 +19,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {ReactNode} from "react";
-
-import {Link} from "react-router-dom";
 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";
 

src/qqq/components/QButtons/index.tsx

@@ -19,12 +19,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import MDBox from "components/MDBox";
-import {Link} from "react-router-dom";
-import MDButton from "components/MDButton";
 import Icon from "@mui/material/Icon";
 import React from "react";
-import EntityForm from "qqq/components/EntityForm";
+import {Link} from "react-router-dom";
+import MDBox from "components/MDBox";
+import MDButton from "components/MDButton";
 
 // eslint-disable import/prefer-default-export
 

src/qqq/components/QDynamicForm/index.tsx

@@ -19,23 +19,19 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @mui material components
 import Grid from "@mui/material/Grid";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-
-// NewUser page components
 import {useFormikContext} from "formik";
 import React from "react";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
 import QDynamicFormField from "qqq/components/QDynamicFormField";
 
-interface Props {
+interface Props
-  formLabel?: string;
+{
-  formData: any;
+   formLabel?: string;
-  bulkEditMode?: boolean;
+   formData: any;
-  bulkEditSwitchChangeHandler?: any
+   bulkEditMode?: boolean;
+   bulkEditSwitchChangeHandler?: any;
 }
 
 function QDynamicForm(props: Props): JSX.Element
@@ -72,55 +68,55 @@ function QDynamicForm(props: Props): JSX.Element
          <MDBox mt={1.625}>
             <Grid container spacing={3}>
                {formFields
-            && Object.keys(formFields).length > 0
+                  && Object.keys(formFields).length > 0
-            && Object.keys(formFields).map((fieldName: any) =>
+                  && Object.keys(formFields).map((fieldName: any) =>
-            {
+                  {
-               const field = formFields[fieldName];
+                     const field = formFields[fieldName];
-               if (values[fieldName] === undefined)
+                     if (values[fieldName] === undefined)
-               {
+                     {
-                  values[fieldName] = "";
+                        values[fieldName] = "";
-               }
+                     }
 
-               if (field.type === "file")
+                     if (field.type === "file")
-               {
+                     {
-                  return (
+                        return (
-                     <Grid item xs={12} sm={6} key={fieldName}>
+                           <Grid item xs={12} sm={6} key={fieldName}>
-                        <MDBox mb={1.5}>
+                              <MDBox mb={1.5}>
-                           <input
+                                 <input
-                              id={fieldName}
+                                    id={fieldName}
+                                    name={fieldName}
+                                    type="file"
+                                    onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
+                                 />
+                                 <MDBox mt={0.75}>
+                                    <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
+                                       {errors[fieldName] && <span>You must select a file to proceed</span>}
+                                    </MDTypography>
+                                 </MDBox>
+                              </MDBox>
+                           </Grid>
+                        );
+                     }
+
+                     // todo? inputProps={{ autoComplete: "" }}
+                     // todo? placeholder={password.placeholder}
+                     return (
+                        <Grid item xs={12} sm={6} key={fieldName}>
+                           <QDynamicFormField
+                              type={field.type}
+                              label={field.label}
+                              isEditable={field.isEditable}
                               name={fieldName}
-                              type="file"
+                              displayFormat={field.displayFormat}
-                              onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
+                              value={values[fieldName]}
+                              error={errors[fieldName] && touched[fieldName]}
+                              bulkEditMode={bulkEditMode}
+                              bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
+                              success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
                            />
-                           <MDBox mt={0.75}>
+                        </Grid>
-                              <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
+                     );
-                                 {errors[fieldName] && <span>You must select a file to proceed</span>}
+                  })}
-                              </MDTypography>
-                           </MDBox>
-                        </MDBox>
-                     </Grid>
-                  );
-               }
-
-               // todo? inputProps={{ autoComplete: "" }}
-               // todo? placeholder={password.placeholder}
-               return (
-                  <Grid item xs={12} sm={6} key={fieldName}>
-                     <QDynamicFormField
-                        type={field.type}
-                        label={field.label}
-                        isEditable={field.isEditable}
-                        name={fieldName}
-                        displayFormat={field.displayFormat}
-                        value={values[fieldName]}
-                        error={errors[fieldName] && touched[fieldName]}
-                        bulkEditMode={bulkEditMode}
-                        bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
-                        success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
-                     />
-                  </Grid>
-               );
-            })}
             </Grid>
          </MDBox>
       </MDBox>
@@ -131,7 +127,8 @@ QDynamicForm.defaultProps = {
    formLabel: undefined,
    bulkEditMode: false,
    bulkEditSwitchChangeHandler: () =>
-   {},
+   {
+   },
 };
 
 export default QDynamicForm;

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

@@ -19,12 +19,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// misc imports
-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 * as Yup from "yup";
 
 /*******************************************************************************
  ** Meta-data to represent a single field in a table.

src/qqq/components/QDynamicFormField/index.tsx

@@ -19,17 +19,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// formik components
+import {InputAdornment} from "@mui/material";
-import {ErrorMessage, Field} from "formik";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-import MDInput from "components/MDInput";
-import React, {useState} from "react";
 import Grid from "@mui/material/Grid";
 import Switch from "@mui/material/Switch";
-import {InputAdornment} from "@mui/material";
+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";
 
 // Declaring props types for FormField
 interface Props

src/qqq/components/QRecordSidebar/index.tsx

@@ -19,16 +19,15 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, {ReactNode} from "react";
+import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
-
-import {Link} from "react-router-dom";
 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 Card from "@mui/material/Card";
-import {Theme} from "@mui/material/styles";
-import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
 
 interface Props {
    tableSections: QSection[];

src/qqq/components/Widgets/BarChart.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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 {useMemo, ReactNode} from "react";
+import {Bar} from "react-chartjs-2";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import configs from "qqq/components/Widgets/Configs/BarChartConfig";
+
+// Declaring props types for ReportsBarChart
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  title: string;
+  description?: string | ReactNode;
+  date: string;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      data: number[];
+    };
+  };
+  [key: string]: any;
+}
+
+function ReportsBarChart({color, title, description, date, chart}: Props): JSX.Element
+{
+   const {data, options} = configs(chart.labels || [], chart.datasets || {});
+
+   return (
+      <Card sx={{height: "100%"}}>
+         <MDBox padding="1rem">
+            {useMemo(
+               () => (
+                  <MDBox
+                     variant="gradient"
+                     bgColor={color}
+                     borderRadius="lg"
+                     coloredShadow={color}
+                     py={2}
+                     pr={0.5}
+                     mt={-5}
+                     height="12.5rem"
+                  >
+                     <Bar data={data} options={options} />
+                  </MDBox>
+               ),
+               [chart, color]
+            )}
+            <MDBox pt={3} pb={1} px={1}>
+               <MDTypography variant="h6" textTransform="capitalize">
+                  {title}
+               </MDTypography>
+               <MDTypography component="div" variant="button" color="text" fontWeight="light">
+                  {description}
+               </MDTypography>
+               <Divider />
+               <MDBox display="flex" alignItems="center">
+                  <MDTypography variant="button" color="text" lineHeight={1} sx={{mt: 0.15, mr: 0.5}}>
+                     <Icon>schedule</Icon>
+                  </MDTypography>
+                  <MDTypography variant="button" color="text" fontWeight="light">
+                     {date}
+                  </MDTypography>
+               </MDBox>
+            </MDBox>
+         </MDBox>
+      </Card>
+   );
+}
+
+// Setting default values for the props of ReportsBarChart
+ReportsBarChart.defaultProps = {
+   color: "dark",
+   description: "",
+};
+
+export default ReportsBarChart;

src/qqq/components/Widgets/Configs/BarChartConfig.ts

@@ -0,0 +1,104 @@
+/*
+ * 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/>.
+ */
+
+function configs(labels: any, datasets: any) 
+{
+   return {
+      data: {
+         labels,
+         datasets: [
+            {
+               label: datasets.label,
+               tension: 0.4,
+               borderWidth: 0,
+               borderRadius: 4,
+               borderSkipped: false,
+               backgroundColor: "rgba(255, 255, 255, 0.8)",
+               data: datasets.data,
+               maxBarThickness: 6,
+            },
+         ],
+      },
+      options: {
+         responsive: true,
+         maintainAspectRatio: false,
+         plugins: {
+            legend: {
+               display: false,
+            },
+         },
+         interaction: {
+            intersect: false,
+            mode: "index",
+         },
+         scales: {
+            y: {
+               grid: {
+                  drawBorder: false,
+                  display: true,
+                  drawOnChartArea: true,
+                  drawTicks: false,
+                  borderDash: [5, 5],
+                  color: "rgba(255, 255, 255, .2)",
+               },
+               ticks: {
+                  suggestedMin: 0,
+                  suggestedMax: 500,
+                  beginAtZero: true,
+                  padding: 10,
+                  font: {
+                     size: 14,
+                     weight: 300,
+                     family: "Roboto",
+                     style: "normal",
+                     lineHeight: 2,
+                  },
+                  color: "#fff",
+               },
+            },
+            x: {
+               grid: {
+                  drawBorder: false,
+                  display: true,
+                  drawOnChartArea: true,
+                  drawTicks: false,
+                  borderDash: [5, 5],
+                  color: "rgba(255, 255, 255, .2)",
+               },
+               ticks: {
+                  display: true,
+                  color: "#f8f9fa",
+                  padding: 10,
+                  font: {
+                     size: 14,
+                     weight: 300,
+                     family: "Roboto",
+                     style: "normal",
+                     lineHeight: 2,
+                  },
+               },
+            },
+         },
+      },
+   };
+}
+
+export default configs;

src/qqq/components/Widgets/Configs/PieChartConfigs.ts

@@ -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 colors from "assets/theme/base/colors";
+
+const {gradients, dark} = colors;
+
+function configs(labels: any, datasets: any) 
+{
+   const backgroundColors = [];
+
+   if (datasets.backgroundColors) 
+   {
+      datasets.backgroundColors.forEach((color: string) =>
+         gradients[color]
+            ? backgroundColors.push(gradients[color].state)
+            : backgroundColors.push(dark.main)
+      );
+   }
+   else 
+   {
+      backgroundColors.push(dark.main);
+   }
+
+   return {
+      data: {
+         labels,
+         datasets: [
+            {
+               label: datasets.label,
+               weight: 9,
+               cutout: 0,
+               tension: 0.9,
+               pointRadius: 2,
+               borderWidth: 2,
+               backgroundColor: backgroundColors,
+               fill: false,
+               data: datasets.data,
+            },
+         ],
+      },
+      options: {
+         responsive: true,
+         maintainAspectRatio: false,
+         plugins: {
+            legend: {
+               display: false,
+            },
+         },
+         interaction: {
+            intersect: false,
+            mode: "index",
+         },
+         scales: {
+            y: {
+               grid: {
+                  drawBorder: false,
+                  display: false,
+                  drawOnChartArea: false,
+                  drawTicks: false,
+               },
+               ticks: {
+                  display: false,
+               },
+            },
+            x: {
+               grid: {
+                  drawBorder: false,
+                  display: false,
+                  drawOnChartArea: false,
+                  drawTicks: false,
+               },
+               ticks: {
+                  display: false,
+               },
+            },
+         },
+      },
+   };
+}
+
+export default configs;

src/qqq/components/Widgets/PieChart.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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 Icon from "@mui/material/Icon";
+import {useMemo, ReactNode} from "react";
+import {Pie} from "react-chartjs-2";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import configs from "qqq/components/Widgets/Configs/PieChartConfigs"
+
+// Declaring props types for PieChart
+interface Props
+{
+   icon?: {
+      color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+      component: ReactNode;
+   };
+   title?: string;
+   description?: string | ReactNode;
+   height?: string | number;
+   chart: {
+      labels: string[];
+      datasets: {
+         label: string;
+         backgroundColors: string[];
+         data: number[];
+      };
+   };
+
+   [key: string]: any;
+}
+
+function PieChart({icon, title, description, height, chart}: Props): JSX.Element
+{
+   const {data, options} = configs(chart.labels || [], chart.datasets || {});
+
+   const renderChart = (
+      <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+         {title || description ? (
+            <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+               {icon.component && (
+                  <MDBox
+                     width="4rem"
+                     height="4rem"
+                     bgColor={icon.color || "info"}
+                     variant="gradient"
+                     coloredShadow={icon.color || "info"}
+                     borderRadius="xl"
+                     display="flex"
+                     justifyContent="center"
+                     alignItems="center"
+                     color="white"
+                     mt={-5}
+                     mr={2}
+                  >
+                     <Icon fontSize="medium">{icon.component}</Icon>
+                  </MDBox>
+               )}
+               <MDBox mt={icon.component ? -2 : 0}>
+                  {title && <MDTypography variant="h6">{title}</MDTypography>}
+                  <MDBox mb={2}>
+                     <MDTypography component="div" variant="button" color="text">
+                        {description}
+                     </MDTypography>
+                  </MDBox>
+               </MDBox>
+            </MDBox>
+         ) : null}
+         {useMemo(
+            () => (
+               <MDBox height={height}>
+                  <Pie data={data} options={options} />
+               </MDBox>
+            ),
+            [chart, height]
+         )}
+      </MDBox>
+   );
+
+   return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props for PieChart
+PieChart.defaultProps = {
+   icon: {color: "info", component: ""},
+   title: "",
+   description: "",
+   height: "19.125rem",
+};
+
+export default PieChart;

src/qqq/components/Widgets/QuickSightChart.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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 React from "react";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+interface Props
+{
+   label: string;
+   url: string;
+}
+
+interface IframeProps
+{
+   iframe: string;
+}
+
+function Iframe({iframe}: IframeProps)
+{
+   return (<div dangerouslySetInnerHTML={{__html: iframe || ""}} />);
+}
+
+function QuickSightChart({label, url}: Props): JSX.Element
+{
+   const iframe = `<iframe style='border: 0 solid #1A73E8; height: 411px; width: 99%' title=${label} src=${url} />`;
+
+   return (
+      <Card sx={{height: "100%"}}>
+         <MDBox padding="1rem">
+            <MDTypography variant="h5">{label}</MDTypography>
+            <Iframe iframe={iframe} />
+         </MDBox>
+      </Card>
+   );
+}
+
+export default QuickSightChart;

src/qqq/pages/app-home/index.tsx

@@ -19,30 +19,27 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData";
+import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {Icon} from "@mui/material";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
 import React, {useEffect, useState} from "react";
 import {Link, useLocation} from "react-router-dom";
-
-// Material Dashboard 2 PRO React TS examples components
-import QClient from "qqq/utils/QClient";
-import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData";
-import BaseLayout from "qqq/components/BaseLayout";
-import MDBox from "components/MDBox";
-import Grid from "@mui/material/Grid";
-import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
-import {Icon} from "@mui/material";
-import MDTypography from "components/MDTypography";
-import Card from "@mui/material/Card";
-import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard";
-import ReportsLineChart from "examples/Charts/LineCharts/ReportsLineChart";
-import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
 import MDBadgeDot from "components/MDBadgeDot";
-import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";
+import MDBox from "components/MDBox";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import MDTypography from "components/MDTypography";
-import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
-import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard";
+import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
+import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
+import BaseLayout from "qqq/components/BaseLayout";
 import ProcessLinkCard from "qqq/components/ProcessLinkCard";
+import BarChart from "qqq/components/Widgets/BarChart";
+import QuickSightChart from "qqq/components/Widgets/QuickSightChart";
+import QClient from "qqq/utils/QClient";
 
 const qController = QClient.getInstance();
 
@@ -57,6 +54,9 @@ function AppHome({app}: Props): JSX.Element
    const [tables, setTables] = useState([] as QTableMetaData[]);
    const [processes, setProcesses] = useState([] as QProcessMetaData[]);
    const [childApps, setChildApps] = useState([] as QAppMetaData[]);
+   const [tableCounts, setTableCounts] = useState(new Map<string, { isLoading: boolean, value: number }>());
+   const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date());
+   const [widgets, setWidgets] = useState([] as any[]);
 
    const location = useLocation();
 
@@ -102,154 +102,213 @@ function AppHome({app}: Props): JSX.Element
       setTables(newTables);
       setProcesses(newProcesses);
       setChildApps(newChildApps);
+
+      const tableCounts = new Map<string, { isLoading: boolean, value: number }>();
+      newTables.forEach((table) =>
+      {
+         tableCounts.set(table.name, {isLoading: true, value: null});
+
+         setTimeout(async () =>
+         {
+            const count = await qController.count(table.name);
+            tableCounts.set(table.name, {isLoading: false, value: count});
+            setTableCounts(tableCounts);
+            setUpdatedTableCounts(new Date());
+         }, 1);
+      });
+      setTableCounts(tableCounts);
+
+      console.log(app.widgets);
+      if (app.widgets)
+      {
+         const widgets: any[] = [];
+         for (let i = 0; i < app.widgets.length; i++)
+         {
+            widgets[i] = {};
+            setTimeout(async () =>
+            {
+               const widget = await qController.widget(app.widgets[i]);
+               widgets[i] = widget;
+               setUpdatedTableCounts(new Date());
+            }, 1);
+         }
+         setWidgets(widgets);
+      }
    }, [qInstance, location]);
 
-   const reportsBarChartData = {
+   /*
-      labels: ["M", "T", "W", "T", "F", "S", "S"],
+   const charts = [
-      datasets: {label: "Sales", data: [50, 20, 10, 22, 50, 10, 40]},
+      {
-   };
+         type: "barChart",
-
+         title: "Parcel Invoice Lines per Month",
-   interface Types {
+         barChartData: {
-      labels: string[];
+            labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"],
-      datasets: {
+            datasets: {label: "Parcel Invoice Lines", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]},
-         label: string;
-         color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
-         data: number[];
-      }[];
-   }
-
-   const demoLineChartData: Types = {
-      labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-      datasets: [
-         {
-            label: "Facebook Ads",
-            color: "info",
-            data: [50, 100, 200, 190, 400, 350, 500, 450, 700],
          },
-         {
+      },
-            label: "Google Ads",
+      {
-            color: "dark",
+         type: "lineChart",
-            data: [10, 30, 40, 120, 150, 220, 280, 250, 280],
+         title: "Total Charges by Carrier per Month",
+         lineChartData: {
+            labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"],
+            datasets: [
+               {label: "UPS", color: "info", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]},
+               {label: "FedEx", color: "dark", data: [5000, 22000, 31111, 32333, 20404, 19876, 24355]},
+               {label: "LSO", color: "error", data: [500, 2200, 1111, 2333, 404, 17876, 2355]},
+            ],
          },
-      ],
+      },
-   };
+   ];
+   */
+
+   console.log(`Widgets: ${widgets} and tables: ${tables}`);
+
+   const haveWidgets = widgets && widgets.length;
+   const widgetCount = widgets ? widgets.length : 0;
+
+   // eslint-disable-next-line no-nested-ternary
+   const tileSizeLg = (widgetCount === 0 ? 3 : widgetCount === 1 ? 4 : 6);
+   let gridIndex = 0;
 
    return (
       <BaseLayout>
          <MDBox mt={4}>
             <Grid container spacing={3}>
-
+               {
-               <Grid item xs={6} lg={6}>
+                  widgetCount > 0 ? (
-                  <Grid container spacing={3}>
+                     <Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
-
+                        <Grid container spacing={3}>
-                     <Grid item xs={6} lg={6}>
+                           {
-                        <MDBox mb={3}>
+                              widgets.map((chart) => (
-                           <MDBox mb={3}>
+                                 <Grid key={`${gridIndex++}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
-                              <ReportsBarChart
+                                    <MDBox mb={3}>
-                                 color="info"
+                                       {
-                                 title="Packages Shipped"
+                                          chart.type === "quickSightChart" && (
-                                 description="Total outbound shipments"
+                                             <QuickSightChart url={chart.url} label={chart.label} />
-                                 date="Updated at 7:04 a.m. ET"
+                                          )
-                                 chart={reportsBarChartData}
+                                       }
-                              />
+                                       {
-                           </MDBox>
+                                          chart.type === "barChart" && (
-                        </MDBox>
+                                             <BarChart
-                     </Grid>
+                                                color="info"
-
+                                                title={chart.title}
-                     <Grid item xs={6} lg={6}>
+                                                date={`As of ${new Date().toDateString()}`}
-                        <DefaultLineChart
+                                                chart={chart.barChartData}
-                           title="Revenue"
-                           description={(
-                              <MDBox display="flex" justifyContent="space-between">
-                                 <MDBox display="flex" ml={-1}>
-                                    <MDBadgeDot color="info" size="sm" badgeContent="UPS" />
-                                    <MDBadgeDot color="dark" size="sm" badgeContent="FedEx" />
-                                 </MDBox>
-                                 <MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
-                              </MDBox>
-                           )}
-                           chart={demoLineChartData}
-                        />
-                     </Grid>
-
-                  </Grid>
-               </Grid>
-
-               <Grid item xs={6} lg={6}>
-                  {
-                     tables.length ? (
-                        <MDBox mb={3}>
-                           <Card id="basic-info" sx={{overflow: "visible"}}>
-                              <MDBox p={3}>
-                                 <MDTypography variant="h5">Tables</MDTypography>
-                              </MDBox>
-                              <Grid container spacing={3} padding={3} paddingTop={0}>
-                                 {tables.map((table) => (
-                                    <Grid key={table.name} item xs={12} md={12} lg={6}>
-                                       <Link to={table.name}>
-                                          <MDBox mb={3}>
-                                             <MiniStatisticsCard
-                                                title={{fontWeight: "bold", text: table.label}}
-                                                count="17,013"
-                                                percentage={{color: "info", text: "total records"}}
-                                                icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
-                                                direction="right"
                                              />
-                                          </MDBox>
+                                          )
-                                       </Link>
+                                       }
-                                    </Grid>
+                                       {
-                                 ))}
+                                          chart.type === "lineChart" && (
-                              </Grid>
+                                             <DefaultLineChart
-                           </Card>
+                                                title={chart.title}
-                        </MDBox>
+                                                description={(
-                     ) : null
+                                                   <MDBox display="flex" justifyContent="space-between">
-                  }
+                                                      <MDBox display="flex" ml={-1}>
+                                                         {
+                                                            chart.lineChartData.datasets.map((dataSet: any) => (
+                                                               <MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
+                                                            ))
+                                                         }
+                                                      </MDBox>
+                                                      <MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
+                                                   </MDBox>
+                                                )}
+                                                chart={chart.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
+                                             />
+                                          )
+                                       }
+                                    </MDBox>
+                                 </Grid>
+                              ))
+                           }
+                        </Grid>
+                     </Grid>
+                  ) : null
+               }
 
-                  {
+               {
-                     processes.length ? (
+                  tables.length > 0 || processes.length > 0 || childApps.length > 0 ? (
-                        <MDBox mb={3}>
+                     // eslint-disable-next-line no-nested-ternary
-                           <Card id="basic-info" sx={{overflow: "visible"}}>
+                     <Grid item xs={12} lg={widgetCount === 0 ? 12 : widgetCount === 1 ? 9 : 6}>
-                              <MDBox p={3}>
+                        {
-                                 <MDTypography variant="h5">Processes</MDTypography>
+                           tables.length ? (
+                              <MDBox mb={3}>
+                                 <Card id="basic-info" sx={{overflow: "visible"}}>
+                                    <MDBox p={3}>
+                                       <MDTypography variant="h5">Tables</MDTypography>
+                                    </MDBox>
+                                    <Grid container spacing={3} padding={3} paddingTop={0}>
+                                       {tables.map((table) => (
+                                          <Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}>
+                                             <Link to={table.name}>
+                                                <MDBox mb={3}>
+                                                   <MiniStatisticsCard
+                                                      title={{fontWeight: "bold", text: table.label}}
+                                                      count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : tableCounts.get(table.name).value.toLocaleString()}
+                                                      percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : "total records")}}
+                                                      icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
+                                                      direction="right"
+                                                   />
+                                                </MDBox>
+                                             </Link>
+                                          </Grid>
+                                       ))}
+                                    </Grid>
+                                 </Card>
                               </MDBox>
-                              <Grid container spacing={3} padding={3} paddingTop={3}>
+                           ) : null
-                                 {processes.map((process) => (
+                        }
-                                    <Grid key={process.name} item xs={12} md={12} lg={6}>
-                                       <Link to={process.name}>
-                                          <ProcessLinkCard
-                                             icon={process.iconName || app.iconName}
-                                             title={process.label}
-                                          />
-                                       </Link>
-                                    </Grid>
-                                 ))}
-                              </Grid>
-                           </Card>
-                        </MDBox>
-                     ) : null
-                  }
 
-                  {
+                        {
-                     childApps.length ? (
+                           processes.length ? (
-                        <MDBox mb={3}>
+                              <MDBox mb={3}>
-                           <Card id="basic-info" sx={{overflow: "visible"}}>
+                                 <Card id="basic-info" sx={{overflow: "visible"}}>
-                              <Grid container spacing={3} padding={3} paddingTop={3}>
+                                    <MDBox p={3}>
-                                 {childApps.map((childApp) => (
+                                       <MDTypography variant="h5">Processes</MDTypography>
-                                    <Grid key={childApp.name} item xs={12} md={12} lg={6}>
+                                    </MDBox>
-                                       <Link to={childApp.name}>
+                                    <Grid container spacing={3} padding={3} paddingTop={3}>
-                                          <DefaultInfoCard
+                                       {processes.map((process) => (
-                                             icon={childApp.iconName || app.iconName}
+                                          <Grid key={process.name} item xs={12} md={12} lg={tileSizeLg}>
-                                             title={childApp.label}
+                                             <Link to={process.name}>
-                                          />
+                                                <ProcessLinkCard
-                                       </Link>
+                                                   icon={process.iconName || app.iconName}
+                                                   title={process.label}
+                                                />
+                                             </Link>
+                                          </Grid>
+                                       ))}
                                     </Grid>
-                                 ))}
+                                 </Card>
-                              </Grid>
+                              </MDBox>
-                           </Card>
+                           ) : null
-                        </MDBox>
+                        }
-                     ) : null
+
-                  }
+                        {
-               </Grid>
+                           childApps.length ? (
+                              <MDBox mb={3}>
+                                 <Card id="basic-info" sx={{overflow: "visible"}}>
+                                    <MDBox p={3}>
+                                       <MDTypography variant="h5">Apps</MDTypography>
+                                    </MDBox>
+                                    <Grid container spacing={3} padding={3} paddingTop={3}>
+                                       {childApps.map((childApp) => (
+                                          <Grid key={childApp.name} item xs={12} md={12} lg={tileSizeLg}>
+                                             <Link to={childApp.name}>
+                                                <DefaultInfoCard
+                                                   icon={childApp.iconName || app.iconName}
+                                                   title={childApp.label}
+                                                />
+                                             </Link>
+                                          </Grid>
+                                       ))}
+                                    </Grid>
+                                 </Card>
+                              </MDBox>
+                           ) : null
+                        }
+                     </Grid>
+                  ) : null
+               }
 
             </Grid>
          </MDBox>

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

@@ -19,16 +19,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @mui material components
-import Grid from "@mui/material/Grid";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-
-// Settings page components
-import EntityForm from "qqq/components/EntityForm";
-import BaseLayout from "qqq/components/BaseLayout";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import Grid from "@mui/material/Grid";
+import MDBox from "components/MDBox";
+import BaseLayout from "qqq/components/BaseLayout";
+import EntityForm from "qqq/components/EntityForm";
 
 interface Props
 {

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

@@ -19,18 +19,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @mui material components
-import Grid from "@mui/material/Grid";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-
-// Settings page components
-import BaseLayout from "qqq/components/BaseLayout";
-import {useParams} from "react-router-dom";
-import EntityForm from "qqq/components/EntityForm";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import EntityList from "qqq/pages/entity-list";
+import Grid from "@mui/material/Grid";
+import {useParams} from "react-router-dom";
+import MDBox from "components/MDBox";
+import BaseLayout from "qqq/components/BaseLayout";
+import EntityForm from "qqq/components/EntityForm";
 
 interface Props
 {

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

@@ -19,26 +19,25 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, {
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-   useCallback, useEffect, useReducer, useRef, useState,
+import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
-} from "react";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {
+import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
-   Link, useNavigate, useParams, useSearchParams,
+import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
-} from "react-router-dom";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-
+import {Alert, TablePagination} from "@mui/material";
-// @mui material components
+import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
+import LinearProgress from "@mui/material/LinearProgress";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import {Alert, TablePagination} from "@mui/material";
 import {
    DataGridPro,
    GridCallbackDetails,
    GridColDef,
    GridColumnOrderChangeParams,
    GridColumnVisibilityModel,
-   GridExportMenuItemProps,
    GridFilterModel,
    GridRowId,
    GridRowParams,
@@ -51,33 +50,22 @@ import {
    GridToolbarDensitySelector,
    GridToolbarExportContainer,
    GridToolbarFilterButton,
-   MuiEvent,
+   GridExportMenuItemProps,
+   MuiEvent
 } from "@mui/x-data-grid-pro";
-
+import React, {useCallback, useEffect, useReducer, useRef, useState} from "react";
-// Material Dashboard 2 PRO React TS components
+import {Link, useNavigate, useParams, useSearchParams} from "react-router-dom";
-import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
-import MDBox from "components/MDBox";
 import MDAlert from "components/MDAlert";
-
+import MDBox from "components/MDBox";
-// QQQ
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
-import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
-import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
-import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
-import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-import QClient from "qqq/utils/QClient";
 import Navbar from "qqq/components/Navbar";
-import Button from "@mui/material/Button";
+import {QActionsMenuButton, QCreateNewButton} from "qqq/components/QButtons";
+import QClient from "qqq/utils/QClient";
+import QFilterUtils from "qqq/utils/QFilterUtils";
+import QValueUtils from "qqq/utils/QValueUtils";
 import Footer from "../../components/Footer";
 import QProcessUtils from "../../utils/QProcessUtils";
 
-import {QActionsMenuButton, QCreateNewButton} from "qqq/components/QButtons";
-import QValueUtils from "qqq/utils/QValueUtils";
-import LinearProgress from "@mui/material/LinearProgress";
-import QFilterUtils from "qqq/utils/QFilterUtils";
-
 const COLUMN_VISIBILITY_LOCAL_STORAGE_KEY_ROOT = "qqq.columnVisibility";
 const COLUMN_SORT_LOCAL_STORAGE_KEY_ROOT = "qqq.columnSort";
 const FILTER_LOCAL_STORAGE_KEY_ROOT = "qqq.filter";

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

@@ -19,41 +19,34 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// react components
+import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
-import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
+import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
-import React, {useReducer, useState} from "react";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-// @material-ui core components
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
-import Grid from "@mui/material/Grid";
 import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
+import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
-import DialogActions from "@mui/material/DialogActions";
+import DialogTitle from "@mui/material/DialogTitle";
-import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
-
+import Icon from "@mui/material/Icon";
-// qqq imports
-import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import MDAlert from "components/MDAlert";
+import React, {useReducer, useState} from "react";
-import QProcessUtils from "../../../../utils/QProcessUtils";
+import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
-import QClient from "qqq/utils/QClient";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons";
-import QValueUtils from "qqq/utils/QValueUtils";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import Icon from "@mui/material/Icon";
-import Avatar from "@mui/material/Avatar";
-import QRecordSidebar from "qqq/components/QRecordSidebar";
-import QTableUtils from "qqq/utils/QTableUtils";
 import colors from "assets/theme/base/colors";
-import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
+import MDAlert from "components/MDAlert";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons";
+import QRecordSidebar from "qqq/components/QRecordSidebar";
+import QClient from "qqq/utils/QClient";
+import QTableUtils from "qqq/utils/QTableUtils";
+import QValueUtils from "qqq/utils/QValueUtils";
+import QProcessUtils from "../../../../utils/QProcessUtils";
 
 const qController = QClient.getInstance();
 

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

@@ -19,19 +19,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {useParams} from "react-router-dom";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-
-// @mui material components
 import Grid from "@mui/material/Grid";
-
+import {useParams} from "react-router-dom";
-// Material Dashboard 2 PRO React TS components
 import MDBox from "components/MDBox";
-
-// Settings page components
 import BaseLayout from "qqq/components/BaseLayout";
 import ViewContents from "./components/ViewContents";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import EntityList from "qqq/pages/entity-list";
 
 interface Props
 {

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

@@ -19,48 +19,41 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as Yup from "yup";
+import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
-
-import {
-   Button, CircularProgress, Icon, TablePagination,
-} from "@mui/material";
-import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
-// formik components
-import {Form, Formik} from "formik";
-import React, {Fragment, useEffect, useState} from "react";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
-
-import BaseLayout from "qqq/components/BaseLayout";
-import Card from "@mui/material/Card";
-import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
-import FormData from "form-data";
-import Grid from "@mui/material/Grid";
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDButton from "components/MDButton";
-import MDProgress from "components/MDProgress";
-import MDTypography from "../../../components/MDTypography";
-import QClient from "qqq/utils/QClient";
 import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
-import QDynamicForm from "../../components/QDynamicForm";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFrontendComponent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendComponent";
 import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 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 {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
+import {Button, Icon, CircularProgress, TablePagination} from "@mui/material";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
 import Step from "@mui/material/Step";
 import StepLabel from "@mui/material/StepLabel";
 import Stepper from "@mui/material/Stepper";
-import QValidationReview from "qqq/pages/process-run/components/QValidationReview";
+import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
-import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import FormData from "form-data";
-import QProcessSummaryResults from "./components/QProcessSummaryResults";
+import {Form, Formik} from "formik";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import React, {Fragment, useEffect, useState} from "react";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
+import * as Yup from "yup";
+import MDBox from "components/MDBox";
+import MDButton from "components/MDButton";
+import MDProgress from "components/MDProgress";
+import BaseLayout from "qqq/components/BaseLayout";
 import {QCancelButton, QSubmitButton} from "qqq/components/QButtons";
-import {formatDate} from "@fullcalendar/react";
+import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
+import QValidationReview from "qqq/pages/process-run/components/QValidationReview";
+import QClient from "qqq/utils/QClient";
+import MDTypography from "../../../components/MDTypography";
+import QDynamicForm from "../../components/QDynamicForm";
+import QProcessSummaryResults from "./components/QProcessSummaryResults";
 
 interface Props
 {

src/qqq/utils/QClient.ts

@@ -19,9 +19,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {useAuth0} from "@auth0/auth0-react";
 import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
 import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
-import {useAuth0} from "@auth0/auth0-react";
 
 /*******************************************************************************
  ** 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";
 
 /*******************************************************************************
  ** Utility class for working with QQQ Processes

src/qqq/utils/QTableUtils.ts

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

src/qqq/utils/QValueUtils.ts

@@ -20,9 +20,8 @@
  */
 
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import "datejs";
 
 /*******************************************************************************