Add null-pointer check in getFieldAndTable (but be careful downstream...)

Feature/ce 798 quick filters fixes

.circleci/config.yml

@@ -2,12 +2,12 @@ version: 2.1
 
 orbs:
   node: circleci/node@5.1.0
-  browser-tools: circleci/browser-tools@1.4.5
+  browser-tools: circleci/browser-tools@1.4.7
 
 executors:
   java17:
     docker:
-      - image: 'cimg/openjdk:17.0'
+      - image: 'cimg/openjdk:17.0.9'
 
 commands:
   install_java17:

package.json

@@ -6,7 +6,7 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.82",
+      "@kingsrook/qqq-frontend-core": "1.0.85",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",
@@ -42,6 +42,7 @@
       "react-dom": "18.0.0",
       "react-github-btn": "1.2.1",
       "react-google-drive-picker": "^1.2.0",
+      "react-markdown": "9.0.1",
       "react-router-dom": "6.2.1",
       "react-router-hash-link": "2.4.3",
       "react-table": "7.7.0",

pom.xml

@@ -29,7 +29,7 @@
    <packaging>jar</packaging>
 
    <properties>
-      <revision>0.19.0-SNAPSHOT</revision>
+      <revision>0.20.0-SNAPSHOT</revision>
 
       <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
       <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
@@ -66,7 +66,7 @@
       <dependency>
          <groupId>com.kingsrook.qqq</groupId>
          <artifactId>qqq-backend-core</artifactId>
-         <version>0.17.0-SNAPSHOT</version>
+         <version>feature-CE-798-quick-filters-20240123.205854-1</version>
       </dependency>
       <dependency>
          <groupId>org.slf4j</groupId>
@@ -77,13 +77,13 @@
       <dependency>
          <groupId>org.seleniumhq.selenium</groupId>
          <artifactId>selenium-java</artifactId>
-         <version>4.10.0</version>
+         <version>4.15.0</version>
          <scope>test</scope>
       </dependency>
       <dependency>
          <groupId>io.github.bonigarcia</groupId>
          <artifactId>webdrivermanager</artifactId>
-         <version>5.4.1</version>
+         <version>5.6.2</version>
          <scope>test</scope>
       </dependency>
       <dependency>
@@ -119,7 +119,7 @@
       <dependency>
          <groupId>org.json</groupId>
          <artifactId>json</artifactId>
-         <version>20230227</version>
+         <version>20231013</version>
          <scope>test</scope>
       </dependency>
       <dependency>

src/App.tsx

@@ -36,7 +36,7 @@ import {LicenseInfo} from "@mui/x-license-pro";
 import jwt_decode from "jwt-decode";
 import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
 import {useCookies} from "react-cookie";
-import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
+import {Navigate, Route, Routes, useLocation, useSearchParams,} from "react-router-dom";
 import {Md5} from "ts-md5/dist/md5";
 import CommandMenu from "CommandMenu";
 import QContext from "QContext";
@@ -73,6 +73,14 @@ export default function App()
    const [loggedInUser, setLoggedInUser] = useState({} as { name?: string, email?: string });
    const [defaultRoute, setDefaultRoute] = useState("/no-apps");
 
+   /////////////////////////////////////////////////////////
+   // tell the client how to do a logout if it sees a 401 //
+   /////////////////////////////////////////////////////////
+   Client.setUnauthorizedCallback(() =>
+   {
+      logout();
+   })
+
    const shouldStoreNewToken = (newToken: string, oldToken: string): boolean =>
    {
       if (!cookies[SESSION_UUID_COOKIE_NAME])
@@ -167,18 +175,8 @@ export default function App()
                   console.log("Using existing sessionUUID cookie");
                }
 
-               /*
-               ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               // todo#authHeader - this is our quick rollback plan - if we feel the need to stop using the cookie approach. //
-               // we turn off the shouldStoreNewToken block above, and turn on these 2 lines.                                //
-               ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
-               localStorage.removeItem("accessToken");
-               */
-
                setIsFullyAuthenticated(true);
                qController.setGotAuthentication();
-               qController.setAuthorizationHeaderValue("Bearer " + accessToken);
 
                setLoggedInUser(user);
                console.log("Token load complete.");
@@ -199,8 +197,8 @@ export default function App()
             // use a random token if anonymous or mock //
             /////////////////////////////////////////////
             console.log("Generating random token...");
-            qController.setAuthorizationHeaderValue(Md5.hashStr(`${new Date()}`));
             setIsFullyAuthenticated(true);
+            qController.setGotAuthentication();
             setCookie(SESSION_UUID_COOKIE_NAME, Md5.hashStr(`${new Date()}`), {path: "/"});
             console.log("Token generation complete.");
             return;
@@ -228,6 +226,7 @@ export default function App()
    const {miniSidenav, direction, layout, openConfigurator, sidenavColor} = controller;
    const [onMouseEnter, setOnMouseEnter] = useState(false);
    const {pathname} = useLocation();
+   const [queryParams] = useSearchParams();
 
    const [needToLoadRoutes, setNeedToLoadRoutes] = useState(true);
    const [sideNavRoutes, setSideNavRoutes] = useState([]);
@@ -356,7 +355,7 @@ export default function App()
                routeList.push({
                   name: `${app.label}`,
                   key: app.name,
-                  route: `${path}/savedFilter/:id`,
+                  route: `${path}/savedView/:id`,
                   component: <RecordQuery table={table} key={table.name} />,
                });
 
@@ -519,7 +518,7 @@ export default function App()
                name: loggedInUser?.name ?? "Anonymous",
                key: "username",
                noCollapse: true,
-               icon: <Avatar src={profilePicture} alt="{user?.name}" />,
+               icon: <Avatar src={profilePicture} alt="{loggedInUser?.name}" />,
             };
             setProfileRoutes(profileRoutes);
 
@@ -657,22 +656,28 @@ export default function App()
 
    const [pageHeader, setPageHeader] = useState("" as string | JSX.Element);
    const [accentColor, setAccentColor] = useState("#0062FF");
+   const [accentColorLight, setAccentColorLight] = useState("#C0D6F7")
    const [tableMetaData, setTableMetaData] = useState(null);
    const [tableProcesses, setTableProcesses] = useState(null);
    const [dotMenuOpen, setDotMenuOpen] = useState(false);
    const [keyboardHelpOpen, setKeyboardHelpOpen] = useState(false);
+   const [helpHelpActive] = useState(queryParams.has("helpHelp"));
+
    return (
 
       appRoutes && (
          <QContext.Provider value={{
             pageHeader: pageHeader,
             accentColor: accentColor,
+            accentColorLight: accentColorLight,
             tableMetaData: tableMetaData,
             tableProcesses: tableProcesses,
             dotMenuOpen: dotMenuOpen,
             keyboardHelpOpen: keyboardHelpOpen,
+            helpHelpActive: helpHelpActive,
             setPageHeader: (header: string | JSX.Element) => setPageHeader(header),
             setAccentColor: (accentColor: string) => setAccentColor(accentColor),
+            setAccentColorLight: (accentColorLight: string) => setAccentColorLight(accentColorLight),
             setTableMetaData: (tableMetaData: QTableMetaData) => setTableMetaData(tableMetaData),
             setTableProcesses: (tableProcesses: QProcessMetaData[]) => setTableProcesses(tableProcesses),
             setDotMenuOpen: (dotMenuOpent: boolean) => setDotMenuOpen(dotMenuOpent),
@@ -702,4 +707,4 @@ export default function App()
          </QContext.Provider>
       )
    );
-}
+}

src/CommandMenu.tsx

@@ -354,8 +354,7 @@ const CommandMenu = ({metaData}: Props) =>
                   <Grid container columnSpacing={5} rowSpacing={1}>
                      <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>n</span>Create a New Record</Grid>
                      <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>r</span>Refresh the Query</Grid>
-                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>c</span>Open the Columns Panel</Grid>
-                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>f</span>Open the Filter Panel</Grid>
+                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>f</span>Open the Filter Builder (Advanced mode only)</Grid>
                   </Grid>
 
                   <Typography variant="h6" pt={3}>Record View</Typography>

src/QContext.tsx

@@ -19,9 +19,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData";
 import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
-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 {createContext} from "react";
@@ -32,7 +30,10 @@ interface QContext
    setPageHeader?: (header: string | JSX.Element) => void;
 
    accentColor: string;
-   setAccentColor?: (header: string) => void;
+   setAccentColor?: (color: string) => void;
+
+   accentColorLight: string;
+   setAccentColorLight?: (color: string) => void;
 
    dotMenuOpen: boolean;
    setDotMenuOpen?: (dotMenuOpen: boolean) => void;
@@ -51,14 +52,17 @@ interface QContext
    ///////////////////////////////////
    pathToLabelMap?: {[path: string]: string};
    branding?: QBrandingMetaData;
+   helpHelpActive?: boolean;
 }
 
 const defaultState = {
    pageHeader: "",
    accentColor: "#0062FF",
+   accentColorLight: "#C0D6F7",
    dotMenuOpen: false,
    keyboardHelpOpen: false,
    pathToLabelMap: {},
+   helpHelpActive: false,
 };
 
 const QContext = createContext<QContext>(defaultState);

src/main/java/Placeholder.java

@@ -1,10 +0,0 @@
-/*******************************************************************************
- ** Placeholder class, because maven really wants some source under src/main?
- *******************************************************************************/
-public class Placeholder
-{
-   public void f()
-   {
-     
-   }
-}

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardIconRoleNames.java

@@ -0,0 +1,31 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2023.  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/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+public interface MaterialDashboardIconRoleNames
+{
+   String TOP_RIGHT_INSIDE_CARD = "topRightInsideCard";
+}

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardTableMetaData.java

@@ -22,17 +22,23 @@
 package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
 
 
+import java.util.HashSet;
 import java.util.List;
+import java.util.Set;
+import com.kingsrook.qqq.backend.core.instances.QInstanceValidator;
+import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
 import com.kingsrook.qqq.backend.core.model.metadata.tables.QSupplementalTableMetaData;
+import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
+import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
 
 
 /*******************************************************************************
- **
+ ** table-level meta-data for this module (handled as QSupplementalTableMetaData)
  *******************************************************************************/
 public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
 {
    private List<List<String>> gotoFieldNames;
-
+   private List<String> defaultQuickFilterFieldNames;
 
 
    /*******************************************************************************
@@ -86,4 +92,73 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
       return (this);
    }
 
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   public void validate(QInstance qInstance, QTableMetaData tableMetaData, QInstanceValidator qInstanceValidator)
+   {
+      super.validate(qInstance, tableMetaData, qInstanceValidator);
+
+      String prefix = "MaterialDashboardTableMetaData supplementalTableMetaData for table [" + tableMetaData.getName() + "] ";
+
+      for(List<String> gotoFieldNameSubList : CollectionUtils.nonNullList(gotoFieldNames))
+      {
+         qInstanceValidator.assertCondition(!gotoFieldNameSubList.isEmpty(), prefix + "has an empty gotoFieldNames list");
+         validateListOfFieldNames(tableMetaData, gotoFieldNameSubList, qInstanceValidator, prefix + "gotoFieldNames: ");
+      }
+      validateListOfFieldNames(tableMetaData, defaultQuickFilterFieldNames, qInstanceValidator, prefix + "defaultQuickFilterFieldNames: ");
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private void validateListOfFieldNames(QTableMetaData tableMetaData, List<String> fieldNames, QInstanceValidator qInstanceValidator, String prefix)
+   {
+      Set<String> usedNames = new HashSet<>();
+      for(String fieldName : CollectionUtils.nonNullList(fieldNames))
+      {
+         if(qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldName), prefix + " unrecognized field name: " + fieldName))
+         {
+            qInstanceValidator.assertCondition(!usedNames.contains(fieldName), prefix + " has a duplicated field name: " + fieldName);
+            usedNames.add(fieldName);
+         }
+      }
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for defaultQuickFilterFieldNames
+    *******************************************************************************/
+   public List<String> getDefaultQuickFilterFieldNames()
+   {
+      return (this.defaultQuickFilterFieldNames);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for defaultQuickFilterFieldNames
+    *******************************************************************************/
+   public void setDefaultQuickFilterFieldNames(List<String> defaultQuickFilterFieldNames)
+   {
+      this.defaultQuickFilterFieldNames = defaultQuickFilterFieldNames;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for defaultQuickFilterFieldNames
+    *******************************************************************************/
+   public MaterialDashboardTableMetaData withDefaultQuickFilterFieldNames(List<String> defaultQuickFilterFieldNames)
+   {
+      this.defaultQuickFilterFieldNames = defaultQuickFilterFieldNames;
+      return (this);
+   }
+
 }

src/qqq/assets/theme-dark/base/typography.ts

@@ -149,7 +149,7 @@ interface Types {
 }
 
 const baseProperties = {
-  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontFamily: '"SF Pro Display", "Roboto", "Helvetica", "Arial", sans-serif',
   fontWeightLighter: 100,
   fontWeightLight: 300,
   fontWeightRegular: 400,

src/qqq/assets/theme/base/colors.ts

@@ -78,6 +78,19 @@ interface Types
       light: string;
       main: string;
       focus: string;
+   }
+   blueGray:
+      | {
+      main: string;
+   }
+   gray:
+      | {
+      main: string;
+      focus: string;
+   }
+   grayLines:
+      | {
+      main: string;
    }
       | any;
    primary: ColorsTypes | any;
@@ -174,6 +187,19 @@ const colors: Types = {
       focus: "#ffffff",
    },
 
+   blueGray: {
+      main: "#546E7A"
+   },
+
+   gray: {
+      main: "#757575",
+      focus: "#757575",
+   },
+
+   grayLines: {
+      main: "#D6D6D6"
+   },
+
    black: {
       light: "#000000",
       main: "#000000",
@@ -216,7 +242,7 @@ const colors: Types = {
    },
 
    dark: {
-      main: "#344767",
+      main: "#212121",
       focus: "#2c3c58",
    },
 

src/qqq/assets/theme/base/typography.ts

@@ -149,7 +149,7 @@ interface Types {
 }
 
 const baseProperties = {
-  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontFamily: '"SF Pro Display", "Roboto", "Helvetica", "Arial", sans-serif',
   fontWeightLighter: 100,
   fontWeightLight: 300,
   fontWeightRegular: 400,
@@ -199,9 +199,10 @@ const typography: Types = {
   },
 
   h3: {
-    fontSize: pxToRem(30),
+    fontSize: "1.75rem",
     lineHeight: 1.375,
     ...baseHeadingProperties,
+    fontWeight: 600
   },
 
   h4: {
@@ -217,9 +218,10 @@ const typography: Types = {
   },
 
   h6: {
-    fontSize: pxToRem(16),
+    fontSize: "1.125rem",
     lineHeight: 1.625,
     ...baseHeadingProperties,
+    fontWeight: 500
   },
 
   subtitle1: {

src/qqq/assets/theme/components/card/index.ts

@@ -31,7 +31,7 @@ type Types = any;
 
 const card: Types = {
    defaultProps: {
-      elevation: 3
+      elevation: 0
    },
    styleOverrides: {
       root: {
@@ -42,7 +42,7 @@ const card: Types = {
          wordWrap: "break-word",
          backgroundColor: white.main,
          backgroundClip: "border-box",
-         border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`,
+         border: `${borderWidth[1]} solid ${colors.grayLines.main}`,
          borderRadius: borderRadius.xl,
          overflow: "visible",
       },

src/qqq/assets/theme/components/tabs/index.ts

@@ -1,68 +1,75 @@
 /**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
+ =========================================================
+ * 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)
+ * 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
+ Coded by www.creative-tim.com
 
  =========================================================
 
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
 
 // Material Dashboard 2 PRO React TS Base Styles
 import colors from "qqq/assets/theme/base/colors";
-import borders from "qqq/assets/theme/base/borders";
-import boxShadows from "qqq/assets/theme/base/boxShadows";
 
 // Material Dashboard 2 PRO React TS Helper Functions
 import pxToRem from "qqq/assets/theme/functions/pxToRem";
 
-const { grey, white } = colors;
-const { borderRadius } = borders;
-const { tabsBoxShadow } = boxShadows;
+const {grey, white} = colors;
 
 // types
 type Types = any;
 
 const tabs: Types = {
-  styleOverrides: {
-    root: {
-      position: "relative",
-      backgroundColor: grey[100],
-      borderRadius: borderRadius.xl,
-      minHeight: "unset",
-      padding: pxToRem(4),
-    },
-
-    flexContainer: {
-      height: "100%",
-      position: "relative",
-      zIndex: 10,
-    },
-
-    fixed: {
-      overflow: "unset !important",
-      overflowX: "unset !important",
-    },
-
-    vertical: {
-      "& .MuiTabs-indicator": {
-        width: "100%",
+   styleOverrides: {
+      root: {
+         position: "relative",
+         borderRadius: 0,
+         borderBottom: "1px solid",
+         borderBottomColor: grey[400],
+         minHeight: "unset",
+         padding: "0",
+         margin: "0",
+         "& button": {
+            fontWeight: 500
+         }
       },
-    },
 
-    indicator: {
-      height: "100%",
-      borderRadius: borderRadius.lg,
-      backgroundColor: white.main,
-      boxShadow: tabsBoxShadow.indicator,
-      transition: "all 500ms ease",
-    },
-  },
+      scroller: {
+         marginLeft: "0.5rem"
+      },
+
+      flexContainer: {
+         height: "100%",
+         position: "relative",
+         width: "fit-content",
+         zIndex: 10,
+      },
+
+      fixed: {
+         overflow: "unset !important",
+         overflowX: "unset !important",
+      },
+
+      vertical: {
+         "& .MuiTabs-indicator": {
+            width: "100%",
+         },
+      },
+
+      indicator: {
+         height: "100%",
+         borderRadius: 0,
+         backgroundColor: white.main,
+         borderBottom: "2px solid",
+         borderBottomColor: colors.info.main,
+         transition: "all 500ms ease",
+      },
+   },
 };
 
 export default tabs;

src/qqq/assets/theme/components/tabs/tab.ts

@@ -1,17 +1,17 @@
 /**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
+ =========================================================
+ * 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)
+ * 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
+ Coded by www.creative-tim.com
 
  =========================================================
 
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
 
 // Material Dashboard 2 PRO React TS Base Styles
 import typography from "qqq/assets/theme/base/typography";
@@ -21,48 +21,50 @@ import colors from "qqq/assets/theme/base/colors";
 // Material Dashboard 2 PRO React TS Helper Functions
 import pxToRem from "qqq/assets/theme/functions/pxToRem";
 
-const { size, fontWeightRegular } = typography;
-const { borderRadius } = borders;
-const { dark } = colors;
+const {size, fontWeightRegular} = typography;
+const {borderRadius} = borders;
+const {dark} = colors;
 
 // types
 type Types = any;
 
 const tab: Types = {
-  styleOverrides: {
-    root: {
-      display: "flex",
-      alignItems: "center",
-      flexDirection: "row",
-      flex: "1 1 auto",
-      textAlign: "center",
-      maxWidth: "unset !important",
-      minWidth: "unset !important",
-      minHeight: "unset !important",
-      fontSize: size.md,
-      fontWeight: fontWeightRegular,
-      textTransform: "none",
-      lineHeight: "inherit",
-      padding: pxToRem(4),
-      borderRadius: borderRadius.lg,
-      color: `${dark.main} !important`,
-      opacity: "1 !important",
+   styleOverrides: {
+      root: {
+         display: "flex",
+         alignItems: "center",
+         flexDirection: "row",
+         flex: "1 1 auto",
+         textAlign: "center",
+         maxWidth: "unset !important",
+         minWidth: "unset !important",
+         minHeight: "unset !important",
+         fontSize: size.md,
+         fontWeight: fontWeightRegular,
+         textTransform: "none",
+         lineHeight: "inherit",
+         padding: "0.75rem 0.5rem 0.5rem",
+         margin: "0 0.5rem",
+         borderRadius: 0,
+         border: 0,
+         color: `${dark.main} !important`,
+         opacity: "1 !important",
 
-      "& .material-icons, .material-icons-round": {
-        marginBottom: "0 !important",
-        marginRight: pxToRem(6),
+         "& .material-icons, .material-icons-round": {
+            marginBottom: "0 !important",
+            marginRight: pxToRem(6),
+         },
+
+         "& svg": {
+            marginBottom: "0 !important",
+            marginRight: pxToRem(6),
+         },
       },
 
-      "& svg": {
-        marginBottom: "0 !important",
-        marginRight: pxToRem(6),
+      labelIcon: {
+         paddingTop: pxToRem(4),
       },
-    },
-
-    labelIcon: {
-      paddingTop: pxToRem(4),
-    },
-  },
+   },
 };
 
 export default tab;

src/qqq/assets/theme/components/tooltip.ts

@@ -24,7 +24,7 @@ import borders from "qqq/assets/theme/base/borders";
 // Material Dashboard 2 PRO React TS Helper Functions
 import pxToRem from "qqq/assets/theme/functions/pxToRem";
 
-const { black, light } = colors;
+const { black, light, white, dark } = colors;
 const { size, fontWeightRegular } = typography;
 const { borderRadius } = borders;
 
@@ -39,19 +39,20 @@ const tooltip: Types = {
 
   styleOverrides: {
     tooltip: {
-      maxWidth: pxToRem(200),
-      backgroundColor: black.main,
-      color: light.main,
+      maxWidth: pxToRem(300),
+      backgroundColor: white.main,
+      color: dark.main,
       fontSize: size.sm,
       fontWeight: fontWeightRegular,
-      textAlign: "center",
+      textAlign: "left",
       borderRadius: borderRadius.md,
       opacity: 0.7,
-      padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`,
+      padding: "1rem",
+      boxShadow: "0px 0px 12px rgba(128, 128, 128, 0.40)"
     },
 
     arrow: {
-      color: black.main,
+      color: white.main,
     },
   },
 };

src/qqq/components/audits/AuditBody.tsx

@@ -402,14 +402,16 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
 
                      return (
                         <Box key={audit0.values.get("id")} className="auditGroupBlock">
-                           <Box display="flex" flexDirection="row" justifyContent="center" fontSize={14}>
-                              <Box borderTop={1} mt={1.25} mr={1} width="100%" borderColor="#B0B0B0" />
-                              <Box whiteSpace="nowrap">
-                                 {ValueUtils.getFullWeekday(audit0.values.get("timestamp"))} {timestampParts[0]}
-                                 {timestampParts[0] == todayFormatted ? " (Today)" : ""}
-                                 {timestampParts[0] == yesterdayFormatted ? " (Yesterday)" : ""}
+                           <Box position="sticky" top="0" zIndex={3}>
+                              <Box display="flex" flexDirection="row" justifyContent="center" fontSize={14} position={"relative"} top={"-1px"} pb={"6px"} sx={{backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,1) 80%, rgba(255,255,255,0))"}}>
+                                 <Box borderTop={1} mt={1.25} mr={1} width="100%" borderColor="#B0B0B0" />
+                                 <Box whiteSpace="nowrap">
+                                    {ValueUtils.getFullWeekday(audit0.values.get("timestamp"))} {timestampParts[0]}
+                                    {timestampParts[0] == todayFormatted ? " (Today)" : ""}
+                                    {timestampParts[0] == yesterdayFormatted ? " (Yesterday)" : ""}
+                                 </Box>
+                                 <Box borderTop={1} mt={1.25} ml={1} width="100%" borderColor="#B0B0B0" />
                               </Box>
-                              <Box borderTop={1} mt={1.25} ml={1} width="100%" borderColor="#B0B0B0" />
                            </Box>
 
                            {

src/qqq/components/buttons/DefaultButtons.tsx

@@ -37,7 +37,7 @@ interface QCreateNewButtonProps
 export function QCreateNewButton({tablePath}: QCreateNewButtonProps): JSX.Element
 {
    return (
-      <Box ml={3} mr={2} width={standardWidth}>
+      <Box display="inline-block" ml={3} mr={0} width={standardWidth}>
          <Link to={`${tablePath}/create`}>
             <MDButton variant="gradient" color="info" fullWidth startIcon={<Icon>add</Icon>}>
                Create New
@@ -73,13 +73,17 @@ export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveBu
 interface QDeleteButtonProps
 {
    onClickHandler: any
+   disabled?: boolean
 }
 
-export function QDeleteButton({onClickHandler}: QDeleteButtonProps): JSX.Element
+QDeleteButton.defaultProps = {
+   disabled: false
+};
+export function QDeleteButton({onClickHandler, disabled}: QDeleteButtonProps): JSX.Element
 {
    return (
       <Box ml={3} width={standardWidth}>
-         <MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>}>
+         <MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>} disabled={disabled}>
             Delete
          </MDButton>
       </Box>
@@ -123,24 +127,6 @@ export function QActionsMenuButton({isOpen, onClickHandler}: QActionsMenuButtonP
    );
 }
 
-export function QSavedFiltersMenuButton({isOpen, onClickHandler}: QActionsMenuButtonProps): JSX.Element
-{
-   return (
-      <Box width={standardWidth} ml={1}>
-         <MDButton
-            variant={isOpen ? "contained" : "outlined"}
-            color="dark"
-            onClick={onClickHandler}
-            fullWidth
-            startIcon={<Icon>filter_alt</Icon>}
-         >
-            saved&nbsp;filters&nbsp;
-            <Icon>keyboard_arrow_down</Icon>
-         </MDButton>
-      </Box>
-   );
-}
-
 interface QCancelButtonProps
 {
    onClickHandler: any;

src/qqq/components/forms/BooleanFieldSwitch.tsx

@@ -19,17 +19,18 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {InputLabel} from "@mui/material";
+import {Box, InputLabel} from "@mui/material";
 import Stack from "@mui/material/Stack";
 import {styled} from "@mui/material/styles";
 import Switch from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
 import {useFormikContext} from "formik";
 import React, {SyntheticEvent} from "react";
+import colors from "qqq/assets/theme/base/colors";
 
 const AntSwitch = styled(Switch)(({theme}) => ({
-   width: 28,
-   height: 16,
+   width: 32,
+   height: 20,
    padding: 0,
    display: "flex",
    "&:active": {
@@ -53,15 +54,19 @@ const AntSwitch = styled(Switch)(({theme}) => ({
    },
    "& .MuiSwitch-thumb": {
       boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
-      width: 12,
-      height: 12,
-      borderRadius: 6,
+      width: 16,
+      height: 16,
+      borderRadius: 8,
       transition: theme.transitions.create([ "width" ], {
          duration: 200,
       }),
    },
+   "&.nullSwitch .MuiSwitch-thumb": {
+      width: 28,
+   },
    "& .MuiSwitch-track": {
-      borderRadius: 16 / 2,
+      height: 20,
+      borderRadius: 20 / 2,
       opacity: 1,
       backgroundColor:
          theme.palette.mode === "dark" ? "rgba(255,255,255,.35)" : "rgba(0,0,0,.25)",
@@ -78,6 +83,7 @@ interface Props
 }
 
 
+
 function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Element
 {
    const {setFieldValue} = useFormikContext();
@@ -96,27 +102,29 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
       setFieldValue(name, !value);
    }
 
+   const classNullSwitch = (value === null || value == undefined || `${value}` == "") ? "nullSwitch" : "";
+
    return (
-      <>
+      <Box bgcolor={isDisabled ? colors.grey[200] : ""}>
          <InputLabel shrink={true}>{label}</InputLabel>
-         <Stack direction="row" spacing={1} alignItems="center">
+         <Stack direction="row" spacing={1} alignItems="center" height="37px">
             <Typography
-               fontSize="0.875rem"
+               fontSize="1rem"
                color={value === false ? "auto" : "#bfbfbf" }
                onClick={(e) => setSwitch(e, false)}
                sx={{cursor: value === false || isDisabled ? "inherit" : "pointer"}}>
          No
             </Typography>
-            <AntSwitch name={name} checked={value} onClick={toggleSwitch} disabled={isDisabled} />
+            <AntSwitch className={classNullSwitch} name={name} checked={value} onClick={toggleSwitch} disabled={isDisabled} />
             <Typography
-               fontSize="0.875rem"
+               fontSize="1rem"
                color={value === true ? "auto" : "#bfbfbf"}
                onClick={(e) => setSwitch(e, true)}
                sx={{cursor: value === true || isDisabled ? "inherit" : "pointer"}}>
          Yes
             </Typography>
          </Stack>
-      </>
+      </Box>
    );
 }
 

src/qqq/components/forms/DynamicForm.tsx

@@ -32,6 +32,7 @@ import React, {useState} from "react";
 import QDynamicFormField from "qqq/components/forms/DynamicFormField";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import HelpContent from "qqq/components/misc/HelpContent";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
 interface Props
@@ -41,16 +42,13 @@ interface Props
    bulkEditMode?: boolean;
    bulkEditSwitchChangeHandler?: any;
    record?: QRecord;
+   helpRoles?: string[];
+   helpContentKeyPrefix?: string;
 }
 
-function QDynamicForm(props: Props): JSX.Element
+function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHandler, record, helpRoles, helpContentKeyPrefix}: Props): JSX.Element
 {
-   const {
-      formData, formLabel, bulkEditMode, bulkEditSwitchChangeHandler,
-   } = props;
-   const {
-      formFields, values, errors, touched,
-   } = formData;
+   const {formFields, values, errors, touched} = formData;
 
    const formikProps = useFormikContext();
    const [fileName, setFileName] = useState(null as string);
@@ -70,8 +68,8 @@ function QDynamicForm(props: Props): JSX.Element
    {
       setFileName(null);
       formikProps.setFieldValue(fieldName, null);
-      props.record?.values.delete(fieldName)
-      props.record?.displayValues.delete(fieldName)
+      record?.values.delete(fieldName)
+      record?.displayValues.delete(fieldName)
    };
 
    const bulkEditSwitchChanged = (name: string, value: boolean) =>
@@ -79,6 +77,7 @@ function QDynamicForm(props: Props): JSX.Element
       bulkEditSwitchChangeHandler(name, value);
    };
 
+
    return (
       <Box>
          <Box lineHeight={0}>
@@ -96,29 +95,38 @@ function QDynamicForm(props: Props): JSX.Element
                   && Object.keys(formFields).map((fieldName: any) =>
                   {
                      const field = formFields[fieldName];
+                     if (field.omitFromQDynamicForm)
+                     {
+                        return null;
+                     }
+
                      if (values[fieldName] === undefined)
                      {
                         values[fieldName] = "";
                      }
 
-                     if (field.omitFromQDynamicForm)
+                     let formattedHelpContent = <HelpContent helpContents={field.fieldMetaData.helpContents} roles={helpRoles} helpContentKey={`${helpContentKeyPrefix ?? ""}field:${fieldName}`} />;
+                     if(formattedHelpContent)
                      {
-                        return null;
+                        formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box>
                      }
 
+                     const labelElement = <Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
+                        <label htmlFor={field.name}>{field.label}</label>
+                     </Box>
+
                      if (field.type === "file")
                      {
                         const pseudoField = new QFieldMetaData({name: fieldName, type: QFieldType.BLOB});
                         return (
                            <Grid item xs={12} sm={6} key={fieldName}>
                               <Box mb={1.5}>
-
-                                 <InputLabel shrink={true}>{field.label}</InputLabel>
+                                 {labelElement}
                                  {
-                                    props.record && props.record.values.get(fieldName) && <Box fontSize="0.875rem" pb={1}>
+                                    record && record.values.get(fieldName) && <Box fontSize="0.875rem" pb={1}>
                                        Current File:
                                        <Box display="inline-flex" pl={1}>
-                                          {ValueUtils.getDisplayValue(pseudoField, props.record, "view")}
+                                          {ValueUtils.getDisplayValue(pseudoField, record, "view")}
                                           <Tooltip placement="bottom" title="Remove current file">
                                              <Icon className="blobIcon" fontSize="small" onClick={(e) => removeFile(fieldName)}>delete</Icon>
                                           </Tooltip>
@@ -162,18 +170,20 @@ function QDynamicForm(props: Props): JSX.Element
 
                         return (
                            <Grid item xs={12} sm={6} key={fieldName}>
+                              {labelElement}
                               <DynamicSelect
                                  tableName={field.possibleValueProps.tableName}
                                  processName={field.possibleValueProps.processName}
                                  fieldName={fieldName}
                                  isEditable={field.isEditable}
-                                 fieldLabel={field.label}
+                                 fieldLabel=""
                                  initialValue={values[fieldName]}
                                  initialDisplayValue={field.possibleValueProps.initialDisplayValue}
                                  bulkEditMode={bulkEditMode}
                                  bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
                                  otherValues={otherValuesMap}
                               />
+                              {formattedHelpContent}
                            </Grid>
                         );
                      }
@@ -182,9 +192,11 @@ function QDynamicForm(props: Props): JSX.Element
                      // todo? placeholder={password.placeholder}
                      return (
                         <Grid item xs={12} sm={6} key={fieldName}>
+                           {labelElement}
                            <QDynamicFormField
+                              id={field.name}
                               type={field.type}
-                              label={field.label}
+                              label=""
                               isEditable={field.isEditable}
                               name={fieldName}
                               displayFormat={field.displayFormat}
@@ -195,6 +207,7 @@ function QDynamicForm(props: Props): JSX.Element
                               success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
                               formFieldObject={field}
                            />
+                           {formattedHelpContent}
                         </Grid>
                      );
                   })}
@@ -207,6 +220,7 @@ function QDynamicForm(props: Props): JSX.Element
 QDynamicForm.defaultProps = {
    formLabel: undefined,
    bulkEditMode: false,
+   helpRoles: ["ALL_SCREENS"],
    bulkEditSwitchChangeHandler: () =>
    {
    },

src/qqq/components/forms/DynamicFormField.tsx

@@ -25,6 +25,7 @@ import Switch from "@mui/material/Switch";
 import {ErrorMessage, Field, useFormikContext} from "formik";
 import React, {useState} from "react";
 import AceEditor from "react-ace";
+import colors from "qqq/assets/theme/base/colors";
 import BooleanFieldSwitch from "qqq/components/forms/BooleanFieldSwitch";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDTypography from "qqq/components/legacy/MDTypography";
@@ -52,6 +53,7 @@ function QDynamicFormField({
 {
    const [switchChecked, setSwitchChecked] = useState(false);
    const [isDisabled, setIsDisabled] = useState(!isEditable || bulkEditMode);
+   const {inputBorderColor} = colors;
 
    const {setFieldValue} = useFormikContext();
 
@@ -88,7 +90,14 @@ function QDynamicFormField({
    if (type === "checkbox")
    {
       getsBulkEditHtmlLabel = false;
-      field = (<BooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} />);
+      field = (<>
+         <BooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} />
+         <Box mt={0.75}>
+            <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
+               {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={name} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
+            </MDTypography>
+         </Box>
+      </>);
    }
    else if (type === "ace")
    {
@@ -115,7 +124,7 @@ function QDynamicFormField({
                width="100%"
                height="300px"
                value={value}
-               style={{border: "1px solid gray"}}
+               style={{border: `1px solid ${inputBorderColor}`, borderRadius: "0.75rem"}}
             />
          </>
       );
@@ -124,7 +133,7 @@ function QDynamicFormField({
    {
       field = (
          <>
-            <Field {...rest} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="standard" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
+            <Field {...rest} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="outlined" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
                onKeyPress={(e: any) =>
                {
                   if (e.key === "Enter")
@@ -164,6 +173,14 @@ function QDynamicFormField({
                   id={`bulkEditSwitch-${name}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
+                  sx={{top: "-4px",
+                     "& .MuiSwitch-track": {
+                        height: 20,
+                        borderRadius: 10,
+                        top: -3,
+                        position: "relative"
+                     }
+                  }}
                />
             </Box>
             <Box width="100%" sx={{background: (type == "checkbox" && isDisabled) ? "#f0f2f5!important" : "initial"}}>

src/qqq/components/forms/DynamicFormUtils.ts

@@ -89,6 +89,7 @@ class DynamicFormUtils
       label += field.isRequired ? " *" : "";
 
       return ({
+         fieldMetaData: field,
          name: field.name,
          label: label,
          isRequired: field.isRequired,

src/qqq/components/forms/DynamicSelect.tsx

@@ -29,6 +29,7 @@ import Switch from "@mui/material/Switch";
 import TextField from "@mui/material/TextField";
 import {ErrorMessage, useFormikContext} from "formik";
 import React, {useEffect, useState} from "react";
+import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import Client from "qqq/utils/qqq/Client";
 
@@ -49,6 +50,8 @@ interface Props
    bulkEditMode?: boolean;
    bulkEditSwitchChangeHandler?: any;
    otherValues?: Map<string, any>;
+   variant: "standard" | "outlined";
+   initiallyOpen: boolean;
 }
 
 DynamicSelect.defaultProps = {
@@ -63,6 +66,8 @@ DynamicSelect.defaultProps = {
    isMultiple: false,
    bulkEditMode: false,
    otherValues: new Map<string, any>(),
+   variant: "outlined",
+   initiallyOpen: false,
    bulkEditSwitchChangeHandler: () =>
    {
    },
@@ -70,12 +75,14 @@ DynamicSelect.defaultProps = {
 
 const qController = Client.getInstance();
 
-function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues}: Props)
+function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen}: Props)
 {
-   const [open, setOpen] = useState(false);
+   const [open, setOpen] = useState(initiallyOpen);
    const [options, setOptions] = useState<readonly QPossibleValue[]>([]);
    const [searchTerm, setSearchTerm] = useState(null);
    const [firstRender, setFirstRender] = useState(true);
+   const [otherValuesWhenResultsWereLoaded, setOtherValuesWhenResultsWereLoaded] = useState(JSON.stringify(Object.fromEntries((otherValues))))
+   const {inputBorderColor} = colors;
 
    ////////////////////////////////////////////////////////////////////////////////////////////////
    // default value - needs to be an array (from initialValues (array) prop) for multiple mode - //
@@ -109,7 +116,14 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       {
          // console.log("First render, so not searching...");
          setFirstRender(false);
-         return;
+
+         /*
+         if(!initiallyOpen)
+         {
+            console.log("returning because not initially open?");
+            return;
+         }
+         */
       }
       // console.log("Use effect for searchTerm - searching!");
 
@@ -142,6 +156,24 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       };
    }, [ searchTerm ]);
 
+   // todo - finish... call it in onOpen?
+   const reloadIfOtherValuesAreChanged = () =>
+   {
+      if(JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded)
+      {
+         (async () =>
+         {
+            setLoading(true);
+            setOptions([]);
+            console.log("Refreshing possible values...");
+            const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName, searchTerm ?? "", null, otherValues);
+            setLoading(false);
+            setOptions([ ...results ]);
+            setOtherValuesWhenResultsWereLoaded(JSON.stringify(Object.fromEntries(otherValues)));
+         })();
+      }
+   }
+
    const inputChanged = (event: React.SyntheticEvent, value: string, reason: string) =>
    {
       // console.log(`input changed.  Reason: ${reason}, setting search term to ${value}`);
@@ -230,7 +262,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       // attributes.  so, doing this, w/ key=id, seemed to fix it.                                 //
       ///////////////////////////////////////////////////////////////////////////////////////////////
       return (
-         <li {...props} key={option.id}>
+         <li {...props} key={option.id} style={{fontSize: "1rem"}}>
             {content}
          </li>
       );
@@ -244,13 +276,35 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       bulkEditSwitchChangeHandler(fieldName, newSwitchValue);
    };
 
-   // console.log(`default value: ${JSON.stringify(defaultValue)}`);
+   ////////////////////////////////////////////
+   // for outlined style, adjust some styles //
+   ////////////////////////////////////////////
+   let autocompleteSX = {};
+   if (variant == "outlined")
+   {
+      autocompleteSX = {
+         "& .MuiOutlinedInput-root": {
+            borderRadius: "0.75rem",
+         },
+         "& .MuiInputBase-root": {
+            padding: "0.5rem",
+            background: isDisabled ? "#f0f2f5!important" : "initial",
+         },
+         "& .MuiOutlinedInput-root .MuiAutocomplete-input": {
+            padding: "0",
+            fontSize: "1rem"
+         },
+         "& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
+            borderColor: inputBorderColor
+         }
+      }
+   }
 
    const autocomplete = (
       <Box>
          <Autocomplete
             id={overrideId ?? fieldName}
-            sx={{background: isDisabled ? "#f0f2f5!important" : "initial"}}
+            sx={autocompleteSX}
             open={open}
             fullWidth
             onOpen={() =>
@@ -267,9 +321,14 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
             {
                setOpen(false);
             }}
-            isOptionEqualToValue={(option, value) => option.id === value.id}
+            isOptionEqualToValue={(option, value) => value !== null && value !== undefined && option.id === value.id}
             getOptionLabel={(option) =>
             {
+               if(option === null || option === undefined)
+               {
+                  return ("");
+               }
+
                // @ts-ignore
                if(option && option.length)
                {
@@ -305,7 +364,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
                <TextField
                   {...params}
                   label={fieldLabel}
-                  variant="standard"
+                  variant={variant}
                   autoComplete="off"
                   type="search"
                   InputProps={{
@@ -341,6 +400,14 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
                   id={`bulkEditSwitch-${fieldName}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
+                  sx={{top: "-4px",
+                     "& .MuiSwitch-track": {
+                        height: 20,
+                        borderRadius: 10,
+                        top: -3,
+                        position: "relative"
+                     }
+                  }}
                />
             </Box>
             <Box width="100%">

src/qqq/components/forms/EntityForm.tsx

@@ -37,10 +37,12 @@ import React, {useContext, useEffect, useReducer, useState} from "react";
 import {useLocation, useNavigate, useParams} from "react-router-dom";
 import * as Yup from "yup";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import HelpContent from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
@@ -79,6 +81,7 @@ function EntityForm(props: Props): JSX.Element
    const [validations, setValidations] = useState({});
    const [initialValues, setInitialValues] = useState({} as { [key: string]: any });
    const [formFields, setFormFields] = useState(null as Map<string, any>);
+   const [t1section, setT1Section] = useState(null as QTableSection);
    const [t1sectionName, setT1SectionName] = useState(null as string);
    const [nonT1Sections, setNonT1Sections] = useState([] as QTableSection[]);
 
@@ -151,7 +154,9 @@ function EntityForm(props: Props): JSX.Element
       {
          return <div>Loading...</div>;
       }
-      return <QDynamicForm formData={formData} record={record} />;
+
+      const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
+      return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />;
    }
 
    if (!asyncLoadInited)
@@ -330,6 +335,7 @@ function EntityForm(props: Props): JSX.Element
          /////////////////////////////////////
          const dynamicFormFieldsBySection = new Map<string, any>();
          let t1sectionName;
+         let t1section;
          const nonT1Sections: QTableSection[] = [];
          for (let i = 0; i < tableSections.length; i++)
          {
@@ -382,6 +388,7 @@ function EntityForm(props: Props): JSX.Element
             if (section.tier === "T1")
             {
                t1sectionName = section.name;
+               t1section = section;
             }
             else
             {
@@ -389,6 +396,7 @@ function EntityForm(props: Props): JSX.Element
             }
          }
          setT1SectionName(t1sectionName);
+         setT1Section(t1section);
          setNonT1Sections(nonT1Sections);
          setFormFields(dynamicFormFieldsBySection);
          setValidations(Yup.object().shape(formValidations));
@@ -426,6 +434,11 @@ function EntityForm(props: Props): JSX.Element
       actions.setSubmitting(true);
       await (async () =>
       {
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // we will be manipulating the values sent to the backend, so clone values so they remained unchanged for the form widgets //
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         const valuesToPost = JSON.parse(JSON.stringify(values));
+
          for(let fieldName of tableMetaData.fields.keys())
          {
             const fieldMetaData = tableMetaData.fields.get(fieldName);
@@ -438,17 +451,17 @@ function EntityForm(props: Props): JSX.Element
             // changing from, say, 12:15:30 to just 12:15:00... this seems to get around that, for cases when the       //
             // user didn't change the value in the field (but if the user did change the value, then we will submit it) //
             //////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            if(fieldMetaData.type === QFieldType.DATE_TIME && values[fieldName])
+            if(fieldMetaData.type === QFieldType.DATE_TIME && valuesToPost[fieldName])
             {
-               console.log(`DateTime ${fieldName}: Initial value: [${initialValues[fieldName]}] -> [${values[fieldName]}]`)
-               if (initialValues[fieldName] == values[fieldName])
+               console.log(`DateTime ${fieldName}: Initial value: [${initialValues[fieldName]}] -> [${valuesToPost[fieldName]}]`)
+               if (initialValues[fieldName] == valuesToPost[fieldName])
                {
                   console.log(" - Is the same, so, deleting from the post");
-                  delete (values[fieldName]);
+                  delete (valuesToPost[fieldName]);
                }
                else
                {
-                  values[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(values[fieldName]);
+                  valuesToPost[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(valuesToPost[fieldName]);
                }
             }
 
@@ -461,10 +474,14 @@ function EntityForm(props: Props): JSX.Element
             ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
             if(fieldMetaData.type === QFieldType.BLOB)
             {
-               if(typeof values[fieldName] === "string")
+               if(typeof valuesToPost[fieldName] === "string")
                {
                   console.log(`${fieldName} value was a string, so, we're deleting it from the values array, to not submit it to the backend, to not change it.`);
-                  delete(values[fieldName]);
+                  delete(valuesToPost[fieldName]);
+               }
+               else
+               {
+                  valuesToPost[fieldName] = values[fieldName];
                }
             }
          }
@@ -473,7 +490,7 @@ function EntityForm(props: Props): JSX.Element
          {
             // todo - audit that it's a dupe
             await qController
-               .update(tableName, props.id, values)
+               .update(tableName, props.id, valuesToPost)
                .then((record) =>
                {
                   if (props.isModal)
@@ -506,7 +523,7 @@ function EntityForm(props: Props): JSX.Element
          else
          {
             await qController
-               .create(tableName, values)
+               .create(tableName, valuesToPost)
                .then((record) =>
                {
                   if (props.isModal)
@@ -543,6 +560,19 @@ function EntityForm(props: Props): JSX.Element
    const formId = props.id != null ? `edit-${tableMetaData?.name}-form` : `create-${tableMetaData?.name}-form`;
 
    let body;
+
+   const getSectionHelp = (section: QTableSection) =>
+   {
+      const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
+      const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableMetaData.name};section:${section.name}`} />;
+
+      return formattedHelpContent && (
+         <Box px={"1.5rem"} fontSize={"0.875rem"}>
+            {formattedHelpContent}
+         </Box>
+      )
+   }
+
    if (notAllowedError)
    {
       body = (
@@ -564,23 +594,26 @@ function EntityForm(props: Props): JSX.Element
    }
    else
    {
-      const cardElevation = props.isModal ? 3 : 1;
+      const cardElevation = props.isModal ? 3 : 0;
       body = (
          <Box mb={3}>
-            <Grid container spacing={3}>
-               <Grid item xs={12}>
-                  {alertContent ? (
-                     <Box mb={3}>
-                        <Alert severity="error" onClose={() => setAlertContent(null)}>{alertContent}</Alert>
-                     </Box>
-                  ) : ("")}
-                  {warningContent ? (
-                     <Box mb={3}>
-                        <Alert severity="warning" onClose={() => setWarningContent(null)}>{warningContent}</Alert>
-                     </Box>
-                  ) : ("")}
+            {
+               (alertContent || warningContent) &&
+               <Grid container spacing={3}>
+                  <Grid item xs={12}>
+                     {alertContent ? (
+                        <Box mb={3}>
+                           <Alert severity="error" onClose={() => setAlertContent(null)}>{alertContent}</Alert>
+                        </Box>
+                     ) : ("")}
+                     {warningContent ? (
+                        <Box mb={3}>
+                           <Alert severity="warning" onClose={() => setWarningContent(null)}>{warningContent}</Alert>
+                        </Box>
+                     ) : ("")}
+                  </Grid>
                </Grid>
-            </Grid>
+            }
             <Grid container spacing={3}>
                {
                   !props.isModal &&
@@ -618,10 +651,11 @@ function EntityForm(props: Props): JSX.Element
                                        <MDTypography variant="h5">{formTitle}</MDTypography>
                                     </Box>
                                  </Box>
+                                 {t1section && getSectionHelp(t1section)}
                                  {
                                     t1sectionName && formFields ? (
-                                       <Box pb={1} px={3}>
-                                          <Box p={3} width="100%">
+                                       <Box px={3}>
+                                          <Box pb={"0.25rem"} width="100%">
                                              {getFormSection(values, touched, formFields.get(t1sectionName), errors)}
                                           </Box>
                                        </Box>
@@ -635,8 +669,9 @@ function EntityForm(props: Props): JSX.Element
                                     <MDTypography variant="h6" p={3} pb={1}>
                                        {section.label}
                                     </MDTypography>
+                                    {getSectionHelp(section)}
                                     <Box pb={1} px={3}>
-                                       <Box p={3} width="100%">
+                                       <Box pb={"0.75rem"} width="100%">
                                           {getFormSection(values, touched, formFields.get(section.name), errors)}
                                        </Box>
                                     </Box>

src/qqq/components/horseshoe/Breadcrumbs.tsx

@@ -25,6 +25,7 @@ import Icon from "@mui/material/Icon";
 import {ReactNode, useContext} from "react";
 import {Link} from "react-router-dom";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 
 interface Props
@@ -69,7 +70,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
    }
 
    const routes: string[] | any = route.slice(0, -1);
-   const {pageHeader, pathToLabelMap, branding} = useContext(QContext);
+   const {pathToLabelMap, branding} = useContext(QContext);
 
    const fullPathToLabel = (fullPath: string, route: string): string =>
    {
@@ -91,7 +92,18 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
    let accumulatedPath = "";
    for (let i = 0; i < routes.length; i++)
    {
-      if(routes[i] === "savedFilter")
+      ////////////////////////////////////////////////////////
+      // avoid showing "saved view" as a breadcrumb element //
+      ////////////////////////////////////////////////////////
+      if(routes[i] === "savedView")
+      {
+         continue;
+      }
+
+      ///////////////////////////////////////////////////////////////////////
+      // avoid showing the table name if it's the element before savedView //
+      ///////////////////////////////////////////////////////////////////////
+      if(i < routes.length - 1 && routes[i+1] == "savedView")
       {
          continue;
       }
@@ -112,48 +124,31 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
       <Box mr={{xs: 0, xl: 8}}>
          <MuiBreadcrumbs
             sx={{
+               fontSize: "1.125rem",
+               fontWeight: "500",
+               color: colors.dark.main,
+               "& li": {
+                  lineHeight: "unset!important"
+               },
+               "& a": {
+                  color: colors.gray.main
+               },
                "& .MuiBreadcrumbs-separator": {
-                  color: ({palette: {white, grey}}) => (light ? white.main : grey[600]),
+                  fontSize: "1.125rem",
+                  fontWeight: "500",
+                  color: colors.dark.main
                },
             }}
          >
             <Link to="/">
-               <MDTypography
-                  component="span"
-                  variant="body2"
-                  color={light ? "white" : "dark"}
-                  opacity={light ? 0.8 : 0.5}
-                  sx={{lineHeight: 0}}
-               >
-                  <Icon>{icon}</Icon>
-               </MDTypography>
+               <Icon sx={{fontSize: "1.25rem!important", position: "relative", top: "0.25rem"}}>{icon}</Icon>
             </Link>
             {fullRoutes.map((fullRoute: string) => (
                <Link to={fullRoute} key={fullRoute}>
-                  <MDTypography
-                     component="span"
-                     variant="button"
-                     fontWeight="regular"
-                     textTransform="capitalize"
-                     color={light ? "white" : "dark"}
-                     opacity={light ? 0.8 : 0.5}
-                     sx={{lineHeight: 0}}
-                  >
-                     {fullPathToLabel(fullRoute, fullRoute.replace(/.*\//, ""))}
-                  </MDTypography>
+                  {fullPathToLabel(fullRoute, fullRoute.replace(/.*\//, ""))}
                </Link>
             ))}
          </MuiBreadcrumbs>
-         <MDTypography
-            pt={1}
-            fontWeight="bold"
-            textTransform="capitalize"
-            variant="h5"
-            color={light ? "white" : "dark"}
-            noWrap
-         >
-            {pageHeader}
-         </MDTypography>
       </Box>
    );
 }

src/qqq/components/horseshoe/NavBar.tsx

@@ -19,23 +19,22 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Popper} from "@mui/material";
+import {Popper, InputAdornment} from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Autocomplete from "@mui/material/Autocomplete";
-import Badge from "@mui/material/Badge";
 import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
-import Menu from "@mui/material/Menu";
 import TextField from "@mui/material/TextField";
 import Toolbar from "@mui/material/Toolbar";
 import React, {useContext, useEffect, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs";
-import {navbar, navbarContainer, navbarIconButton, navbarRow,} from "qqq/components/horseshoe/Styles";
-import {setTransparentNavbar, useMaterialUIController,} from "qqq/context";
+import {navbar, navbarContainer, navbarRow, navbarMobileMenu, recentlyViewedMenu,} from "qqq/components/horseshoe/Styles";
+import MDTypography from "qqq/components/legacy/MDTypography";
+import {setTransparentNavbar, useMaterialUIController, setMiniSidenav} from "qqq/context";
 import HistoryUtils from "qqq/utils/HistoryUtils";
 
 // Declaring prop types for NavBar
@@ -57,7 +56,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
 {
    const [navbarType, setNavbarType] = useState<"fixed" | "absolute" | "relative" | "static" | "sticky">();
    const [controller, dispatch] = useMaterialUIController();
-   const {transparentNavbar, fixedNavbar, darkMode,} = controller;
+   const {miniSidenav, transparentNavbar, fixedNavbar, darkMode,} = controller;
    const [openMenu, setOpenMenu] = useState<any>(false);
    const [history, setHistory] = useState<any>([] as HistoryEntry[]);
    const [autocompleteValue, setAutocompleteValue] = useState<any>(null);
@@ -65,6 +64,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const route = useLocation().pathname.split("/").slice(1);
    const navigate = useNavigate();
 
+   const {pageHeader} = useContext(QContext);
+
    useEffect(() =>
    {
       // Setting the navbar type
@@ -105,6 +106,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       return () => window.removeEventListener("scroll", handleTransparentNavbar);
    }, [dispatch, fixedNavbar]);
 
+   const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
+
    const goToHistory = (path: string) =>
    {
       navigate(path);
@@ -157,12 +160,20 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             options={history}
             autoHighlight
             blurOnSelect
-            style={{width: "200px"}}
+            style={{width: "16rem"}}
             onOpen={handleHistoryOnOpen}
             onChange={handleAutocompleteOnChange}
             PopperComponent={CustomPopper}
             isOptionEqualToValue={(option, value) => option.id === value.id}
-            renderInput={(params) => <TextField {...params} label="Recently Viewed Records" />}
+            sx={recentlyViewedMenu}
+            renderInput={(params) => <TextField {...params}  label="Recently Viewed Records" InputProps={{
+               ...params.InputProps,
+               endAdornment: (
+                  <InputAdornment position="end">
+                     <Icon sx={{position: "relative", right: "-1rem"}}>keyboard_arrow_down</Icon>
+                  </InputAdornment>
+               )
+            }} />}
             renderOption={(props, option: HistoryEntry) => (
                <Box {...props} component="li" key={option.id} sx={{width: "auto"}}>
                   <Box sx={{width: "auto", px: "8px", whiteSpace: "overflow"}} key={option.id}>
@@ -175,22 +186,6 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       );
    }
 
-
-   // Render the notifications menu
-   const renderMenu = () => (
-      <Menu
-         anchorEl={openMenu}
-         anchorReference={null}
-         anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left",
-         }}
-         open={Boolean(openMenu)}
-         onClose={handleCloseMenu}
-         sx={{mt: 2}}
-      />
-   );
-
    // Styles for the navbar icons
    const iconsStyle = ({
       palette: {dark, white, text},
@@ -240,29 +235,27 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       >
          <Toolbar sx={navbarContainer}>
             <Box color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}>
+               <IconButton size="small" disableRipple color="inherit" sx={navbarMobileMenu} onClick={handleMiniSidenav}>
+                  <Icon sx={iconsStyle} fontSize="large">menu</Icon>
+               </IconButton>
                <QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
             </Box>
             {isMini ? null : (
                <Box sx={(theme) => navbarRow(theme, {isMini})}>
-                  <Box pr={1}>
+                  <Box pr={0} mr={-2}>
                      {renderHistory()}
                   </Box>
-                  <Box color={light ? "white" : "inherit"}>
-                     <IconButton
-                        size="small"
-                        color="inherit"
-                        sx={navbarIconButton}
-                        onClick={handleOpenMenu}
-                     >
-                        <Badge badgeContent={0} color="error" variant="dot">
-                           <Icon sx={iconsStyle}>notifications</Icon>
-                        </Badge>
-                     </IconButton>
-                     {renderMenu()}
-                  </Box>
                </Box>
             )}
          </Toolbar>
+         {
+            pageHeader &&
+            <Box display="flex" justifyContent="space-between">
+               <MDTypography pb="0.5rem" textTransform="capitalize" variant="h3" color={light ? "white" : "dark"} noWrap>
+                  {pageHeader}
+               </MDTypography>
+            </Box>
+         }
       </AppBar>
    );
 }

src/qqq/components/horseshoe/Styles.ts

@@ -20,6 +20,7 @@
  */
 
 import {Theme} from "@mui/material/styles";
+import colors from "qqq/assets/theme/base/colors";
 
 function navbar(theme: Theme | any, ownerState: any)
 {
@@ -65,12 +66,12 @@ function navbar(theme: Theme | any, ownerState: any)
          return color;
       },
       top: absolute ? 0 : pxToRem(12),
-      minHeight: pxToRem(75),
+      minHeight: "auto",
       display: "grid",
       alignItems: "center",
       borderRadius: borderRadius.xl,
-      paddingTop: pxToRem(8),
-      paddingBottom: pxToRem(8),
+      paddingTop: pxToRem(0),
+      paddingBottom: pxToRem(0),
       paddingRight: absolute ? pxToRem(8) : 0,
       paddingLeft: absolute ? pxToRem(16) : 0,
 
@@ -84,7 +85,7 @@ function navbar(theme: Theme | any, ownerState: any)
       "& .MuiToolbar-root": {
          display: "flex",
          justifyContent: "space-between",
-         alignItems: "center",
+         alignItems: "flex-start",
 
          [breakpoints.up("sm")]: {
             minHeight: "auto",
@@ -98,10 +99,10 @@ const navbarContainer = ({breakpoints}: Theme): any => ({
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "space-between",
+   padding: "0 !important",
 
    [breakpoints.up("md")]: {
       flexDirection: "row",
-      alignItems: "center",
       paddingTop: "0",
       paddingBottom: "0",
    },
@@ -110,11 +111,10 @@ const navbarContainer = ({breakpoints}: Theme): any => ({
 const navbarRow = ({breakpoints}: Theme, {isMini}: any) => ({
    display: "flex",
    alignItems: "center",
-   justifyContent: "space-between",
    width: "100%",
 
    [breakpoints.up("md")]: {
-      justifyContent: isMini ? "space-between" : "stretch",
+      justifyContent: "stretch",
       width: isMini ? "100%" : "max-content",
    },
 
@@ -146,12 +146,38 @@ const navbarDesktopMenu = ({breakpoints}: Theme) => ({
    display: "none !important",
    cursor: "pointer",
 
-   [breakpoints.up("xl")]: {
+   [breakpoints.down("sm")]: {
       display: "inline-block !important",
    },
 });
 
+const recentlyViewedMenu = ({breakpoints}: Theme) => ({
+   marginTop: "-0.5rem",
+   "& .MuiInputLabel-root": {
+      color: colors.gray.main,
+      fontWeight: "500",
+      fontSize: "1rem"
+   },
+   "& .MuiInputAdornment-root": {
+      marginTop: "0.5rem",
+      color: colors.gray.main,
+      fontSize: "1rem"
+   },
+   "& .MuiOutlinedInput-root": {
+      borderRadius: "0",
+      padding: "0"
+   },
+   "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+      border: "0"
+   },
+   display: "block",
+   [breakpoints.down("md")]: {
+      display: "none !important",
+   },
+});
+
 const navbarMobileMenu = ({breakpoints}: Theme) => ({
+   left: "-0.75rem",
    display: "inline-block",
    lineHeight: 0,
 
@@ -167,4 +193,5 @@ export {
    navbarIconButton,
    navbarDesktopMenu,
    navbarMobileMenu,
+   recentlyViewedMenu
 };

src/qqq/components/horseshoe/sidenav/SideNavRoot.tsx

@@ -27,7 +27,7 @@ export default styled(Drawer)(({theme, ownerState}: { theme?: Theme | any; owner
    const {palette, boxShadows, transitions, breakpoints, functions} = theme;
    const {transparentSidenav, whiteSidenav, miniSidenav, darkMode} = ownerState;
 
-   const sidebarWidth = 250;
+   const sidebarWidth = 245;
    const {transparent, gradients, white, background} = palette;
    const {xxl} = boxShadows;
    const {pxToRem, linearGradient} = functions;
@@ -94,6 +94,9 @@ export default styled(Drawer)(({theme, ownerState}: { theme?: Theme | any; owner
       "& .MuiDrawer-paper": {
          boxShadow: xxl,
          border: "none",
+         margin: "0",
+         borderRadius: "0",
+         height: "100%",
 
          ...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles()),
       },

src/qqq/components/horseshoe/sidenav/styles/SideNavCollapse.ts

@@ -64,7 +64,8 @@ function collapseItem(theme: Theme, ownerState: any)
       borderRadius: borderRadius.md,
       cursor: "pointer",
       userSelect: "none",
-      whiteSpace: "nowrap",
+      whiteSpace: "wrap",
+      overflow: "hidden",
       boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : "none",
       [breakpoints.up("xl")]: {
          transition: transitions.create(["box-shadow", "background-color"], {
@@ -73,6 +74,10 @@ function collapseItem(theme: Theme, ownerState: any)
          }),
       },
 
+      "& .MuiListItemText-primary": {
+         lineHeight: "revert"
+      },
+
       "&:hover, &:focus": {
          backgroundColor:
         transparentSidenav && !darkMode

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

@@ -69,7 +69,15 @@ export default styled(TextField)(({theme, ownerState}: { theme?: Theme; ownerSta
    });
 
    return {
-      backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
+      "& .MuiInputBase-root": {
+         backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
+         borderRadius: "0.75rem",
+      },
+      "& input": {
+         backgroundColor: `${transparent.main}!important`,
+         padding: "0.5rem",
+         fontSize: "1rem",
+      },
       pointerEvents: disabled ? "none" : "auto",
       ...(error && errorStyles()),
       ...(success && successStyles()),

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

@@ -149,7 +149,7 @@ interface Types {
 }
 
 const baseProperties = {
-  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontFamily: '"SF Pro Display", "Roboto", "Helvetica", "Arial", sans-serif',
   fontWeightLighter: 100,
   fontWeightLight: 300,
   fontWeightRegular: 400,

src/qqq/components/legacy/typography.ts

@@ -153,7 +153,7 @@ interface Types
 }
 
 const baseProperties = {
-   fontFamily: "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+   fontFamily: "\"SF Pro Display\", \"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    fontWeightLighter: 100,
    fontWeightLight: 300,
    fontWeightRegular: 400,

src/qqq/components/misc/FieldAutoComplete.tsx

@@ -0,0 +1,158 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2023.  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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import Autocomplete, {AutocompleteRenderOptionState} from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import React, {ReactNode} from "react";
+
+interface FieldAutoCompleteProps
+{
+   id: string;
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+   handleFieldChange: (event: any, newValue: any, reason: string) => void;
+   defaultValue?: {field: QFieldMetaData, table: QTableMetaData, fieldName: string};
+   autoFocus?: boolean;
+   forceOpen?: boolean;
+   hiddenFieldNames?: string[];
+}
+
+FieldAutoComplete.defaultProps =
+   {
+      defaultValue: null,
+      autoFocus: false,
+      forceOpen: null,
+      hiddenFieldNames: []
+   };
+
+function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean, hiddenFieldNames: string[])
+{
+   const sortedFields = [...tableMetaData.fields.values()].sort((a, b) => a.label.localeCompare(b.label));
+   for (let i = 0; i < sortedFields.length; i++)
+   {
+      const fieldName = isJoinTable ? `${tableMetaData.name}.${sortedFields[i].name}` : sortedFields[i].name;
+
+      if(hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1)
+      {
+         continue;
+      }
+
+      fieldOptions.push({field: sortedFields[i], table: tableMetaData, fieldName: fieldName});
+   }
+}
+
+export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames}: FieldAutoCompleteProps): JSX.Element
+{
+   const fieldOptions: any[] = [];
+   makeFieldOptionsForTable(tableMetaData, fieldOptions, false, hiddenFieldNames);
+   let fieldsGroupBy = null;
+
+   if (tableMetaData.exposedJoins && tableMetaData.exposedJoins.length > 0)
+   {
+      for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
+      {
+         const exposedJoin = tableMetaData.exposedJoins[i];
+         if (metaData.tables.has(exposedJoin.joinTable.name))
+         {
+            fieldsGroupBy = (option: any) => `${option.table.label} fields`;
+            makeFieldOptionsForTable(exposedJoin.joinTable, fieldOptions, true, hiddenFieldNames);
+         }
+      }
+   }
+
+
+   function getFieldOptionLabel(option: any)
+   {
+      /////////////////////////////////////////////////////////////////////////////////////////
+      // note - we're using renderFieldOption below for the actual select-box options, which //
+      // are always jut field label (as they are under groupings that show their table name) //
+      /////////////////////////////////////////////////////////////////////////////////////////
+      if (option && option.field && option.table)
+      {
+         if (option.table.name == tableMetaData.name)
+         {
+            return (option.field.label);
+         }
+         else
+         {
+            return (option.table.label + ": " + option.field.label);
+         }
+      }
+
+      return ("");
+   }
+
+
+   //////////////////////////////////////////////////////////////////////////////////////////////
+   // for options, we only want the field label (contrast with what we show in the input box,  //
+   // which comes out of getFieldOptionLabel, which is the table-label prefix for join fields) //
+   //////////////////////////////////////////////////////////////////////////////////////////////
+   function renderFieldOption(props: React.HTMLAttributes<HTMLLIElement>, option: any, state: AutocompleteRenderOptionState): ReactNode
+   {
+      let label = "";
+      if (option && option.field)
+      {
+         label = (option.field.label);
+      }
+
+      return (<li {...props}>{label}</li>);
+   }
+
+
+   function isFieldOptionEqual(option: any, value: any)
+   {
+      return option.fieldName === value.fieldName;
+   }
+
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////
+   // seems like, if we always add the open attribute, then if its false or null, then the autocomplete //
+   // doesn't open at all... so, only add the attribute at all, if forceOpen is true                    //
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////
+   const alsoOpen: {[key: string]: any} = {}
+   if(forceOpen)
+   {
+      alsoOpen["open"] = forceOpen;
+   }
+
+   return (
+      <Autocomplete
+         id={id}
+         renderInput={(params) => (<TextField {...params} autoFocus={autoFocus} label={"Field"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
+         // @ts-ignore
+         defaultValue={defaultValue}
+         options={fieldOptions}
+         onChange={handleFieldChange}
+         isOptionEqualToValue={(option, value) => isFieldOptionEqual(option, value)}
+         groupBy={fieldsGroupBy}
+         getOptionLabel={(option) => getFieldOptionLabel(option)}
+         renderOption={(props, option, state) => renderFieldOption(props, option, state)}
+         autoSelect={true}
+         autoHighlight={true}
+         slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
+         {...alsoOpen}
+      />
+
+   );
+}

src/qqq/components/misc/HelpContent.tsx

@@ -0,0 +1,139 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2023.  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 {QHelpContent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QHelpContent";
+import Box from "@mui/material/Box";
+import parse from "html-react-parser";
+import React, {useContext} from "react";
+import Markdown from "react-markdown";
+import QContext from "QContext";
+
+interface Props
+{
+   helpContents: QHelpContent[];
+   roles: string[];
+   heading?: string;
+   helpContentKey?: string;
+}
+
+HelpContent.defaultProps = {};
+
+
+/*******************************************************************************
+ ** format some content - meaning, change it from string to JSX element(s) or string.
+ ** does a parse() for HTML, and a <Markdown> for markdown, else just text.
+ *******************************************************************************/
+const formatHelpContent = (content: string, format: string): string | JSX.Element | JSX.Element[] =>
+{
+   if (format == "HTML")
+   {
+      return parse(content);
+   }
+   else if (format == "MARKDOWN")
+   {
+      return (<Markdown>{content}</Markdown>)
+   }
+
+   return content;
+}
+
+
+/*******************************************************************************
+ ** return the first help content from the list that matches the first role
+ ** in the roles list.
+ *******************************************************************************/
+const getMatchingHelpContent = (helpContents: QHelpContent[], roles: string[]): QHelpContent =>
+{
+   if (helpContents)
+   {
+      if (helpContents.length == 1 && helpContents[0].roles.size == 0)
+      {
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         // if there's only 1 entry, and it has no roles, then assume user wanted it globally and use it //
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         return (helpContents[0]);
+      }
+      else
+      {
+         for (let i = 0; i < roles.length; i++)
+         {
+            for (let j = 0; j < helpContents.length; j++)
+            {
+               if (helpContents[j].roles.has(roles[i]))
+               {
+                  return(helpContents[j])
+               }
+            }
+         }
+      }
+   }
+
+   return (null);
+}
+
+
+/*******************************************************************************
+ ** test if a list of help contents would find any matches from a list of roles.
+ *******************************************************************************/
+export const hasHelpContent = (helpContents: QHelpContent[], roles: string[]) =>
+{
+   return getMatchingHelpContent(helpContents, roles) != null;
+}
+
+
+/*******************************************************************************
+ ** component that renders a box of formatted help content, from a list of
+ ** helpContents (from meta-data), and for a list of roles (based on what screen
+ *******************************************************************************/
+function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX.Element
+{
+   const {helpHelpActive} = useContext(QContext);
+   let selectedHelpContent = getMatchingHelpContent(helpContents, roles);
+
+   let content = null;
+   if (helpHelpActive)
+   {
+      if (!selectedHelpContent)
+      {
+         selectedHelpContent = new QHelpContent({content: ""});
+      }
+      content = selectedHelpContent.content + ` [${helpContentKey ?? "?"}]`;
+   }
+   else if(selectedHelpContent)
+   {
+      content = selectedHelpContent.content;
+   }
+
+   ///////////////////////////////////////////////////
+   // if content was found, format it and return it //
+   ///////////////////////////////////////////////////
+   if (content)
+   {
+      return <Box display="inline" className="helpContent">
+         {heading && <span className="header">{heading}</span>}
+         {formatHelpContent(content, selectedHelpContent.format)}
+      </Box>;
+   }
+
+   return (null);
+}
+
+export default HelpContent;

src/qqq/components/misc/RecordSidebar.tsx

@@ -41,7 +41,7 @@ interface Props
 
 QRecordSidebar.defaultProps = {
    light: false,
-   stickyTop: "110px",
+   stickyTop: "1rem",
 };
 
 interface SidebarEntry
@@ -76,7 +76,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
 
 
    return (
-      <Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: stickyTop}}>
+      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "auto", maxHeight: "calc(100vh - 2rem)"}}>
          <Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
             {
                sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (

src/qqq/components/misc/SavedFilters.tsx

@@ -1,511 +0,0 @@
-/*
- * 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 {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
-import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
-import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {FiberManualRecord} from "@mui/icons-material";
-import {Alert} from "@mui/material";
-import Box from "@mui/material/Box";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import Divider from "@mui/material/Divider";
-import Icon from "@mui/material/Icon";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import TextField from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import {GridFilterModel, GridSortItem} from "@mui/x-data-grid-pro";
-import FormData from "form-data";
-import React, {useEffect, useRef, useState} from "react";
-import {useLocation, useNavigate} from "react-router-dom";
-import {QCancelButton, QDeleteButton, QSaveButton, QSavedFiltersMenuButton} from "qqq/components/buttons/DefaultButtons";
-import FilterUtils from "qqq/utils/qqq/FilterUtils";
-
-interface Props
-{
-   qController: QController;
-   metaData: QInstance;
-   tableMetaData: QTableMetaData;
-   currentSavedFilter: QRecord;
-   filterModel?: GridFilterModel;
-   columnSortModel?: GridSortItem[];
-   filterOnChangeCallback?: (selectedSavedFilterId: number) => void;
-}
-
-function SavedFilters({qController, metaData, tableMetaData, currentSavedFilter, filterModel, columnSortModel, filterOnChangeCallback}: Props): JSX.Element
-{
-   const navigate = useNavigate();
-
-   const [savedFilters, setSavedFilters] = useState([] as QRecord[]);
-   const [savedFiltersMenu, setSavedFiltersMenu] = useState(null);
-   const [savedFiltersHaveLoaded, setSavedFiltersHaveLoaded] = useState(false);
-   const [filterIsModified, setFilterIsModified] = useState(false);
-
-   const [saveFilterPopupOpen, setSaveFilterPopupOpen] = useState(false);
-   const [isSaveFilterAs, setIsSaveFilterAs] = useState(false);
-   const [isRenameFilter, setIsRenameFilter] = useState(false);
-   const [isDeleteFilter, setIsDeleteFilter] = useState(false);
-   const [savedFilterNameInputValue, setSavedFilterNameInputValue] = useState(null as string);
-   const [popupAlertContent, setPopupAlertContent] = useState("");
-
-   const anchorRef = useRef<HTMLDivElement>(null);
-   const location = useLocation();
-   const [saveOptionsOpen, setSaveOptionsOpen] = useState(false);
-
-   const SAVE_OPTION = "Save...";
-   const DUPLICATE_OPTION = "Duplicate...";
-   const RENAME_OPTION = "Rename...";
-   const DELETE_OPTION = "Delete...";
-   const CLEAR_OPTION = "Clear Current Filter";
-   const dropdownOptions = [DUPLICATE_OPTION, RENAME_OPTION, DELETE_OPTION, CLEAR_OPTION];
-
-   const openSavedFiltersMenu = (event: any) => setSavedFiltersMenu(event.currentTarget);
-   const closeSavedFiltersMenu = () => setSavedFiltersMenu(null);
-
-   //////////////////////////////////////////////////////////////////////////
-   // load filters on first run, then monitor location or metadata changes //
-   //////////////////////////////////////////////////////////////////////////
-   useEffect(() =>
-   {
-      loadSavedFilters()
-         .then(() =>
-         {
-            if (currentSavedFilter != null)
-            {
-               let qFilter = FilterUtils.buildQFilterFromGridFilter(tableMetaData, filterModel, columnSortModel);
-               setFilterIsModified(JSON.stringify(qFilter) !== currentSavedFilter.values.get("filterJson"));
-            }
-
-            setSavedFiltersHaveLoaded(true);
-         });
-   }, [location , tableMetaData, currentSavedFilter, filterModel, columnSortModel])
-
-
-
-   /*******************************************************************************
-    ** make request to load all saved filters from backend
-    *******************************************************************************/
-   async function loadSavedFilters()
-   {
-      if (! tableMetaData)
-      {
-         return;
-      }
-
-      const formData = new FormData();
-      formData.append("tableName", tableMetaData.name);
-
-      let savedFilters = await makeSavedFilterRequest("querySavedFilter", formData);
-      setSavedFilters(savedFilters);
-   }
-
-
-
-   /*******************************************************************************
-    ** fired when a saved record is clicked from the dropdown
-    *******************************************************************************/
-   const handleSavedFilterRecordOnClick = async (record: QRecord) =>
-   {
-      setSaveFilterPopupOpen(false);
-      closeSavedFiltersMenu();
-      filterOnChangeCallback(record.values.get("id"));
-      navigate(`${metaData.getTablePathByName(tableMetaData.name)}/savedFilter/${record.values.get("id")}`);
-   };
-
-
-
-   /*******************************************************************************
-    ** fired when a save option is selected from the save... button/dropdown combo
-    *******************************************************************************/
-   const handleDropdownOptionClick = (optionName: string) =>
-   {
-      setSaveOptionsOpen(false);
-      setPopupAlertContent(null);
-      closeSavedFiltersMenu();
-      setSaveFilterPopupOpen(true);
-      setIsSaveFilterAs(false);
-      setIsRenameFilter(false);
-      setIsDeleteFilter(false)
-
-      switch(optionName)
-      {
-         case SAVE_OPTION:
-            break;
-         case DUPLICATE_OPTION:
-            setIsSaveFilterAs(true);
-            break;
-         case CLEAR_OPTION:
-            setSaveFilterPopupOpen(false)
-            filterOnChangeCallback(null);
-            navigate(metaData.getTablePathByName(tableMetaData.name));
-            break;
-         case RENAME_OPTION:
-            if(currentSavedFilter != null)
-            {
-               setSavedFilterNameInputValue(currentSavedFilter.values.get("label"));
-            }
-            setIsRenameFilter(true);
-            break;
-         case DELETE_OPTION:
-            setIsDeleteFilter(true)
-            break;
-      }
-   }
-
-
-
-   /*******************************************************************************
-    ** fired when save or delete button saved on confirmation dialogs
-    *******************************************************************************/
-   async function handleFilterDialogButtonOnClick()
-   {
-      try
-      {
-         const formData = new FormData();
-         if (isDeleteFilter)
-         {
-            formData.append("id", currentSavedFilter.values.get("id"));
-            await makeSavedFilterRequest("deleteSavedFilter", formData);
-            await(async() =>
-            {
-               handleDropdownOptionClick(CLEAR_OPTION);
-            })();
-         }
-         else
-         {
-            formData.append("tableName", tableMetaData.name);
-            formData.append("filterJson", JSON.stringify(FilterUtils.convertFilterPossibleValuesToIds(FilterUtils.buildQFilterFromGridFilter(tableMetaData, filterModel, columnSortModel))));
-
-            if (isSaveFilterAs || isRenameFilter || currentSavedFilter == null)
-            {
-               formData.append("label", savedFilterNameInputValue);
-               if(currentSavedFilter != null && isRenameFilter)
-               {
-                  formData.append("id", currentSavedFilter.values.get("id"));
-               }
-            }
-            else
-            {
-               formData.append("id", currentSavedFilter.values.get("id"));
-               formData.append("label", currentSavedFilter?.values.get("label"));
-            }
-            const recordList = await makeSavedFilterRequest("storeSavedFilter", formData);
-            await(async() =>
-            {
-               if (recordList && recordList.length > 0)
-               {
-                  setSavedFiltersHaveLoaded(false);
-                  loadSavedFilters();
-                  handleSavedFilterRecordOnClick(recordList[0]);
-               }
-            })();
-         }
-      }
-      catch (e: any)
-      {
-         setPopupAlertContent(JSON.stringify(e.message));
-      }
-   }
-
-
-
-   /*******************************************************************************
-    ** hides/shows the save options
-    *******************************************************************************/
-   const handleToggleSaveOptions = () =>
-   {
-      setSaveOptionsOpen((prevOpen) => !prevOpen);
-   };
-
-
-
-   /*******************************************************************************
-    ** closes save options menu (on clickaway)
-    *******************************************************************************/
-   const handleSaveOptionsMenuClose = (event: Event) =>
-   {
-      if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement))
-      {
-         return;
-      }
-
-      setSaveOptionsOpen(false);
-   };
-
-
-
-   /*******************************************************************************
-    ** stores the current dialog input text to state
-    *******************************************************************************/
-   const handleSaveFilterInputChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
-   {
-      setSavedFilterNameInputValue(event.target.value);
-   };
-
-
-
-   /*******************************************************************************
-    ** closes current dialog
-    *******************************************************************************/
-   const handleSaveFilterPopupClose = () =>
-   {
-      setSaveFilterPopupOpen(false);
-   };
-
-
-
-   /*******************************************************************************
-    ** make a request to the backend for various savedFilter processes
-    *******************************************************************************/
-   async function makeSavedFilterRequest(processName: string, formData: FormData): Promise<QRecord[]>
-   {
-      /////////////////////////
-      // fetch saved filters //
-      /////////////////////////
-      let savedFilters = [] as QRecord[]
-      try
-      {
-         //////////////////////////////////////////////////////////////////
-         // we don't want this job to go async, so, pass a large timeout //
-         //////////////////////////////////////////////////////////////////
-         formData.append(QController.STEP_TIMEOUT_MILLIS_PARAM_NAME, 60 * 1000);
-         const processResult = await qController.processInit(processName, formData, qController.defaultMultipartFormDataHeaders());
-         if (processResult instanceof QJobError)
-         {
-            const jobError = processResult as QJobError;
-            throw(jobError.error);
-         }
-         else
-         {
-            const result = processResult as QJobComplete;
-            if(result.values.savedFilterList)
-            {
-               for (let i = 0; i < result.values.savedFilterList.length; i++)
-               {
-                  const qRecord = new QRecord(result.values.savedFilterList[i]);
-                  savedFilters.push(qRecord);
-               }
-            }
-         }
-      }
-      catch (e)
-      {
-         throw(e);
-      }
-
-      return (savedFilters);
-   }
-
-   const hasStorePermission = metaData?.processes.has("storeSavedFilter");
-   const hasDeletePermission = metaData?.processes.has("deleteSavedFilter");
-   const hasQueryPermission = metaData?.processes.has("querySavedFilter");
-
-   const renderSavedFiltersMenu = tableMetaData && (
-      <Menu
-         anchorEl={savedFiltersMenu}
-         anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left",
-         }}
-         transformOrigin={{
-            vertical: "top",
-            horizontal: "left",
-         }}
-         open={Boolean(savedFiltersMenu)}
-         onClose={closeSavedFiltersMenu}
-         keepMounted
-      >
-         <MenuItem sx={{width: "300px"}} disabled style={{"opacity": "initial"}}><b>Filter Actions</b></MenuItem>
-         {
-            hasStorePermission &&
-            <MenuItem onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
-               <ListItemIcon><Icon>save</Icon></ListItemIcon>
-               Save...
-            </MenuItem>
-         }
-         {
-            hasStorePermission &&
-            <MenuItem disabled={currentSavedFilter === null} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
-               <ListItemIcon><Icon>edit</Icon></ListItemIcon>
-               Rename...
-            </MenuItem>
-         }
-         {
-            hasStorePermission &&
-            <MenuItem disabled={currentSavedFilter === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
-               <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
-               Duplicate...
-            </MenuItem>
-         }
-         {
-            hasDeletePermission &&
-            <MenuItem disabled={currentSavedFilter === null} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
-               <ListItemIcon><Icon>delete</Icon></ListItemIcon>
-               Delete...
-            </MenuItem>
-         }
-         {
-            <MenuItem disabled={currentSavedFilter === null} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
-               <ListItemIcon><Icon>clear</Icon></ListItemIcon>
-               Clear Current Filter
-            </MenuItem>
-         }
-         <Divider/>
-         <MenuItem disabled style={{"opacity": "initial"}}><b>Your Filters</b></MenuItem>
-         {
-            savedFilters && savedFilters.length > 0 ? (
-               savedFilters.map((record: QRecord, index: number) =>
-                  <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedFilterRecordOnClick(record)}>
-                     {record.values.get("label")}
-                  </MenuItem>
-               )
-            ): (
-               <MenuItem >
-                  <i>No filters have been saved for this table.</i>
-               </MenuItem>
-            )
-         }
-      </Menu>
-   );
-
-   return (
-      hasQueryPermission && tableMetaData ? (
-         <Box display="flex" flexGrow={1}>
-            <QSavedFiltersMenuButton isOpen={savedFiltersMenu} onClickHandler={openSavedFiltersMenu} />
-            {renderSavedFiltersMenu}
-            <Box display="flex" justifyContent="center" flexDirection="column">
-               <Box pl={2} pr={2} sx={{display: "flex", alignItems: "center"}}>
-                  {
-                     savedFiltersHaveLoaded && currentSavedFilter && (
-                        <Typography mr={2} variant="h6">Current Filter:&nbsp;
-                           <span style={{fontWeight: "initial"}}>
-                              {currentSavedFilter.values.get("label")}
-                              {
-                                 filterIsModified && (
-                                    <Tooltip sx={{cursor: "pointer"}} title={"The current filter has been modified. Click \"Save...\" to save the changes."}>
-                                       <FiberManualRecord sx={{color: "orange", paddingLeft: "2px", paddingTop: "4px"}} />
-                                    </Tooltip>
-                                 )
-                              }
-                           </span>
-                        </Typography>
-                     )
-                  }
-               </Box>
-            </Box>
-            {
-               <Dialog
-                  open={saveFilterPopupOpen}
-                  onClose={handleSaveFilterPopupClose}
-                  aria-labelledby="alert-dialog-title"
-                  aria-describedby="alert-dialog-description"
-                  onKeyPress={(e) =>
-                  {
-                     if (e.key == "Enter")
-                     {
-                        handleFilterDialogButtonOnClick();
-                     }
-                  }}
-               >
-                  {
-                     currentSavedFilter ? (
-                        isDeleteFilter ? (
-                           <DialogTitle id="alert-dialog-title">Delete Filter</DialogTitle>
-                        ) : (
-                           isSaveFilterAs ? (
-                              <DialogTitle id="alert-dialog-title">Save Filter As</DialogTitle>
-                           ):(
-                              isRenameFilter ? (
-                                 <DialogTitle id="alert-dialog-title">Rename Filter</DialogTitle>
-                              ):(
-                                 <DialogTitle id="alert-dialog-title">Update Existing Filter</DialogTitle>
-                              )
-                           )
-                        )
-                     ):(
-                        <DialogTitle id="alert-dialog-title">Save New Filter</DialogTitle>
-                     )
-                  }
-                  <DialogContent sx={{width: "500px"}}>
-                     {
-                        (! currentSavedFilter || isSaveFilterAs || isRenameFilter) && ! isDeleteFilter ? (
-                           <Box>
-                              {
-                                 isSaveFilterAs ? (
-                                    <Box mb={3}>Enter a name for this new saved filter.</Box>
-                                 ):(
-                                    <Box mb={3}>Enter a new name for this saved filter.</Box>
-                                 )
-                              }
-                              <TextField
-                                 autoFocus
-                                 name="custom-delimiter-value"
-                                 placeholder="Filter Name"
-                                 label="Filter Name"
-                                 inputProps={{width: "100%", maxLength: 100}}
-                                 value={savedFilterNameInputValue}
-                                 sx={{width: "100%"}}
-                                 onChange={handleSaveFilterInputChange}
-                                 onFocus={event =>
-                                 {
-                                    event.target.select();
-                                 }}
-                              />
-                           </Box>
-                        ):(
-                           isDeleteFilter ? (
-                              <Box>Are you sure you want to delete the filter {`'${currentSavedFilter?.values.get("label")}'`}?</Box>
-                           ):(
-                              <Box>Are you sure you want to update the filter {`'${currentSavedFilter?.values.get("label")}'`} with the current filter criteria?</Box>
-                           )
-                        )
-                     }
-                     {popupAlertContent ? (
-                        <Box m={1}>
-                           <Alert severity="error">{popupAlertContent}</Alert>
-                        </Box>
-                     ) : ("")}
-                  </DialogContent>
-                  <DialogActions>
-                     <QCancelButton onClickHandler={handleSaveFilterPopupClose} disabled={false} />
-                     {
-                        isDeleteFilter ?
-                           <QDeleteButton onClickHandler={handleFilterDialogButtonOnClick} />
-                           :
-                           <QSaveButton label="Save" onClickHandler={handleFilterDialogButtonOnClick} disabled={(isSaveFilterAs || currentSavedFilter == null) && savedFilterNameInputValue == null}/>
-                     }
-                  </DialogActions>
-               </Dialog>
-            }
-         </Box>
-      ) : null
-   );
-}
-
-export default SavedFilters;

src/qqq/components/misc/SavedViews.tsx

@@ -0,0 +1,682 @@
+/*
+ * 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 {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
+import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import {Alert, Button, Link} from "@mui/material";
+import Box from "@mui/material/Box";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import {TooltipProps} from "@mui/material/Tooltip/Tooltip";
+import FormData from "form-data";
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {useLocation, useNavigate} from "react-router-dom";
+import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
+import {QCancelButton, QDeleteButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+import RecordQueryView from "qqq/models/query/RecordQueryView";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
+
+interface Props
+{
+   qController: QController;
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+   currentSavedView: QRecord;
+   tableDefaultView: RecordQueryView;
+   view?: RecordQueryView;
+   viewAsJson?: string;
+   viewOnChangeCallback?: (selectedSavedViewId: number) => void;
+   loadingSavedView: boolean
+}
+
+function SavedViews({qController, metaData, tableMetaData, currentSavedView, tableDefaultView, view, viewAsJson, viewOnChangeCallback, loadingSavedView}: Props): JSX.Element
+{
+   const navigate = useNavigate();
+
+   const [savedViews, setSavedViews] = useState([] as QRecord[]);
+   const [savedViewsMenu, setSavedViewsMenu] = useState(null);
+   const [savedViewsHaveLoaded, setSavedViewsHaveLoaded] = useState(false);
+   const [isSubmitting, setIsSubmitting] = useState(false);
+
+   const [saveFilterPopupOpen, setSaveFilterPopupOpen] = useState(false);
+   const [isSaveFilterAs, setIsSaveFilterAs] = useState(false);
+   const [isRenameFilter, setIsRenameFilter] = useState(false);
+   const [isDeleteFilter, setIsDeleteFilter] = useState(false);
+   const [savedViewNameInputValue, setSavedViewNameInputValue] = useState(null as string);
+   const [popupAlertContent, setPopupAlertContent] = useState("");
+
+   const anchorRef = useRef<HTMLDivElement>(null);
+   const location = useLocation();
+   const [saveOptionsOpen, setSaveOptionsOpen] = useState(false);
+
+   const SAVE_OPTION = "Save...";
+   const DUPLICATE_OPTION = "Duplicate...";
+   const RENAME_OPTION = "Rename...";
+   const DELETE_OPTION = "Delete...";
+   const CLEAR_OPTION = "New View";
+   const dropdownOptions = [DUPLICATE_OPTION, RENAME_OPTION, DELETE_OPTION, CLEAR_OPTION];
+
+   const {accentColor, accentColorLight} = useContext(QContext);
+
+   const openSavedViewsMenu = (event: any) => setSavedViewsMenu(event.currentTarget);
+   const closeSavedViewsMenu = () => setSavedViewsMenu(null);
+
+   //////////////////////////////////////////////////////////////////////////
+   // load filters on first run, then monitor location or metadata changes //
+   //////////////////////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      loadSavedViews()
+         .then(() =>
+         {
+            setSavedViewsHaveLoaded(true);
+         });
+   }, [location, tableMetaData])
+
+
+   const baseView = currentSavedView ? JSON.parse(currentSavedView.values.get("viewJson")) as RecordQueryView : tableDefaultView;
+   const viewDiffs = SavedViewUtils.diffViews(tableMetaData, baseView, view);
+   let viewIsModified = false;
+   if(viewDiffs.length > 0)
+   {
+      viewIsModified = true;
+   }
+
+   /*******************************************************************************
+    ** make request to load all saved filters from backend
+    *******************************************************************************/
+   async function loadSavedViews()
+   {
+      if (! tableMetaData)
+      {
+         return;
+      }
+
+      const formData = new FormData();
+      formData.append("tableName", tableMetaData.name);
+
+      let savedViews = await makeSavedViewRequest("querySavedView", formData);
+      setSavedViews(savedViews);
+   }
+
+
+
+   /*******************************************************************************
+    ** fired when a saved record is clicked from the dropdown
+    *******************************************************************************/
+   const handleSavedViewRecordOnClick = async (record: QRecord) =>
+   {
+      setSaveFilterPopupOpen(false);
+      closeSavedViewsMenu();
+      viewOnChangeCallback(record.values.get("id"));
+      navigate(`${metaData.getTablePathByName(tableMetaData.name)}/savedView/${record.values.get("id")}`);
+   };
+
+
+
+   /*******************************************************************************
+    ** fired when a save option is selected from the save... button/dropdown combo
+    *******************************************************************************/
+   const handleDropdownOptionClick = (optionName: string) =>
+   {
+      setSaveOptionsOpen(false);
+      setPopupAlertContent("");
+      closeSavedViewsMenu();
+      setSaveFilterPopupOpen(true);
+      setIsSaveFilterAs(false);
+      setIsRenameFilter(false);
+      setIsDeleteFilter(false)
+
+      switch(optionName)
+      {
+         case SAVE_OPTION:
+            if(currentSavedView == null)
+            {
+               setSavedViewNameInputValue("");
+            }
+            break;
+         case DUPLICATE_OPTION:
+            setSavedViewNameInputValue("");
+            setIsSaveFilterAs(true);
+            break;
+         case CLEAR_OPTION:
+            setSaveFilterPopupOpen(false)
+            viewOnChangeCallback(null);
+            navigate(metaData.getTablePathByName(tableMetaData.name));
+            break;
+         case RENAME_OPTION:
+            if(currentSavedView != null)
+            {
+               setSavedViewNameInputValue(currentSavedView.values.get("label"));
+            }
+            setIsRenameFilter(true);
+            break;
+         case DELETE_OPTION:
+            setIsDeleteFilter(true)
+            break;
+      }
+   }
+
+
+
+   /*******************************************************************************
+    ** fired when save or delete button saved on confirmation dialogs
+    *******************************************************************************/
+   async function handleFilterDialogButtonOnClick()
+   {
+      try
+      {
+         setPopupAlertContent("");
+         setIsSubmitting(true);
+
+         const formData = new FormData();
+         if (isDeleteFilter)
+         {
+            formData.append("id", currentSavedView.values.get("id"));
+            await makeSavedViewRequest("deleteSavedView", formData);
+
+            setSaveFilterPopupOpen(false);
+            setSaveOptionsOpen(false);
+
+            await(async() =>
+            {
+               handleDropdownOptionClick(CLEAR_OPTION);
+            })();
+         }
+         else
+         {
+            formData.append("tableName", tableMetaData.name);
+
+            /////////////////////////////////////////////////////////////////////////////////////////////////
+            // clone view via json serialization/deserialization                                           //
+            // then replace the viewJson in it with a copy that has had its possible values changed to ids //
+            // then stringify that for the backend                                                         //
+            /////////////////////////////////////////////////////////////////////////////////////////////////
+            const viewObject = JSON.parse(JSON.stringify(view));
+            viewObject.queryFilter = JSON.parse(JSON.stringify(FilterUtils.convertFilterPossibleValuesToIds(viewObject.queryFilter)));
+            formData.append("viewJson", JSON.stringify(viewObject));
+
+            if (isSaveFilterAs || isRenameFilter || currentSavedView == null)
+            {
+               formData.append("label", savedViewNameInputValue);
+               if(currentSavedView != null && isRenameFilter)
+               {
+                  formData.append("id", currentSavedView.values.get("id"));
+               }
+            }
+            else
+            {
+               formData.append("id", currentSavedView.values.get("id"));
+               formData.append("label", currentSavedView?.values.get("label"));
+            }
+            const recordList = await makeSavedViewRequest("storeSavedView", formData);
+            await(async() =>
+            {
+               if (recordList && recordList.length > 0)
+               {
+                  setSavedViewsHaveLoaded(false);
+                  loadSavedViews();
+                  handleSavedViewRecordOnClick(recordList[0]);
+               }
+            })();
+         }
+
+         setSaveFilterPopupOpen(false);
+         setSaveOptionsOpen(false);
+      }
+      catch (e: any)
+      {
+         let message = JSON.stringify(e);
+         if(typeof e == "string")
+         {
+            message = e;
+         }
+         else if(typeof e == "object" && e.message)
+         {
+            message = e.message;
+         }
+
+         setPopupAlertContent(message);
+         console.log(`Setting error: ${message}`);
+      }
+      finally
+      {
+         setIsSubmitting(false);
+      }
+   }
+
+
+
+   /*******************************************************************************
+    ** hides/shows the save options
+    *******************************************************************************/
+   const handleToggleSaveOptions = () =>
+   {
+      setSaveOptionsOpen((prevOpen) => !prevOpen);
+   };
+
+
+
+   /*******************************************************************************
+    ** closes save options menu (on clickaway)
+    *******************************************************************************/
+   const handleSaveOptionsMenuClose = (event: Event) =>
+   {
+      if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement))
+      {
+         return;
+      }
+
+      setSaveOptionsOpen(false);
+   };
+
+
+
+   /*******************************************************************************
+    ** stores the current dialog input text to state
+    *******************************************************************************/
+   const handleSaveFilterInputChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
+   {
+      setSavedViewNameInputValue(event.target.value);
+   };
+
+
+
+   /*******************************************************************************
+    ** closes current dialog
+    *******************************************************************************/
+   const handleSaveFilterPopupClose = () =>
+   {
+      setSaveFilterPopupOpen(false);
+   };
+
+
+
+   /*******************************************************************************
+    ** make a request to the backend for various savedView processes
+    *******************************************************************************/
+   async function makeSavedViewRequest(processName: string, formData: FormData): Promise<QRecord[]>
+   {
+      /////////////////////////
+      // fetch saved filters //
+      /////////////////////////
+      let savedViews = [] as QRecord[]
+      try
+      {
+         //////////////////////////////////////////////////////////////////
+         // we don't want this job to go async, so, pass a large timeout //
+         //////////////////////////////////////////////////////////////////
+         formData.append(QController.STEP_TIMEOUT_MILLIS_PARAM_NAME, 60 * 1000);
+         const processResult = await qController.processInit(processName, formData, qController.defaultMultipartFormDataHeaders());
+         if (processResult instanceof QJobError)
+         {
+            const jobError = processResult as QJobError;
+            throw(jobError.error);
+         }
+         else
+         {
+            const result = processResult as QJobComplete;
+            if(result.values.savedViewList)
+            {
+               for (let i = 0; i < result.values.savedViewList.length; i++)
+               {
+                  const qRecord = new QRecord(result.values.savedViewList[i]);
+                  savedViews.push(qRecord);
+               }
+            }
+         }
+      }
+      catch (e)
+      {
+         throw(e);
+      }
+
+      return (savedViews);
+   }
+
+   const hasStorePermission = metaData?.processes.has("storeSavedView");
+   const hasDeletePermission = metaData?.processes.has("deleteSavedView");
+   const hasQueryPermission = metaData?.processes.has("querySavedView");
+
+   const tooltipMaxWidth = (maxWidth: string) =>
+   {
+      return ({slotProps: {
+         tooltip: {
+            sx: {
+               maxWidth: maxWidth
+            }
+         }
+      }})
+   }
+
+   const menuTooltipAttribs = {...tooltipMaxWidth("250px"), placement: "left", enterDelay: 1000} as TooltipProps;
+
+   const renderSavedViewsMenu = tableMetaData && (
+      <Menu
+         anchorEl={savedViewsMenu}
+         anchorOrigin={{vertical: "bottom", horizontal: "left",}}
+         transformOrigin={{vertical: "top", horizontal: "left",}}
+         open={Boolean(savedViewsMenu)}
+         onClose={closeSavedViewsMenu}
+         keepMounted
+         PaperProps={{style: {maxHeight: "calc(100vh - 200px)", minHeight: "200px"}}}
+      >
+         <MenuItem sx={{width: "300px"}} disabled style={{"opacity": "initial"}}><b>View Actions</b></MenuItem>
+         {
+            hasStorePermission &&
+            <Tooltip {...menuTooltipAttribs} title={<>Save your current filters, columns and settings, for quick re-use at a later time.<br /><br />You will be prompted to enter a name if you choose this option.</>}>
+               <MenuItem onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
+                  <ListItemIcon><Icon>save</Icon></ListItemIcon>
+                  {currentSavedView ? "Save..." : "Save As..."}
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Change the name for this saved view.">
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
+                  <ListItemIcon><Icon>edit</Icon></ListItemIcon>
+                  Rename...
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Save a new copy this view, with a different name, separate from the original.">
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
+                  <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
+                  Save As...
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Delete this saved view.">
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
+                  <ListItemIcon><Icon>delete</Icon></ListItemIcon>
+                  Delete...
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            <Tooltip {...menuTooltipAttribs} title="Create a new view of this table, resetting the filters and columns to their defaults.">
+               <MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
+                  <ListItemIcon><Icon>monitor</Icon></ListItemIcon>
+                  New View
+               </MenuItem>
+            </Tooltip>
+         }
+         <Divider/>
+         <MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Views</b></MenuItem>
+         {
+            savedViews && savedViews.length > 0 ? (
+               savedViews.map((record: QRecord, index: number) =>
+                  <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedViewRecordOnClick(record)}>
+                     {record.values.get("label")}
+                  </MenuItem>
+               )
+            ): (
+               <MenuItem>
+                  <i>You do not have any saved views for this table.</i>
+               </MenuItem>
+            )
+         }
+      </Menu>
+   );
+
+   let buttonText = "Views";
+   let buttonBackground = "none";
+   let buttonBorder = colors.grayLines.main;
+   let buttonColor = colors.gray.main;
+
+   if(currentSavedView)
+   {
+      if (viewIsModified)
+      {
+         buttonBackground = accentColorLight;
+         buttonBorder = buttonBackground;
+         buttonColor = accentColor;
+      }
+      else
+      {
+         buttonBackground = accentColor;
+         buttonBorder = buttonBackground;
+         buttonColor = "#FFFFFF";
+      }
+   }
+
+   const buttonStyles = {
+      border: `1px solid ${buttonBorder}`,
+      backgroundColor: buttonBackground,
+      color: buttonColor,
+      "&:focus:not(:hover)": {
+         color: buttonColor,
+         backgroundColor: buttonBackground,
+      },
+      "&:hover": {
+         color: buttonColor,
+         backgroundColor: buttonBackground,
+      }
+   }
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function isSaveButtonDisabled(): boolean
+   {
+      if(isSubmitting)
+      {
+         return (true);
+      }
+
+      const haveInputText = (savedViewNameInputValue != null && savedViewNameInputValue.trim() != "")
+
+      if(isSaveFilterAs || isRenameFilter || currentSavedView == null)
+      {
+         if(!haveInputText)
+         {
+            return (true);
+         }
+      }
+
+      return (false);
+   }
+
+   const linkButtonStyle = {
+      minWidth: "unset",
+      textTransform: "none",
+      fontSize: "0.875rem",
+      fontWeight: "500",
+      padding: "0.5rem"
+   };
+
+   return (
+      hasQueryPermission && tableMetaData ? (
+         <>
+            <Box order="1" mr={"0.5rem"}>
+               <Button
+                  onClick={openSavedViewsMenu}
+                  sx={{
+                     borderRadius: "0.75rem",
+                     textTransform: "none",
+                     fontWeight: 500,
+                     fontSize: "0.875rem",
+                     p: "0.5rem",
+                     ... buttonStyles
+                  }}
+               >
+                  <Icon sx={{mr: "0.5rem"}}>save</Icon>
+                  {buttonText}
+                  <Icon sx={{ml: "0.5rem"}}>keyboard_arrow_down</Icon>
+               </Button>
+               {renderSavedViewsMenu}
+            </Box>
+            <Box order="3" display="flex" justifyContent="center" flexDirection="column">
+               <Box pl={2} pr={2} sx={{display: "flex", alignItems: "center"}}>
+                  {
+                     !currentSavedView && viewIsModified && <>
+                        <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
+                           <b>Unsaved Changes</b>
+                           <ul style={{padding: "0.5rem 1rem"}}>
+                              {
+                                 viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
+                              }
+                           </ul>
+                        </>}>
+                           <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save View As&hellip;</Button>
+                        </Tooltip>
+
+                        {/* vertical rule */}
+                        <Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
+
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
+                     </>
+                  }
+                  {
+                     currentSavedView && viewIsModified && <>
+                        <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
+                           <b>Unsaved Changes</b>
+                           <ul style={{padding: "0.5rem 1rem"}}>
+                              {
+                                 viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
+                              }
+                           </ul></>}>
+                           <Box display="inline" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>{viewDiffs.length} Unsaved Change{viewDiffs.length == 1 ? "" : "s"}</Box>
+                        </Tooltip>
+
+                        <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save&hellip;</Button>
+
+                        {/* vertical rule */}
+                        <Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
+
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
+                     </>
+                  }
+               </Box>
+            </Box>
+            {
+               <Dialog
+                  open={saveFilterPopupOpen}
+                  onClose={handleSaveFilterPopupClose}
+                  aria-labelledby="alert-dialog-title"
+                  aria-describedby="alert-dialog-description"
+                  onKeyPress={(e) =>
+                  {
+                     ////////////////////////////////////////////////////
+                     // make user actually hit delete button           //
+                     // but for other modes, let Enter submit the form //
+                     ////////////////////////////////////////////////////
+                     if (e.key == "Enter" && !isDeleteFilter)
+                     {
+                        handleFilterDialogButtonOnClick();
+                     }
+                  }}
+               >
+                  {
+                     currentSavedView ? (
+                        isDeleteFilter ? (
+                           <DialogTitle id="alert-dialog-title">Delete View</DialogTitle>
+                        ) : (
+                           isSaveFilterAs ? (
+                              <DialogTitle id="alert-dialog-title">Save View As</DialogTitle>
+                           ):(
+                              isRenameFilter ? (
+                                 <DialogTitle id="alert-dialog-title">Rename View</DialogTitle>
+                              ):(
+                                 <DialogTitle id="alert-dialog-title">Update Existing View</DialogTitle>
+                              )
+                           )
+                        )
+                     ):(
+                        <DialogTitle id="alert-dialog-title">Save New View</DialogTitle>
+                     )
+                  }
+                  <DialogContent sx={{width: "500px"}}>
+                     {popupAlertContent ? (
+                        <Box mb={1}>
+                           <Alert severity="error" onClose={() => setPopupAlertContent("")}>{popupAlertContent}</Alert>
+                        </Box>
+                     ) : ("")}
+                     {
+                        (! currentSavedView || isSaveFilterAs || isRenameFilter) && ! isDeleteFilter ? (
+                           <Box>
+                              {
+                                 isSaveFilterAs ? (
+                                    <Box mb={3}>Enter a name for this new saved view.</Box>
+                                 ):(
+                                    <Box mb={3}>Enter a new name for this saved view.</Box>
+                                 )
+                              }
+                              <TextField
+                                 autoFocus
+                                 name="custom-delimiter-value"
+                                 placeholder="View Name"
+                                 inputProps={{width: "100%", maxLength: 100}}
+                                 value={savedViewNameInputValue}
+                                 sx={{width: "100%"}}
+                                 onChange={handleSaveFilterInputChange}
+                                 onFocus={event =>
+                                 {
+                                    event.target.select();
+                                 }}
+                              />
+                           </Box>
+                        ):(
+                           isDeleteFilter ? (
+                              <Box>Are you sure you want to delete the view {`'${currentSavedView?.values.get("label")}'`}?</Box>
+                           ):(
+                              <Box>Are you sure you want to update the view {`'${currentSavedView?.values.get("label")}'`}?</Box>
+                           )
+                        )
+                     }
+                  </DialogContent>
+                  <DialogActions>
+                     <QCancelButton onClickHandler={handleSaveFilterPopupClose} disabled={false} />
+                     {
+                        isDeleteFilter ?
+                           <QDeleteButton onClickHandler={handleFilterDialogButtonOnClick} disabled={isSubmitting} />
+                           :
+                           <QSaveButton label="Save" onClickHandler={handleFilterDialogButtonOnClick} disabled={isSaveButtonDisabled()}/>
+                     }
+                  </DialogActions>
+               </Dialog>
+            }
+         </>
+      ) : null
+   );
+}
+
+export default SavedViews;

src/qqq/components/misc/TabPanel.tsx

@@ -28,11 +28,12 @@ interface TabPanelProps
    children?: React.ReactNode;
    index: number;
    value: number;
+   style?: any;
 }
 
 export default function TabPanel(props: TabPanelProps)
 {
-   const {children, value, index, ...other} = props;
+   const {children, value, index, style, ...other} = props;
 
    return (
       <div
@@ -40,6 +41,7 @@ export default function TabPanel(props: TabPanelProps)
          hidden={value !== index}
          id={`simple-tabpanel-${index}`}
          aria-labelledby={`simple-tab-${index}`}
+         style={style}
          {...other}
       >
          {value === index && (

src/qqq/components/processes/ValidationReview.tsx

@@ -155,7 +155,7 @@ function ValidationReview({
                            "false",
                            "Skip Validation.  Submit the records for immediate processing", (
                               <div>
-                                 If you choose this option, the records input records will immediately be processed.
+                                 If you choose this option, the input records will immediately be processed.
                                  You will be told how many records were successfully processed, and which ones had issues after the processing is completed.
                                  <br />
                                  <br />

src/qqq/components/query/BasicAndAdvancedQueryControls.tsx

@@ -0,0 +1,837 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
+import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
+import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
+import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {Badge, ToggleButton, ToggleButtonGroup} from "@mui/material";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import Icon from "@mui/material/Icon";
+import Tooltip from "@mui/material/Tooltip";
+import {GridApiPro} from "@mui/x-data-grid-pro/models/gridApiPro";
+import React, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
+import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
+import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
+import FieldListMenu from "qqq/components/query/FieldListMenu";
+import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
+import QuickFilter, {quickFilterButtonStyles} from "qqq/components/query/QuickFilter";
+import XIcon from "qqq/components/query/XIcon";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+
+interface BasicAndAdvancedQueryControlsProps
+{
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+
+   savedViewsComponent: JSX.Element;
+   columnMenuComponent: JSX.Element;
+
+   quickFilterFieldNames: string[];
+   setQuickFilterFieldNames: (names: string[]) => void;
+
+   queryFilter: QQueryFilter;
+   setQueryFilter: (queryFilter: QQueryFilter) => void;
+
+   gridApiRef: React.MutableRefObject<GridApiPro>;
+
+   /////////////////////////////////////////////////////////////////////////////////////////////
+   // this prop is used as a way to recognize changes in the query filter internal structure, //
+   // since the queryFilter object (reference) doesn't get updated                            //
+   /////////////////////////////////////////////////////////////////////////////////////////////
+   queryFilterJSON: string;
+
+   mode: string;
+   setMode: (mode: string) => void;
+}
+
+let debounceTimeout: string | number | NodeJS.Timeout;
+
+/*******************************************************************************
+ ** Component to provide the basic & advanced query-filter controls for the
+ ** RecordQueryOrig screen.
+ **
+ ** Done as a forwardRef, so RecordQueryOrig can call some functions, e.g., when user
+ ** does things on that screen, that we need to know about in here.
+ *******************************************************************************/
+const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryControlsProps, ref) =>
+{
+   const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props
+
+   /////////////////////
+   // state variables //
+   /////////////////////
+   const [defaultQuickFilterFieldNames, setDefaultQuickFilterFieldNames] = useState(getDefaultQuickFilterFieldNames(tableMetaData));
+   const [defaultQuickFilterFieldNameMap, setDefaultQuickFilterFieldNameMap] = useState(Object.fromEntries(defaultQuickFilterFieldNames.map(k => [k, true])));
+   const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null)
+   const [addQuickFilterOpenCounter, setAddQuickFilterOpenCounter] = useState(0);
+   const [showClearFiltersWarning, setShowClearFiltersWarning] = useState(false);
+   const [mouseOverElement, setMouseOverElement] = useState(null as string);
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+   const {accentColor} = useContext(QContext);
+
+   //////////////////////////////////////////////////////////////////////////////////
+   // make some functions available to our parent - so it can tell us to do things //
+   //////////////////////////////////////////////////////////////////////////////////
+   useImperativeHandle(ref, () =>
+   {
+      return {
+         ensureAllFilterCriteriaAreActiveQuickFilters(currentFilter: QQueryFilter, reason: string)
+         {
+            ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, currentFilter, reason);
+         },
+         addField(fieldName: string)
+         {
+            addQuickFilterField({fieldName: fieldName}, "columnMenu");
+         },
+         getCurrentMode()
+         {
+            return (mode);
+         }
+      }
+   });
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOverElement(name: string)
+   {
+      setMouseOverElement(name);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOutElement()
+   {
+      setMouseOverElement(null);
+   }
+
+
+   /*******************************************************************************
+    ** for a given field, set its default operator for quick-filter dropdowns.
+    *******************************************************************************/
+   function getDefaultOperatorForField(field: QFieldMetaData)
+   {
+      // todo - sometimes i want contains instead of equals on strings (client.name, for example...)
+      let defaultOperator = field?.possibleValueSourceName ? QCriteriaOperator.IN : QCriteriaOperator.EQUALS;
+      if (field?.type == QFieldType.DATE_TIME || field?.type == QFieldType.DATE)
+      {
+         defaultOperator = QCriteriaOperator.GREATER_THAN;
+      }
+      else if (field?.type == QFieldType.BOOLEAN)
+      {
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // for booleans, if we set a default, since none of them have values, then they are ALWAYS selected, which isn't what we want. //
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         defaultOperator = null;
+      }
+      return defaultOperator;
+   }
+
+
+   /*******************************************************************************
+    ** Callback passed into the QuickFilter component, to update the criteria
+    ** after user makes changes to it or to clear it out.
+    *******************************************************************************/
+   const updateQuickCriteria = (newCriteria: QFilterCriteria, needDebounce = false, doClearCriteria = false) =>
+   {
+      let found = false;
+      let foundIndex = null;
+      for (let i = 0; i < queryFilter?.criteria?.length; i++)
+      {
+         if(queryFilter.criteria[i].fieldName == newCriteria.fieldName)
+         {
+            queryFilter.criteria[i] = newCriteria;
+            found = true;
+            foundIndex = i;
+            break;
+         }
+      }
+
+      if(doClearCriteria)
+      {
+         if(found)
+         {
+            queryFilter.criteria.splice(foundIndex, 1);
+            setQueryFilter(queryFilter);
+         }
+         return;
+      }
+
+      if(!found)
+      {
+         if(!queryFilter.criteria)
+         {
+            queryFilter.criteria = [];
+         }
+         queryFilter.criteria.push(newCriteria);
+         found = true;
+      }
+
+      if(found)
+      {
+         clearTimeout(debounceTimeout)
+         debounceTimeout = setTimeout(() =>
+         {
+            setQueryFilter(queryFilter);
+         }, needDebounce ? 500 : 1);
+
+         forceUpdate();
+      }
+   };
+
+
+   /*******************************************************************************
+    ** Get the QFilterCriteriaWithId object to pass in to the QuickFilter component
+    ** for a given field name.
+    *******************************************************************************/
+   const getQuickCriteriaParam = (fieldName: string): QFilterCriteriaWithId | null | "tooComplex" =>
+   {
+      const matches: QFilterCriteriaWithId[] = [];
+      for (let i = 0; i < queryFilter?.criteria?.length; i++)
+      {
+         if(queryFilter.criteria[i].fieldName == fieldName)
+         {
+            matches.push(queryFilter.criteria[i] as QFilterCriteriaWithId);
+         }
+      }
+
+      if(matches.length == 0)
+      {
+         return (null);
+      }
+      else if(matches.length == 1)
+      {
+         return (matches[0]);
+      }
+      else
+      {
+         return "tooComplex";
+      }
+   };
+
+
+   /*******************************************************************************
+    ** Event handler for QuickFilter component, to remove a quick filter field from
+    ** the screen.
+    *******************************************************************************/
+   const handleRemoveQuickFilterField = (fieldName: string): void =>
+   {
+      const index = quickFilterFieldNames.indexOf(fieldName)
+      if(index >= 0)
+      {
+         //////////////////////////////////////
+         // remove this field from the query //
+         //////////////////////////////////////
+         const criteria = new QFilterCriteria(fieldName, null, []);
+         updateQuickCriteria(criteria, false, true);
+
+         quickFilterFieldNames.splice(index, 1);
+         setQuickFilterFieldNames(quickFilterFieldNames);
+      }
+   };
+
+
+   /*******************************************************************************
+    ** Event handler for button that opens the add-quick-filter menu
+    *******************************************************************************/
+   const openAddQuickFilterMenu = (event: any) =>
+   {
+      setAddQuickFilterMenu(event.currentTarget);
+      setAddQuickFilterOpenCounter(addQuickFilterOpenCounter + 1);
+   }
+
+
+   /*******************************************************************************
+    ** Handle closing the add-quick-filter menu
+    *******************************************************************************/
+   const closeAddQuickFilterMenu = () =>
+   {
+      setAddQuickFilterMenu(null);
+   }
+
+
+   /*******************************************************************************
+    ** Add a quick-filter field to the screen, from either the user selecting one,
+    ** or from a new query being activated, etc.
+    *******************************************************************************/
+   const addQuickFilterField = (newValue: any, reason: "blur" | "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | "columnMenu" | "activatedView" | string) =>
+   {
+      console.log(`Adding quick filter field as: ${JSON.stringify(newValue)}`);
+      if (reason == "blur")
+      {
+         //////////////////////////////////////////////////////////////////
+         // this keeps a click out of the menu from selecting the option //
+         //////////////////////////////////////////////////////////////////
+         return;
+      }
+
+      const fieldName = newValue ? newValue.fieldName : null;
+      if (fieldName)
+      {
+         if(defaultQuickFilterFieldNameMap[fieldName])
+         {
+            return;
+         }
+
+         if (quickFilterFieldNames.indexOf(fieldName) == -1)
+         {
+            /////////////////////////////////
+            // add the field if we need to //
+            /////////////////////////////////
+            quickFilterFieldNames.push(fieldName);
+            setQuickFilterFieldNames(quickFilterFieldNames);
+
+            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            // only do this when user has added the field (e.g., not when adding it because of a selected view or filter-in-url) //
+            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            if(reason != "modeToggleClicked" && reason != "defaultFilterLoaded" && reason != "savedFilterSelected" && reason != "activatedView")
+            {
+               setTimeout(() => document.getElementById(`quickFilter.${fieldName}`)?.click(), 5);
+            }
+         }
+         else if(reason == "columnMenu")
+         {
+            //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            // if field was already on-screen, but user clicked an option from the columnMenu, then open the quick-filter field //
+            //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            setTimeout(() => document.getElementById(`quickFilter.${fieldName}`)?.click(), 5);
+         }
+
+         closeAddQuickFilterMenu();
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const handleFieldListMenuSelection = (field: QFieldMetaData, table: QTableMetaData): void =>
+   {
+      let fullFieldName = field.name;
+      if(table && table.name != tableMetaData.name)
+      {
+         fullFieldName = `${table.name}.${field.name}`;
+      }
+
+      addQuickFilterField({fieldName: fullFieldName}, "selectedFromAddFilterMenu");
+   }
+
+
+   /*******************************************************************************
+    ** event handler for the Filter Builder button - e.g., opens the parent's grid's
+    ** filter panel
+    *******************************************************************************/
+   const openFilterBuilder = (e: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) =>
+   {
+      gridApiRef.current.showFilterPanel();
+   };
+
+
+   /*******************************************************************************
+    ** event handler for the clear-filters modal
+    *******************************************************************************/
+   const handleClearFiltersAction = (event: React.KeyboardEvent<HTMLDivElement>, isYesButton: boolean = false) =>
+   {
+      if (isYesButton || event.key == "Enter")
+      {
+         setShowClearFiltersWarning(false);
+         setQueryFilter(new QQueryFilter([], queryFilter.orderBys));
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const removeCriteriaByIndex = (index: number) =>
+   {
+      queryFilter.criteria.splice(index, 1);
+      setQueryFilter(queryFilter);
+   }
+
+
+   /*******************************************************************************
+    ** format the current query as a string for showing on-screen as a preview.
+    *******************************************************************************/
+   const queryToAdvancedString = () =>
+   {
+      if(queryFilter == null || !queryFilter.criteria)
+      {
+         return (<span></span>);
+      }
+
+      let counter = 0;
+
+      return (
+         <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
+            {queryFilter.criteria.map((criteria, i) =>
+            {
+               const {criteriaIsValid} = validateCriteria(criteria, null);
+               if(criteriaIsValid)
+               {
+                  counter++;
+
+                  return (
+                     <span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
+                        {counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{queryFilter.booleanOperator}&nbsp;</span> : <span/>}
+                        {FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
+                        {mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}><XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>}
+                     </span>
+                  );
+               }
+               else
+               {
+                  return (<span />);
+               }
+            })}
+         </Box>
+      );
+   };
+
+
+   /*******************************************************************************
+    ** event handler for toggling between modes - basic & advanced.
+    *******************************************************************************/
+   const modeToggleClicked = (newValue: string | null) =>
+   {
+      if (newValue)
+      {
+         if(newValue == "basic")
+         {
+            ////////////////////////////////////////////////////////////////////////////////
+            // we're always allowed to go to advanced -                                   //
+            // but if we're trying to go to basic, make sure the filter isn't too complex //
+            ////////////////////////////////////////////////////////////////////////////////
+            const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
+            if (!canFilterWorkAsBasic)
+            {
+               console.log("Query cannot work as basic - so - not allowing toggle to basic.")
+               return;
+            }
+
+            ////////////////////////////////////////////////////////////////////////////////////////////////
+            // when going to basic, make sure all fields in the current query are active as quick-filters //
+            ////////////////////////////////////////////////////////////////////////////////////////////////
+            if (queryFilter && queryFilter.criteria)
+            {
+               ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "modeToggleClicked", "basic");
+            }
+         }
+
+         //////////////////////////////////////////////////////////////////////////////////////
+         // note - this is a callback to the parent - as it is responsible for this state... //
+         //////////////////////////////////////////////////////////////////////////////////////
+         setMode(newValue);
+      }
+   };
+
+
+   /*******************************************************************************
+    ** make sure that all fields in the current query are on-screen as quick-filters
+    ** (that is, if the query can be basic)
+    *******************************************************************************/
+   const ensureAllFilterCriteriaAreActiveQuickFilters = (tableMetaData: QTableMetaData, queryFilter: QQueryFilter, reason: "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | string, newMode?: string) =>
+   {
+      if(!tableMetaData || !queryFilter)
+      {
+         return;
+      }
+
+      const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
+      if (!canFilterWorkAsBasic)
+      {
+         console.log("query is too complex for basic - so - switching to advanced");
+         modeToggleClicked("advanced");
+         forceUpdate();
+         return;
+      }
+
+      const modeToUse = newMode ?? mode;
+      if(modeToUse == "basic")
+      {
+         for (let i = 0; i < queryFilter?.criteria?.length; i++)
+         {
+            const criteria = queryFilter.criteria[i];
+            if (criteria && criteria.fieldName)
+            {
+               addQuickFilterField(criteria, reason);
+            }
+         }
+      }
+   }
+
+
+   /*******************************************************************************
+    ** count how many valid criteria are in the query - for showing badge
+    *******************************************************************************/
+   const countValidCriteria = (queryFilter: QQueryFilter): number =>
+   {
+      let count = 0;
+      for (let i = 0; i < queryFilter?.criteria?.length; i++)
+      {
+         const {criteriaIsValid} = validateCriteria(queryFilter.criteria[i], null);
+         if(criteriaIsValid)
+         {
+            count++;
+         }
+      }
+      return count;
+   }
+
+
+   /*******************************************************************************
+    ** Event handler for setting the sort from that menu
+    *******************************************************************************/
+   const handleSetSort = (field: QFieldMetaData, table: QTableMetaData, isAscending: boolean = true): void =>
+   {
+      const fullFieldName = table && table.name != tableMetaData.name ? `${table.name}.${field.name}` : field.name;
+      queryFilter.orderBys = [new QFilterOrderBy(fullFieldName, isAscending)]
+
+      setQueryFilter(queryFilter);
+      forceUpdate();
+   }
+
+
+   /*******************************************************************************
+    ** event handler for a click on a field's up or down arrow in the sort menu
+    *******************************************************************************/
+   const handleSetSortArrowClick = (field: QFieldMetaData, table: QTableMetaData, event: any): void =>
+   {
+      event.stopPropagation();
+
+      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // make sure this is an event handler for one of our icons (not something else in the dom here in our end-adornments) //
+      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      const isAscending = event.target.innerHTML == "arrow_upward";
+      const isDescending = event.target.innerHTML == "arrow_downward";
+      if(isAscending || isDescending)
+      {
+         handleSetSort(field, table, isAscending);
+      }
+   }
+
+
+   /*******************************************************************************
+    ** event handler for clicking the current sort up/down arrow, to toggle direction.
+    *******************************************************************************/
+   function toggleSortDirection(event: React.MouseEvent<HTMLSpanElement, MouseEvent>): void
+   {
+      event.stopPropagation();
+      try
+      {
+         queryFilter.orderBys[0].isAscending = !queryFilter.orderBys[0].isAscending;
+         setQueryFilter(queryFilter);
+         forceUpdate();
+      }
+      catch(e)
+      {
+         console.log(`Error toggling sort: ${e}`)
+      }
+   }
+
+   /////////////////////////////////
+   // set up the sort menu button //
+   /////////////////////////////////
+   let sortButtonContents = <>Sort...</>
+   if(queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
+   {
+      const orderBy = queryFilter.orderBys[0];
+      const orderByFieldName = orderBy.fieldName;
+      const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
+      const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
+      sortButtonContents =  <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>
+   }
+
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // this is being used as a version of like forcing that we get re-rendered if the query filter changes... //
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const [lastIndex, setLastIndex] = useState(queryFilterJSON);
+   if(queryFilterJSON != lastIndex)
+   {
+      ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "defaultFilterLoaded");
+      setLastIndex(queryFilterJSON);
+   }
+
+   ///////////////////////////////////////////////////
+   // set some status flags based on current filter //
+   ///////////////////////////////////////////////////
+   const hasValidFilters = queryFilter && countValidCriteria(queryFilter) > 0;
+   const {canFilterWorkAsBasic, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
+   let reasonWhyBasicIsDisabled = null;
+   if(reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
+   {
+      reasonWhyBasicIsDisabled = <>
+         Your current Filter cannot be managed using Basic mode because:
+         <ul style={{marginLeft: "1rem"}}>
+            {reasonsWhyItCannot.map((reason, i) => <li key={i}>{reason}</li>)}
+         </ul>
+      </>
+   }
+
+   const borderGray = colors.grayLines.main;
+
+   const sortMenuComponent = (
+      <FieldListMenu
+         idPrefix="sort"
+         tableMetaData={tableMetaData}
+         placeholder="Search Fields"
+         buttonProps={{disableRipple: true, sx: {textTransform: "none", color: colors.gray.main, paddingRight: 0}}}
+         buttonChildren={sortButtonContents}
+         isModeSelectOne={true}
+         handleSelectedField={handleSetSort}
+         fieldEndAdornment={<Box whiteSpace="nowrap"><Icon>arrow_upward</Icon><Icon>arrow_downward</Icon></Box>}
+         handleAdornmentClick={handleSetSortArrowClick}
+      />);
+
+   const filterBuilderMouseEvents =
+      {
+         onMouseOver: () => handleMouseOverElement("filterBuilderButton"),
+         onMouseOut: () => handleMouseOutElement()
+      };
+
+   return (
+      <Box pb={mode == "advanced" ? "0.25rem" : "0"}>
+
+         {/* First row:  Saved Views button (with Columns button in the middle of it), then space-between, then basic|advanced toggle */}
+         <Box display="flex" justifyContent="space-between" pt={"0.5rem"} pb={"0.5rem"}>
+            <Box display="flex">
+               {savedViewsComponent}
+               {columnMenuComponent}
+            </Box>
+            <Box>
+               <Tooltip title={reasonWhyBasicIsDisabled}>
+                  <ToggleButtonGroup
+                     value={mode}
+                     exclusive
+                     onChange={(event, newValue) => modeToggleClicked(newValue)}
+                     size="small"
+                     sx={{pl: 0.5, width: "10rem"}}
+                  >
+                     <ToggleButton value="basic" disabled={!canFilterWorkAsBasic}>Basic</ToggleButton>
+                     <ToggleButton value="advanced">Advanced</ToggleButton>
+                  </ToggleButtonGroup>
+               </Tooltip>
+            </Box>
+         </Box>
+
+         {/* Second row:  Basic or advanced mode - with sort-by control on the right (of each) */}
+         <Box pb={"0.25rem"}>
+            {
+               ///////////////////////////////////////////////////////////////////////////////////
+               // basic mode - wrapping-list of fields & add-field button, then sort-by control //
+               ///////////////////////////////////////////////////////////////////////////////////
+               mode == "basic" &&
+               <Box display="flex" alignItems="flex-start" flexShrink={1} flexGrow={1}>
+                  <Box width="100px" flexShrink={1} flexGrow={1}>
+                     <>
+                        {
+                           tableMetaData && defaultQuickFilterFieldNames?.map((fieldName) =>
+                           {
+                              const [field] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+                              let defaultOperator = getDefaultOperatorForField(field);
+
+                              return (<QuickFilter
+                                 key={fieldName}
+                                 fullFieldName={fieldName}
+                                 tableMetaData={tableMetaData}
+                                 updateCriteria={updateQuickCriteria}
+                                 criteriaParam={getQuickCriteriaParam(fieldName)}
+                                 fieldMetaData={field}
+                                 defaultOperator={defaultOperator}
+                                 handleRemoveQuickFilterField={null} />);
+                           })
+                        }
+                        {/* vertical rule */}
+                        <Box display="inline-block" borderLeft={`1px solid ${borderGray}`} height="1.75rem" width="1px" marginRight="0.5rem" position="relative" top="0.5rem" />
+                        {
+                           tableMetaData && quickFilterFieldNames?.map((fieldName) =>
+                           {
+                              const [field] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+                              let defaultOperator = getDefaultOperatorForField(field);
+
+                              return (defaultQuickFilterFieldNameMap[fieldName] ? null : <QuickFilter
+                                 key={fieldName}
+                                 fullFieldName={fieldName}
+                                 tableMetaData={tableMetaData}
+                                 updateCriteria={updateQuickCriteria}
+                                 criteriaParam={getQuickCriteriaParam(fieldName)}
+                                 fieldMetaData={field}
+                                 defaultOperator={defaultOperator}
+                                 handleRemoveQuickFilterField={handleRemoveQuickFilterField} />);
+                           })
+                        }
+                        {
+                           tableMetaData && <FieldListMenu
+                              key={JSON.stringify(quickFilterFieldNames)} // use a unique key each time we open it, because we don't want the user's last selection to stick.
+                              idPrefix="addQuickFilter"
+                              tableMetaData={tableMetaData}
+                              fieldNamesToHide={[...(defaultQuickFilterFieldNames ?? []), ...(quickFilterFieldNames ?? [])]}
+                              placeholder="Search Fields"
+                              buttonProps={{sx: quickFilterButtonStyles, startIcon: (<Icon>add</Icon>)}}
+                              buttonChildren={"Add Filter"}
+                              isModeSelectOne={true}
+                              handleSelectedField={handleFieldListMenuSelection}
+                           />
+                        }
+                     </>
+                  </Box>
+                  <Box>
+                     {sortMenuComponent}
+                  </Box>
+               </Box>
+            }
+            {
+               //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               // advanced mode - 2 rows - one for Filter Builder button & sort control, 2nd row for the filter-detail box //
+               //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               metaData && tableMetaData && mode == "advanced" &&
+               <Box borderRadius="0.75rem" border={`1px solid ${borderGray}`}>
+                  <Box display="flex" justifyContent="space-between" alignItems="center">
+                     <Box p="0.5rem">
+                        <Tooltip enterDelay={500} title="Build an advanced Filter" placement="top">
+                           <>
+                              <Button
+                                 className="filterBuilderButton"
+                                 onClick={(e) => openFilterBuilder(e)}
+                                 {... filterBuilderMouseEvents}
+                                 startIcon={<Icon>build</Icon>}
+                                 sx={{borderRadius: "0.75rem", padding: "0.5rem", pl: "1rem", fontSize: "0.875rem", fontWeight: 500, border: `1px solid ${accentColor}`, textTransform: "none"}}
+                              >
+                                 Filter Builder
+                                 {
+                                    countValidCriteria(queryFilter) > 0 &&
+                                    <Box {... filterBuilderMouseEvents} sx={{backgroundColor: accentColor, marginLeft: "0.25rem", minWidth: "1rem", fontSize: "0.75rem"}} borderRadius="50%" color="#FFFFFF" position="relative" top="-2px" className="filterBuilderCountBadge">
+                                       {countValidCriteria(queryFilter) }
+                                    </Box>
+                                 }
+                              </Button>
+                              {
+                                 hasValidFilters && mouseOverElement == "filterBuilderButton" && <span {... filterBuilderMouseEvents} className="filterBuilderXIcon"><XIcon shade="accent" position="default" onClick={() => setShowClearFiltersWarning(true)} /></span>
+                              }
+                           </>
+                        </Tooltip>
+                        <Dialog open={showClearFiltersWarning} onClose={() => setShowClearFiltersWarning(false)} onKeyPress={(e) => handleClearFiltersAction(e)}>
+                           <DialogTitle id="alert-dialog-title">Confirm</DialogTitle>
+                           <DialogContent>
+                              <DialogContentText>Are you sure you want to remove all conditions from the current filter?</DialogContentText>
+                           </DialogContent>
+                           <DialogActions>
+                              <QCancelButton label="No" disabled={false} onClickHandler={() => setShowClearFiltersWarning(false)} />
+                              <QSaveButton label="Yes" iconName="check" disabled={false} onClickHandler={() => handleClearFiltersAction(null, true)} />
+                           </DialogActions>
+                        </Dialog>
+                     </Box>
+                     <Box pr={"0.5rem"}>
+                        {sortMenuComponent}
+                     </Box>
+                  </Box>
+                  <Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
+                     {
+                        <Box
+                           className="advancedQueryString"
+                           display="inline-block"
+                           borderTop={`1px solid ${borderGray}`}
+                           borderRadius="0 0 0.75rem 0.75rem"
+                           width="100%"
+                           sx={{fontSize: "1rem", background: "#FFFFFF"}}
+                           minHeight={"2.375rem"}
+                           p={"0.5rem"}
+                           pb={"0.125rem"}
+                           boxShadow={"inset 0px 0px 4px 2px #EFEFED"}
+                        >
+                           {queryToAdvancedString()}
+                        </Box>
+                     }
+                  </Box>
+               </Box>
+            }
+         </Box>
+      </Box>
+   );
+});
+
+export function getDefaultQuickFilterFieldNames(table: QTableMetaData): string[]
+{
+   const defaultQuickFilterFieldNames: string[] = [];
+
+   //////////////////////////////////////////////////////////////////////////////////////////////////
+   // check if there's materialDashboard tableMetaData, and if it has defaultQuickFilterFieldNames //
+   //////////////////////////////////////////////////////////////////////////////////////////////////
+   const mdbMetaData = table?.supplementalTableMetaData?.get("materialDashboard");
+   if (mdbMetaData)
+   {
+      if (mdbMetaData?.defaultQuickFilterFieldNames?.length)
+      {
+         for (let i = 0; i < mdbMetaData.defaultQuickFilterFieldNames.length; i++)
+         {
+            defaultQuickFilterFieldNames.push(mdbMetaData.defaultQuickFilterFieldNames[i]);
+         }
+      }
+   }
+
+   /////////////////////////////////////////////
+   // if still none, then look for T1 section //
+   /////////////////////////////////////////////
+   if (defaultQuickFilterFieldNames.length == 0)
+   {
+      if (table.sections)
+      {
+         const t1Sections = table.sections.filter((s: QTableSection) => s.tier == "T1");
+         if (t1Sections.length)
+         {
+            for (let i = 0; i < t1Sections.length; i++)
+            {
+               if (t1Sections[i].fieldNames)
+               {
+                  for (let j = 0; j < t1Sections[i].fieldNames.length; j++)
+                  {
+                     defaultQuickFilterFieldNames.push(t1Sections[i].fieldNames[j]);
+                  }
+               }
+            }
+         }
+      }
+   }
+
+   return (defaultQuickFilterFieldNames);
+}
+
+export default BasicAndAdvancedQueryControls;

src/qqq/components/query/CustomPaginationComponent.tsx

@@ -0,0 +1,122 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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 {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {TablePagination} from "@mui/material";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import {GridRowsProp} from "@mui/x-data-grid-pro";
+import React from "react";
+import CustomWidthTooltip from "qqq/components/tooltips/CustomWidthTooltip";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+interface CustomPaginationProps
+{
+   tableMetaData: QTableMetaData;
+   rows: GridRowsProp[];
+   totalRecords: number;
+   distinctRecords: number;
+   pageNumber: number;
+   rowsPerPage: number;
+   loading: boolean;
+   isJoinMany: boolean;
+   handlePageChange: (value: number) => void;
+   handleRowsPerPageChange: (value: number) => void;
+}
+
+/*******************************************************************************
+ ** DataGrid custom component - for pagination!
+ *******************************************************************************/
+export default function CustomPaginationComponent({tableMetaData, rows, totalRecords, distinctRecords, pageNumber, rowsPerPage, loading, isJoinMany, handlePageChange, handleRowsPerPageChange}: CustomPaginationProps): JSX.Element
+{
+   // @ts-ignore
+   const defaultLabelDisplayedRows = ({from, to, count}) =>
+   {
+      const tooltipHTML = <>
+         The number of rows shown on this screen may be greater than the number of {tableMetaData?.label} records
+         that match your query, because you have included fields from other tables which may have
+         more than one record associated with each {tableMetaData?.label}.
+      </>
+      let distinctPart = isJoinMany ? (<Box display="inline" component="span" textAlign="right">
+         &nbsp;({ValueUtils.safeToLocaleString(distinctRecords)} distinct<CustomWidthTooltip title={tooltipHTML}>
+            <IconButton sx={{p: 0, pl: 0.25, mb: 0.25}}><Icon fontSize="small" sx={{fontSize: "1.125rem !important", color: "#9f9f9f"}}>info_outlined</Icon></IconButton>
+         </CustomWidthTooltip>
+         )
+      </Box>) : <></>;
+
+      if (tableMetaData && !tableMetaData.capabilities.has(Capability.TABLE_COUNT))
+      {
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // to avoid a non-countable table showing (this is what data-grid did) 91-100 even if there were only 95 records, //
+         // we'll do this... not quite good enough, but better than the original                                           //
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         if (rows.length > 0 && rows.length < to - from)
+         {
+            to = from + rows.length;
+         }
+         return (`Showing ${from.toLocaleString()} to ${to.toLocaleString()}`);
+      }
+
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // treat -1 as the sentinel that it's set as below -- remember, we did that so that 'to' would have a value in here when there's no count. //
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      if (count !== null && count !== undefined && count !== -1)
+      {
+         if (count === 0)
+         {
+            return (loading ? "Counting..." : "No rows");
+         }
+
+         return <span>
+            Showing {from.toLocaleString()} to {to.toLocaleString()} of
+            {
+               count == -1 ?
+                  <>more than {to.toLocaleString()}</>
+                  : <> {count.toLocaleString()}{distinctPart}</>
+            }
+         </span>;
+      }
+      else
+      {
+         return ("Counting...");
+      }
+   };
+
+
+   return (
+      <TablePagination
+         component="div"
+         sx={{minWidth: "450px"}}
+         // note - passing null here makes the 'to' param in the defaultLabelDisplayedRows also be null,
+         // so pass a sentinel value of -1...
+         count={totalRecords === null || totalRecords === undefined ? -1 : totalRecords}
+         page={pageNumber}
+         rowsPerPageOptions={[10, 25, 50, 100, 250]}
+         rowsPerPage={rowsPerPage}
+         onPageChange={(event, value) => handlePageChange(value)}
+         onRowsPerPageChange={(event) => handleRowsPerPageChange(Number(event.target.value))}
+         labelDisplayedRows={defaultLabelDisplayedRows}
+      />
+   );
+
+}

src/qqq/components/query/ExportMenuItem.tsx

@@ -0,0 +1,131 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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 {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import MenuItem from "@mui/material/MenuItem";
+import {GridColDef, GridExportMenuItemProps} from "@mui/x-data-grid-pro";
+import React from "react";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+interface QExportMenuItemProps extends GridExportMenuItemProps<{}>
+{
+   tableMetaData: QTableMetaData;
+   totalRecords: number
+   columnsModel: GridColDef[];
+   columnVisibilityModel: { [index: string]: boolean };
+   queryFilter: QQueryFilter;
+   format: string;
+}
+
+/*******************************************************************************
+ ** Component to serve as an item in the Export menu
+ *******************************************************************************/
+export default function ExportMenuItem(props: QExportMenuItemProps)
+{
+   const {format, tableMetaData, totalRecords, columnsModel, columnVisibilityModel, queryFilter, hideMenu} = props;
+
+   return (
+      <MenuItem
+         disabled={totalRecords === 0}
+         onClick={() =>
+         {
+            ///////////////////////////////////////////////////////////////////////////////
+            // build the list of visible fields.  note, not doing them in-order (in case //
+            // the user did drag & drop), because column order model isn't right yet     //
+            // so just doing them to match columns (which were pKey, then sorted)        //
+            ///////////////////////////////////////////////////////////////////////////////
+            const visibleFields: string[] = [];
+            columnsModel.forEach((gridColumn) =>
+            {
+               const fieldName = gridColumn.field;
+               if (columnVisibilityModel[fieldName] !== false)
+               {
+                  visibleFields.push(fieldName);
+               }
+            });
+
+            //////////////////////////////////////
+            // construct the url for the export //
+            //////////////////////////////////////
+            const dateString = ValueUtils.formatDateTimeForFileName(new Date());
+            const filename = `${tableMetaData.label} Export ${dateString}.${format}`;
+            const url = `/data/${tableMetaData.name}/export/${filename}`;
+
+            const encodedFilterJSON = encodeURIComponent(JSON.stringify(queryFilter));
+
+            //////////////////////////////////////////////////////////////////////////////////////
+            // open a window (tab) with a little page that says the file is being generated.    //
+            // then have that page load the url for the export.                                 //
+            // If there's an error, it'll appear in that window.  else, the file will download. //
+            //////////////////////////////////////////////////////////////////////////////////////
+            const exportWindow = window.open("", "_blank");
+            exportWindow.document.write(`<html lang="en">
+                  <head>
+                     <style>
+                        * { font-family: "SF Pro Display","Roboto","Helvetica","Arial",sans-serif; }
+                     </style>
+                     <title>${filename}</title>
+                     <script>
+                        setTimeout(() =>
+                        {
+                           //////////////////////////////////////////////////////////////////////////////////////////////////
+                           // need to encode and decode this value, so set it in the form here, instead of literally below //
+                           //////////////////////////////////////////////////////////////////////////////////////////////////
+                           document.getElementById("filter").value = decodeURIComponent("${encodedFilterJSON}");
+                           
+                           document.getElementById("exportForm").submit();
+                        }, 1);
+                     </script>
+                  </head>
+                  <body>
+                     Generating file <u>${filename}</u>${totalRecords ? " with " + totalRecords.toLocaleString() + " record" + (totalRecords == 1 ? "" : "s") : ""}...
+                     <form id="exportForm" method="post" action="${url}" enctype="multipart/form-data">
+                        <input type="hidden" name="fields" value="${visibleFields.join(",")}">
+                        <input type="hidden" name="filter" id="filter">
+                     </form>
+                  </body>
+               </html>`);
+
+            /*
+            // todo - probably better - generate the report in an iframe...
+            // only open question is, giving user immediate feedback, and knowing when the stream has started and/or stopped
+            // maybe a busy-loop that would check iframe's url (e.g., after posting should change, maybe?)
+            const iframe = document.getElementById("exportIFrame");
+            const form = iframe.querySelector("form");
+            form.action = url;
+            form.target = "exportIFrame";
+            (iframe.querySelector("#authorizationInput") as HTMLInputElement).value = qController.getAuthorizationHeaderValue();
+            form.submit();
+            */
+
+            ///////////////////////////////////////////
+            // Hide the export menu after the export //
+            ///////////////////////////////////////////
+            hideMenu?.();
+         }}
+      >
+         Export
+         {` ${format.toUpperCase()}`}
+      </MenuItem>
+   );
+}
+

src/qqq/components/query/FieldListMenu.tsx

@@ -0,0 +1,736 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import List from "@mui/material/List/List";
+import ListItem, {ListItemProps} from "@mui/material/ListItem/ListItem";
+import Menu from "@mui/material/Menu";
+import Switch from "@mui/material/Switch";
+import TextField from "@mui/material/TextField";
+import React, {useState} from "react";
+
+interface FieldListMenuProps
+{
+   idPrefix: string;
+   heading?: string;
+   placeholder?: string;
+   tableMetaData: QTableMetaData;
+   showTableHeaderEvenIfNoExposedJoins: boolean;
+   fieldNamesToHide?: string[];
+   buttonProps: any;
+   buttonChildren: JSX.Element | string;
+
+   isModeSelectOne?: boolean;
+   handleSelectedField?: (field: QFieldMetaData, table: QTableMetaData) => void;
+
+   isModeToggle?: boolean;
+   toggleStates?: {[fieldName: string]: boolean};
+   handleToggleField?: (field: QFieldMetaData, table: QTableMetaData, newValue: boolean) => void;
+
+   fieldEndAdornment?: JSX.Element
+   handleAdornmentClick?: (field: QFieldMetaData, table: QTableMetaData, event: React.MouseEvent<any>) => void;
+}
+
+FieldListMenu.defaultProps = {
+   showTableHeaderEvenIfNoExposedJoins: false,
+   isModeSelectOne: false,
+   isModeToggle: false,
+};
+
+interface TableWithFields
+{
+   table?: QTableMetaData;
+   fields: QFieldMetaData[];
+}
+
+/*******************************************************************************
+ ** Component to render a list of fields from a table (and its join tables)
+ ** which can be interacted with...
+ *******************************************************************************/
+export default function FieldListMenu({idPrefix, heading, placeholder, tableMetaData, showTableHeaderEvenIfNoExposedJoins, buttonProps, buttonChildren, isModeSelectOne, fieldNamesToHide, handleSelectedField, isModeToggle, toggleStates, handleToggleField, fieldEndAdornment, handleAdornmentClick}: FieldListMenuProps): JSX.Element
+{
+   const [menuAnchorElement, setMenuAnchorElement] = useState(null);
+   const [searchText, setSearchText] = useState("");
+   const [focusedIndex, setFocusedIndex] = useState(null as number);
+
+   const [fieldsByTable, setFieldsByTable] = useState([] as TableWithFields[]);
+   const [collapsedTables, setCollapsedTables] = useState({} as {[tableName: string]: boolean});
+
+   const [lastMouseOverXY, setLastMouseOverXY] = useState({x: 0, y: 0});
+   const [timeOfLastArrow, setTimeOfLastArrow] = useState(0)
+
+   //////////////////
+   // check usages //
+   //////////////////
+   if(isModeSelectOne)
+   {
+      if(!handleSelectedField)
+      {
+         throw("In FieldListMenu, if isModeSelectOne=true, then a callback for handleSelectedField must be provided.");
+      }
+   }
+
+   if(isModeToggle)
+   {
+      if(!toggleStates)
+      {
+         throw("In FieldListMenu, if isModeToggle=true, then a model for toggleStates must be provided.");
+      }
+      if(!handleToggleField)
+      {
+         throw("In FieldListMenu, if isModeToggle=true, then a callback for handleToggleField must be provided.");
+      }
+   }
+
+   /////////////////////
+   // init some stuff //
+   /////////////////////
+   if (fieldsByTable.length == 0)
+   {
+      collapsedTables[tableMetaData.name] = false;
+
+      if (tableMetaData.exposedJoins?.length > 0)
+      {
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // if we have exposed joins, put the table meta data with its fields, and then all of the join tables & fields too //
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         fieldsByTable.push({table: tableMetaData, fields: getTableFieldsAsAlphabeticalArray(tableMetaData)});
+
+         for (let i = 0; i < tableMetaData.exposedJoins?.length; i++)
+         {
+            const joinTable = tableMetaData.exposedJoins[i].joinTable;
+            fieldsByTable.push({table: joinTable, fields: getTableFieldsAsAlphabeticalArray(joinTable)});
+
+            collapsedTables[joinTable.name] = false;
+         }
+      }
+      else
+      {
+         ///////////////////////////////////////////////////////////
+         // no exposed joins - just the table (w/o its meta-data) //
+         ///////////////////////////////////////////////////////////
+         fieldsByTable.push({fields: getTableFieldsAsAlphabeticalArray(tableMetaData)});
+      }
+
+      setFieldsByTable(fieldsByTable);
+      setCollapsedTables(collapsedTables);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getTableFieldsAsAlphabeticalArray(table: QTableMetaData): QFieldMetaData[]
+   {
+      const fields: QFieldMetaData[] = [];
+      table.fields.forEach(field =>
+      {
+         let fullFieldName = field.name;
+         if(table.name != tableMetaData.name)
+         {
+            fullFieldName = `${table.name}.${field.name}`;
+         }
+
+         if(fieldNamesToHide && fieldNamesToHide.indexOf(fullFieldName) > -1)
+         {
+            return;
+         }
+         fields.push(field)
+      });
+      fields.sort((a, b) => a.label.localeCompare(b.label));
+      return (fields);
+   }
+
+   const fieldsByTableToShow: TableWithFields[] = [];
+   let maxFieldIndex = 0;
+   fieldsByTable.forEach((tableWithFields) =>
+   {
+      let fieldsToShowForThisTable = tableWithFields.fields.filter(doesFieldMatchSearchText);
+      if (fieldsToShowForThisTable.length > 0)
+      {
+         fieldsByTableToShow.push({table: tableWithFields.table, fields: fieldsToShowForThisTable});
+         maxFieldIndex += fieldsToShowForThisTable.length;
+      }
+   });
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getShownFieldAndTableByIndex(targetIndex: number): {field: QFieldMetaData, table: QTableMetaData}
+   {
+      let index = -1;
+      for (let i = 0; i < fieldsByTableToShow.length; i++)
+      {
+         const tableWithField = fieldsByTableToShow[i];
+         for (let j = 0; j < tableWithField.fields.length; j++)
+         {
+            index++;
+
+            if(index == targetIndex)
+            {
+               return {field: tableWithField.fields[j], table: tableWithField.table}
+            }
+         }
+      }
+
+      return (null);
+   }
+
+
+   /*******************************************************************************
+    ** event handler for keys presses
+    *******************************************************************************/
+   function keyDown(event: any)
+   {
+      // console.log(`Event key: ${event.key}`);
+      setTimeout(() => document.getElementById(`field-list-dropdown-${idPrefix}-textField`).focus());
+
+      if(isModeSelectOne && event.key == "Enter" && focusedIndex != null)
+      {
+         setTimeout(() =>
+         {
+            event.stopPropagation();
+            closeMenu();
+
+            const {field, table} = getShownFieldAndTableByIndex(focusedIndex);
+            if (field)
+            {
+               handleSelectedField(field, table ?? tableMetaData);
+            }
+         });
+         return;
+      }
+
+      const keyOffsetMap: { [key: string]: number } = {
+         "End": 10000,
+         "Home": -10000,
+         "ArrowDown": 1,
+         "ArrowUp": -1,
+         "PageDown": 5,
+         "PageUp": -5,
+      };
+
+      const offset = keyOffsetMap[event.key];
+      if (offset)
+      {
+         event.stopPropagation();
+         setTimeOfLastArrow(new Date().getTime());
+
+         if (isModeSelectOne)
+         {
+            let startIndex = focusedIndex;
+            if (offset > 0)
+            {
+               /////////////////
+               // a down move //
+               /////////////////
+               if(startIndex == null)
+               {
+                  startIndex = -1;
+               }
+
+               let goalIndex = startIndex + offset;
+               if(goalIndex > maxFieldIndex - 1)
+               {
+                  goalIndex = maxFieldIndex - 1;
+               }
+
+               doSetFocusedIndex(goalIndex, true);
+            }
+            else
+            {
+               ////////////////
+               // an up move //
+               ////////////////
+               let goalIndex = startIndex + offset;
+               if(goalIndex < 0)
+               {
+                  goalIndex = 0;
+               }
+
+               doSetFocusedIndex(goalIndex, true);
+            }
+         }
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function doSetFocusedIndex(i: number, tryToScrollIntoView: boolean): void
+   {
+      if (isModeSelectOne)
+      {
+         setFocusedIndex(i);
+         console.log(`Setting index to ${i}`);
+
+         if (tryToScrollIntoView)
+         {
+            const element = document.getElementById(`field-list-dropdown-${idPrefix}-${i}`);
+            element?.scrollIntoView({block: "center"});
+         }
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function setFocusedField(field: QFieldMetaData, table: QTableMetaData, tryToScrollIntoView: boolean)
+   {
+      let index = -1;
+      for (let i = 0; i < fieldsByTableToShow.length; i++)
+      {
+         const tableWithField = fieldsByTableToShow[i];
+         for (let j = 0; j < tableWithField.fields.length; j++)
+         {
+            const loopField = tableWithField.fields[j];
+            index++;
+
+            const tableMatches = (table == null || table.name == tableWithField.table.name);
+            if (tableMatches && field.name == loopField.name)
+            {
+               doSetFocusedIndex(index, tryToScrollIntoView);
+               return;
+            }
+         }
+      }
+   }
+
+
+   /*******************************************************************************
+    ** event handler for mouse-over the menu
+    *******************************************************************************/
+   function handleMouseOver(event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLDivElement> | React.MouseEvent<HTMLLIElement>, field: QFieldMetaData, table: QTableMetaData)
+   {
+      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // so we're trying to fix the case where, if you put your mouse over an element, but then press up/down arrows,                                     //
+      // where the mouse will become over a different element after the scroll, and the focus will follow the mouse instead of keyboard.                  //
+      // the last x/y isn't really useful, because the mouse generally isn't left exactly where it was when the mouse-over happened (edge of the element) //
+      // but the keyboard last-arrow time that we capture, that's what's actually being useful in here                                                    //
+      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      if(event.clientX == lastMouseOverXY.x && event.clientY == lastMouseOverXY.y)
+      {
+         // console.log("mouse didn't move, so, doesn't count");
+         return;
+      }
+
+      const now = new Date().getTime();
+      // console.log(`Compare now [${now}] to last arrow [${timeOfLastArrow}] (diff: [${now - timeOfLastArrow}])`);
+      if(now < timeOfLastArrow + 300)
+      {
+         // console.log("An arrow event happened less than 300 mills ago, so doesn't count.");
+         return;
+      }
+
+      // console.log("yay, mouse over...");
+      setFocusedField(field, table, false);
+      setLastMouseOverXY({x: event.clientX, y: event.clientY});
+   }
+
+
+   /*******************************************************************************
+    ** event handler for text input changes
+    *******************************************************************************/
+   function updateSearch(event: React.ChangeEvent<HTMLInputElement>)
+   {
+      setSearchText(event?.target?.value ?? "");
+      doSetFocusedIndex(0, true);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function doesFieldMatchSearchText(field: QFieldMetaData): boolean
+   {
+      if (searchText == "")
+      {
+         return (true);
+      }
+
+      const columnLabelMinusTable = field.label.replace(/.*: /, "");
+      if (columnLabelMinusTable.toLowerCase().startsWith(searchText.toLowerCase()))
+      {
+         return (true);
+      }
+
+      try
+      {
+         ////////////////////////////////////////////////////////////
+         // try to match word-boundary followed by the filter text //
+         // e.g., "name" would match "First Name" or "Last Name"   //
+         ////////////////////////////////////////////////////////////
+         const re = new RegExp("\\b" + searchText.toLowerCase());
+         if (columnLabelMinusTable.toLowerCase().match(re))
+         {
+            return (true);
+         }
+      }
+      catch (e)
+      {
+         //////////////////////////////////////////////////////////////////////////////////
+         // in case text is an invalid regex... well, at least do a starts-with match... //
+         //////////////////////////////////////////////////////////////////////////////////
+         if (columnLabelMinusTable.toLowerCase().startsWith(searchText.toLowerCase()))
+         {
+            return (true);
+         }
+      }
+
+      const tableLabel = field.label.replace(/:.*/, "");
+      if (tableLabel)
+      {
+         try
+         {
+            ////////////////////////////////////////////////////////////
+            // try to match word-boundary followed by the filter text //
+            // e.g., "name" would match "First Name" or "Last Name"   //
+            ////////////////////////////////////////////////////////////
+            const re = new RegExp("\\b" + searchText.toLowerCase());
+            if (tableLabel.toLowerCase().match(re))
+            {
+               return (true);
+            }
+         }
+         catch (e)
+         {
+            //////////////////////////////////////////////////////////////////////////////////
+            // in case text is an invalid regex... well, at least do a starts-with match... //
+            //////////////////////////////////////////////////////////////////////////////////
+            if (tableLabel.toLowerCase().startsWith(searchText.toLowerCase()))
+            {
+               return (true);
+            }
+         }
+      }
+
+      return (false);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openMenu(event: any)
+   {
+      setFocusedIndex(null);
+      setMenuAnchorElement(event.currentTarget);
+      setTimeout(() =>
+      {
+         document.getElementById(`field-list-dropdown-${idPrefix}-textField`).focus();
+         doSetFocusedIndex(0, true);
+      });
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function closeMenu()
+   {
+      setMenuAnchorElement(null);
+   }
+
+
+   /*******************************************************************************
+    ** Event handler for toggling a field in toggle mode
+    *******************************************************************************/
+   function handleFieldToggle(event: React.ChangeEvent<HTMLInputElement>, field: QFieldMetaData, table: QTableMetaData)
+   {
+      event.stopPropagation();
+      handleToggleField(field, table, event.target.checked);
+   }
+
+
+   /*******************************************************************************
+    ** Event handler for toggling a table in toggle mode
+    *******************************************************************************/
+   function handleTableToggle(event: React.ChangeEvent<HTMLInputElement>, table: QTableMetaData)
+   {
+      event.stopPropagation();
+
+      const fieldsList = [...table.fields.values()];
+      for (let i = 0; i < fieldsList.length; i++)
+      {
+         const field = fieldsList[i];
+         if(doesFieldMatchSearchText(field))
+         {
+            handleToggleField(field, table, event.target.checked);
+         }
+      }
+   }
+
+
+   /////////////////////////////////////////////////////////
+   // compute the table-level toggle state & count values //
+   /////////////////////////////////////////////////////////
+   const tableToggleStates: {[tableName: string]: boolean} = {};
+   const tableToggleCounts: {[tableName: string]: number} = {};
+
+   if(isModeToggle)
+   {
+      const {allOn, count} = getTableToggleState(tableMetaData, true);
+      tableToggleStates[tableMetaData.name] = allOn;
+      tableToggleCounts[tableMetaData.name] = count;
+
+      for (let i = 0; i < tableMetaData.exposedJoins?.length; i++)
+      {
+         const join = tableMetaData.exposedJoins[i];
+         const {allOn, count} = getTableToggleState(join.joinTable, false);
+         tableToggleStates[join.joinTable.name] = allOn;
+         tableToggleCounts[join.joinTable.name] = count;
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getTableToggleState(table: QTableMetaData, isMainTable: boolean): {allOn: boolean, count: number}
+   {
+      const fieldsList = [...table.fields.values()];
+      let allOn = true;
+      let count = 0;
+      for (let i = 0; i < fieldsList.length; i++)
+      {
+         const field = fieldsList[i];
+         const name = isMainTable ? field.name : `${table.name}.${field.name}`;
+         if(!toggleStates[name])
+         {
+            allOn = false;
+         }
+         else
+         {
+            count++;
+         }
+      }
+
+      return ({allOn: allOn, count: count});
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function toggleCollapsedTable(tableName: string)
+   {
+      collapsedTables[tableName] = !collapsedTables[tableName]
+      setCollapsedTables(Object.assign({}, collapsedTables));
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function doHandleAdornmentClick(field: QFieldMetaData, table: QTableMetaData, event: React.MouseEvent<any>)
+   {
+      console.log("In doHandleAdornmentClick");
+      closeMenu();
+      handleAdornmentClick(field, table, event);
+   }
+
+
+   let index = -1;
+   const textFieldId = `field-list-dropdown-${idPrefix}-textField`;
+   let listItemPadding = isModeToggle ? "0.125rem": "0.5rem";
+
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // for z-indexes, we set each table header to i+1, then the fields in that table to i (so they go behind it) //
+   // then we increment i by 2 for the next table (so the next header goes above the previous header)           //
+   // this fixes a thing where, if one table's name wrapped to 2 lines, then when the next table below it would //
+   // come up, if it was only 1 line, then the second line from the previous one would bleed through.           //
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   let zIndex = 1;
+
+   return (
+      <>
+         <Button onClick={openMenu} {...buttonProps}>
+            {buttonChildren}
+         </Button>
+         <Menu
+            anchorEl={menuAnchorElement}
+            anchorOrigin={{vertical: "bottom", horizontal: "left"}}
+            transformOrigin={{vertical: "top", horizontal: "left"}}
+            open={menuAnchorElement != null}
+            onClose={closeMenu}
+            onKeyDown={keyDown} // this is added here so arrow-key-up/down events don't make the whole menu become "focused" (blue outline).  it works.
+            keepMounted
+         >
+            <Box width={isModeToggle ? "305px" : "265px"} borderRadius={2} className={`fieldListMenuBody fieldListMenuBody-${idPrefix}`}>
+               {
+                  heading &&
+                  <Box px={1} py={0.5} fontWeight={"700"}>
+                     {heading}
+                  </Box>
+               }
+               <Box p={1} pt={0.5}>
+                  <TextField id={textFieldId} variant="outlined" placeholder={placeholder ?? "Search Fields"} fullWidth value={searchText} onChange={updateSearch} onKeyDown={keyDown} inputProps={{sx: {pr: "2rem"}}} />
+                  {
+                     searchText != "" && <IconButton sx={{position: "absolute", right: "0.5rem", top: "0.5rem"}} onClick={() =>
+                     {
+                        updateSearch(null);
+                        document.getElementById(textFieldId).focus();
+                     }}><Icon fontSize="small">close</Icon></IconButton>
+                  }
+               </Box>
+               <Box maxHeight={"445px"} overflow="auto" mr={"-0.5rem"} sx={{scrollbarGutter: "stable"}}>
+                  <List sx={{px: "0.5rem", cursor: "default"}}>
+                     {
+                        fieldsByTableToShow.map((tableWithFields) =>
+                        {
+                           let headerContents = null;
+                           const headerTable = tableWithFields.table || tableMetaData;
+                           if(tableWithFields.table || showTableHeaderEvenIfNoExposedJoins)
+                           {
+                              headerContents = (<b>{headerTable.label} Fields</b>);
+                           }
+
+                           if(isModeToggle)
+                           {
+                              headerContents = (<FormControlLabel
+                                 sx={{display: "flex", alignItems: "flex-start", "& .MuiFormControlLabel-label": {lineHeight: "1.4", fontWeight: "500 !important"}}}
+                                 control={<Switch
+                                    size="small"
+                                    sx={{top: "1px"}}
+                                    checked={tableToggleStates[headerTable.name]}
+                                    onChange={(event) => handleTableToggle(event, headerTable)}
+                                 />}
+                                 label={<span style={{marginTop: "0.25rem", display: "inline-block"}}><b>{headerTable.label} Fields</b>&nbsp;<span style={{fontWeight: 400}}>({tableToggleCounts[headerTable.name]})</span></span>} />)
+                           }
+
+                           if(isModeToggle)
+                           {
+                              headerContents = (
+                                 <>
+                                    <IconButton
+                                       onClick={() => toggleCollapsedTable(headerTable.name)}
+                                       sx={{justifyContent: "flex-start", fontSize: "0.875rem", pt: 0.5, pb: 0, mr: "0.25rem"}}
+                                       disableRipple={true}
+                                    >
+                                       <Icon sx={{fontSize: "1.5rem !important", position: "relative", top: "2px"}}>{collapsedTables[headerTable.name] ? "expand_less" : "expand_more"}</Icon>
+                                    </IconButton>
+                                    {headerContents}
+                                 </>
+                              )
+                           }
+
+                           let marginLeft = "unset";
+                           if(isModeToggle)
+                           {
+                              marginLeft = "-1rem";
+                           }
+
+                           zIndex += 2;
+
+                           return (
+                              <React.Fragment key={tableWithFields.table?.name ?? "theTable"}>
+                                 <>
+                                    {headerContents && <ListItem sx={{position: "sticky", top: -1, zIndex: zIndex+1, padding: listItemPadding, ml: marginLeft, display: "flex", alignItems: "flex-start", backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,1) 90%, rgba(255,255,255,0))"}}>{headerContents}</ListItem>}
+                                    {
+                                       tableWithFields.fields.map((field) =>
+                                       {
+                                          index++;
+                                          const key = `${tableWithFields.table?.name}-${field.name}`
+
+                                          if(collapsedTables[headerTable.name])
+                                          {
+                                             return (<React.Fragment key={key} />);
+                                          }
+
+                                          let style = {};
+                                          if (index == focusedIndex)
+                                          {
+                                             style = {backgroundColor: "#EFEFEF"};
+                                          }
+
+                                          const onClick: ListItemProps = {};
+                                          if (isModeSelectOne)
+                                          {
+                                             onClick.onClick = () =>
+                                             {
+                                                closeMenu();
+                                                handleSelectedField(field, tableWithFields.table ?? tableMetaData);
+                                             }
+                                          }
+
+                                          let label: JSX.Element | string = field.label;
+                                          const fullFieldName = tableWithFields.table && tableWithFields.table.name != tableMetaData.name ? `${tableWithFields.table.name}.${field.name}` : field.name;
+
+                                          if(fieldEndAdornment)
+                                          {
+                                             label = <Box width="100%" display="inline-flex" justifyContent="space-between">
+                                                {label}
+                                                <Box onClick={(event) => doHandleAdornmentClick(field, tableWithFields.table, event)}>
+                                                   {fieldEndAdornment}
+                                                </Box>
+                                             </Box>;
+                                          }
+
+                                          let contents = <>{label}</>;
+                                          let paddingLeft = "0.5rem";
+
+                                          if (isModeToggle)
+                                          {
+                                             contents = (<FormControlLabel
+                                                sx={{display: "flex", alignItems: "flex-start", "& .MuiFormControlLabel-label": {lineHeight: "1.4", color: "#606060", fontWeight: "500 !important"}}}
+                                                control={<Switch
+                                                   size="small"
+                                                   sx={{top: "-3px"}}
+                                                   checked={toggleStates[fullFieldName]}
+                                                   onChange={(event) => handleFieldToggle(event, field, tableWithFields.table)}
+                                                />}
+                                                label={label} />);
+                                             paddingLeft = "2.5rem";
+                                          }
+
+                                          return <ListItem
+                                             key={key}
+                                             id={`field-list-dropdown-${idPrefix}-${index}`}
+                                             sx={{color: "#757575", p: 1, borderRadius: ".5rem", padding: listItemPadding, pl: paddingLeft, scrollMarginTop: "3rem", zIndex: zIndex, background: "#FFFFFF", ...style}}
+                                             onMouseOver={(event) => handleMouseOver(event, field, tableWithFields.table)}
+                                             {...onClick}
+                                          >{contents}</ListItem>;
+                                       })
+                                    }
+                                 </>
+                              </React.Fragment>
+                           );
+                        })
+                     }
+                     {
+                        index == -1 && <ListItem sx={{p: "0.5rem"}}><i>No fields found.</i></ListItem>
+                     }
+                  </List>
+               </Box>
+            </Box>
+         </Menu>
+      </>
+   );
+}

src/qqq/components/query/FilterCriteriaRow.tsx

@@ -24,7 +24,7 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
 import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
-import Autocomplete, {AutocompleteRenderOptionState} from "@mui/material/Autocomplete";
+import Autocomplete from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
 import FormControl from "@mui/material/FormControl/FormControl";
 import Icon from "@mui/material/Icon/Icon";
@@ -34,6 +34,7 @@ import Select, {SelectChangeEvent} from "@mui/material/Select/Select";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import React, {ReactNode, SyntheticEvent, useState} from "react";
+import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
 import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 
@@ -52,6 +53,27 @@ export enum ValueMode
    PVS_MULTI = "PVS_MULTI",
 }
 
+export const getValueModeRequiredCount = (valueMode: ValueMode): number =>
+{
+   switch (valueMode)
+   {
+      case ValueMode.NONE:
+         return (0);
+      case ValueMode.SINGLE:
+      case ValueMode.SINGLE_DATE:
+      case ValueMode.SINGLE_DATE_TIME:
+      case ValueMode.PVS_SINGLE:
+         return (1);
+      case ValueMode.DOUBLE:
+      case ValueMode.DOUBLE_DATE:
+      case ValueMode.DOUBLE_DATE_TIME:
+         return (2);
+      case ValueMode.MULTI:
+      case ValueMode.PVS_MULTI:
+         return (null);
+   }
+}
+
 export interface OperatorOption
 {
    label: string;
@@ -177,16 +199,71 @@ interface FilterCriteriaRowProps
    updateBooleanOperator: (newValue: string) => void;
 }
 
-FilterCriteriaRow.defaultProps = {};
-
-function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean)
-{
-   const sortedFields = [...tableMetaData.fields.values()].sort((a, b) => a.label.localeCompare(b.label));
-   for (let i = 0; i < sortedFields.length; i++)
+FilterCriteriaRow.defaultProps =
    {
-      const fieldName = isJoinTable ? `${tableMetaData.name}.${sortedFields[i].name}` : sortedFields[i].name;
-      fieldOptions.push({field: sortedFields[i], table: tableMetaData, fieldName: fieldName});
+   };
+
+export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue?: OperatorOption): {criteriaIsValid: boolean, criteriaStatusTooltip: string}
+{
+   let criteriaIsValid = true;
+   let criteriaStatusTooltip = "This condition is fully defined and is part of your filter.";
+
+   function isNotSet(value: any)
+   {
+      return (value === null || value == undefined || String(value).trim() === "");
    }
+
+   if(!criteria)
+   {
+      criteriaIsValid = false;
+      criteriaStatusTooltip = "This condition is not defined.";
+      return {criteriaIsValid, criteriaStatusTooltip};
+   }
+
+   if (!criteria.fieldName)
+   {
+      criteriaIsValid = false;
+      criteriaStatusTooltip = "You must select a field to begin to define this condition.";
+   }
+   else if (!criteria.operator)
+   {
+      criteriaIsValid = false;
+      criteriaStatusTooltip = "You must select an operator to continue to define this condition.";
+   }
+   else
+   {
+      if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
+      {
+         //////////////////////////////////
+         // don't need to look at values //
+         //////////////////////////////////
+      }
+      else if (criteria.operator == QCriteriaOperator.BETWEEN || criteria.operator == QCriteriaOperator.NOT_BETWEEN)
+      {
+         if (criteria.values.length < 2 || isNotSet(criteria.values[0]) || isNotSet(criteria.values[1]))
+         {
+            criteriaIsValid = false;
+            criteriaStatusTooltip = "You must enter two values to complete the definition of this condition.";
+         }
+      }
+      else if (criteria.operator == QCriteriaOperator.IN || criteria.operator == QCriteriaOperator.NOT_IN)
+      {
+         if (criteria.values.length < 1 || isNotSet(criteria.values[0]))
+         {
+            criteriaIsValid = false;
+            criteriaStatusTooltip = "You must enter one or more values complete the definition of this condition.";
+         }
+      }
+      else
+      {
+         if (!criteria.values || isNotSet(criteria.values[0]))
+         {
+            criteriaIsValid = false;
+            criteriaStatusTooltip = "You must enter a value to complete the definition of this condition.";
+         }
+      }
+   }
+   return {criteriaIsValid, criteriaStatusTooltip};
 }
 
 export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator}: FilterCriteriaRowProps): JSX.Element
@@ -195,27 +272,6 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
    const [operatorSelectedValue, setOperatorSelectedValue] = useState(null as OperatorOption);
    const [operatorInputValue, setOperatorInputValue] = useState("");
 
-   ///////////////////////////////////////////////////////////////
-   // set up the array of options for the fields Autocomplete   //
-   // also, a groupBy function, in case there are exposed joins //
-   ///////////////////////////////////////////////////////////////
-   const fieldOptions: any[] = [];
-   makeFieldOptionsForTable(tableMetaData, fieldOptions, false);
-   let fieldsGroupBy = null;
-
-   if (tableMetaData.exposedJoins && tableMetaData.exposedJoins.length > 0)
-   {
-      for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
-      {
-         const exposedJoin = tableMetaData.exposedJoins[i];
-         if (metaData.tables.has(exposedJoin.joinTable.name))
-         {
-            fieldsGroupBy = (option: any) => `${option.table.label} fields`;
-            makeFieldOptionsForTable(exposedJoin.joinTable, fieldOptions, true);
-         }
-      }
-   }
-
    ////////////////////////////////////////////////////////////
    // set up array of options for operator dropdown          //
    // only call the function to do it if we have a field set //
@@ -332,6 +388,24 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
          {
             criteria.values = newValue.implicitValues;
          }
+
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         // we've seen cases where switching operators can sometimes put a null in as the first value... //
+         // that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that.      //
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
+         {
+            criteria.values = [];
+         }
+
+         if(newValue.valueMode && !newValue.implicitValues)
+         {
+            const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
+            if(requiredValueCount != null && criteria.values.length > requiredValueCount)
+            {
+               criteria.values.splice(requiredValueCount);
+            }
+         }
       }
       else
       {
@@ -383,111 +457,19 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
       return (false);
    };
 
-   function isFieldOptionEqual(option: any, value: any)
-   {
-      return option.fieldName === value.fieldName;
-   }
-
-   function getFieldOptionLabel(option: any)
-   {
-      /////////////////////////////////////////////////////////////////////////////////////////
-      // note - we're using renderFieldOption below for the actual select-box options, which //
-      // are always jut field label (as they are under groupings that show their table name) //
-      /////////////////////////////////////////////////////////////////////////////////////////
-      if(option && option.field && option.table)
-      {
-         if(option.table.name == tableMetaData.name)
-         {
-            return (option.field.label);
-         }
-         else
-         {
-            return (option.table.label + ": " + option.field.label);
-         }
-      }
-
-      return ("");
-   }
-
-   //////////////////////////////////////////////////////////////////////////////////////////////
-   // for options, we only want the field label (contrast with what we show in the input box,  //
-   // which comes out of getFieldOptionLabel, which is the table-label prefix for join fields) //
-   //////////////////////////////////////////////////////////////////////////////////////////////
-   function renderFieldOption(props: React.HTMLAttributes<HTMLLIElement>, option: any, state: AutocompleteRenderOptionState): ReactNode
-   {
-      let label = ""
-      if(option && option.field)
-      {
-         label = (option.field.label);
-      }
-
-      return (<li {...props}>{label}</li>);
-   }
-
    function isOperatorOptionEqual(option: OperatorOption, value: OperatorOption)
    {
       return (option?.value == value?.value && JSON.stringify(option?.implicitValues) == JSON.stringify(value?.implicitValues));
    }
 
-   let criteriaIsValid = true;
-   let criteriaStatusTooltip = "This condition is fully defined and is part of your filter.";
+   const {criteriaIsValid, criteriaStatusTooltip} = validateCriteria(criteria, operatorSelectedValue);
 
-   function isNotSet(value: any)
-   {
-      return (value === null || value == undefined || String(value).trim() === "");
-   }
-
-   if(!criteria.fieldName)
-   {
-      criteriaIsValid = false;
-      criteriaStatusTooltip = "You must select a field to begin to define this condition.";
-   }
-   else if(!criteria.operator)
-   {
-      criteriaIsValid = false;
-      criteriaStatusTooltip = "You must select an operator to continue to define this condition.";
-   }
-   else
-   {
-      if(operatorSelectedValue)
-      {
-         if (operatorSelectedValue.valueMode == ValueMode.NONE || operatorSelectedValue.implicitValues)
-         {
-            //////////////////////////////////
-            // don't need to look at values //
-            //////////////////////////////////
-         }
-         else if(operatorSelectedValue.valueMode == ValueMode.DOUBLE || operatorSelectedValue.valueMode == ValueMode.DOUBLE_DATE || operatorSelectedValue.valueMode == ValueMode.DOUBLE_DATE_TIME)
-         {
-            if(criteria.values.length < 2 || isNotSet(criteria.values[0]) || isNotSet(criteria.values[1]))
-            {
-               criteriaIsValid = false;
-               criteriaStatusTooltip = "You must enter two values to complete the definition of this condition.";
-            }
-         }
-         else if(operatorSelectedValue.valueMode == ValueMode.MULTI || operatorSelectedValue.valueMode == ValueMode.PVS_MULTI)
-         {
-            if(criteria.values.length < 1 || isNotSet(criteria.values[0]))
-            {
-               criteriaIsValid = false;
-               criteriaStatusTooltip = "You must enter one or more values complete the definition of this condition.";
-            }
-         }
-         else
-         {
-            if(!criteria.values || isNotSet(criteria.values[0]))
-            {
-               criteriaIsValid = false;
-               criteriaStatusTooltip = "You must enter a value to complete the definition of this condition.";
-            }
-         }
-      }
-   }
+   const tooltipEnterDelay = 750;
 
    return (
-      <Box className="filterCriteriaRow" pt={0.5} display="flex" alignItems="flex-end">
+      <Box className="filterCriteriaRow" pt={0.5} display="flex" alignItems="flex-end" pr={0.5}>
          <Box display="inline-block">
-            <Tooltip title="Remove this condition from your filter" enterDelay={750} placement="left">
+            <Tooltip title="Remove this condition from your filter" enterDelay={tooltipEnterDelay} placement="left">
                <IconButton onClick={removeCriteria}><Icon fontSize="small">close</Icon></IconButton>
             </Tooltip>
          </Box>
@@ -502,24 +484,10 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
                : <span />}
          </Box>
          <Box display="inline-block" width={250} className="fieldColumn">
-            <Autocomplete
-               id={`field-${id}`}
-               renderInput={(params) => (<TextField {...params} label={"Field"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
-               // @ts-ignore
-               defaultValue={defaultFieldValue}
-               options={fieldOptions}
-               onChange={handleFieldChange}
-               isOptionEqualToValue={(option, value) => isFieldOptionEqual(option, value)}
-               groupBy={fieldsGroupBy}
-               getOptionLabel={(option) => getFieldOptionLabel(option)}
-               renderOption={(props, option, state) => renderFieldOption(props, option, state)}
-               autoSelect={true}
-               autoHighlight={true}
-               slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
-            />
+            <FieldAutoComplete id={`field-${id}`} metaData={metaData} tableMetaData={tableMetaData} defaultValue={defaultFieldValue} handleFieldChange={handleFieldChange} />
          </Box>
          <Box display="inline-block" width={200} className="operatorColumn">
-            <Tooltip title={criteria.fieldName == null ? "You must select a field before you can select an operator" : null} enterDelay={750}>
+            <Tooltip title={criteria.fieldName == null ? "You must select a field before you can select an operator" : null} enterDelay={tooltipEnterDelay}>
                <Autocomplete
                   id={"criteriaOperator"}
                   renderInput={(params) => (<TextField {...params} label={"Operator"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
@@ -546,8 +514,8 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
                valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
             />
          </Box>
-         <Box display="inline-block" pl={0.5} pr={1}>
-            <Tooltip title={criteriaStatusTooltip} enterDelay={750} placement="right">
+         <Box display="inline-block">
+            <Tooltip title={criteriaStatusTooltip} enterDelay={tooltipEnterDelay} placement="bottom">
                {
                   criteriaIsValid
                      ? <Icon color="success">check</Icon>

src/qqq/components/query/FilterCriteriaRowValues.tsx

@@ -44,9 +44,13 @@ interface Props
    field: QFieldMetaData;
    table: QTableMetaData;
    valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
+   initiallyOpenMultiValuePvs?: boolean
 }
 
-FilterCriteriaRowValues.defaultProps = {};
+FilterCriteriaRowValues.defaultProps =
+   {
+      initiallyOpenMultiValuePvs: false
+   };
 
 export const getTypeForTextField = (field: QFieldMetaData): string =>
 {
@@ -110,16 +114,17 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       InputLabelProps={inputLabelProps}
       InputProps={inputProps}
       fullWidth
+      autoFocus={true}
    />;
 };
 
-function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler}: Props): JSX.Element
+function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs}: Props): JSX.Element
 {
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    if (!operatorOption)
    {
-      return <br />;
+      return null;
    }
 
    function saveNewPasterValues(newValues: any[])
@@ -148,7 +153,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
    switch (operatorOption.valueMode)
    {
       case ValueMode.NONE:
-         return <br />;
+         return null;
       case ValueMode.SINGLE:
          return makeTextField(field, criteria, valueChangeHandler);
       case ValueMode.SINGLE_DATE:
@@ -215,6 +220,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                initialDisplayValue={selectedPossibleValue?.label}
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, 0, value)}
+               variant="standard"
             />
          </Box>;
       case ValueMode.PVS_MULTI:
@@ -240,8 +246,10 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                isMultiple
                fieldLabel="Values"
                initialValues={initialValues}
+               initiallyOpen={false /*initiallyOpenMultiValuePvs*/}
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, "all", value)}
+               variant="standard"
             />
          </Box>;
    }

src/qqq/components/query/QueryScreenActionMenu.tsx

@@ -0,0 +1,134 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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 {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
+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 Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import React, {useState} from "react";
+import {useNavigate} from "react-router-dom";
+import {QActionsMenuButton} from "qqq/components/buttons/DefaultButtons";
+
+interface QueryScreenActionMenuProps
+{
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+   tableProcesses: QProcessMetaData[];
+   bulkLoadClicked: () => void;
+   bulkEditClicked: () => void;
+   bulkDeleteClicked: () => void;
+   processClicked: (process: QProcessMetaData) => void;
+}
+
+QueryScreenActionMenu.defaultProps = {
+};
+
+export default function QueryScreenActionMenu({metaData, tableMetaData, tableProcesses, bulkLoadClicked, bulkEditClicked, bulkDeleteClicked, processClicked}: QueryScreenActionMenuProps): JSX.Element
+{
+   const [anchorElement, setAnchorElement] = useState(null)
+
+   const navigate = useNavigate();
+
+   const openActionsMenu = (event: any) =>
+   {
+      setAnchorElement(event.currentTarget);
+   }
+
+   const closeActionsMenu = () =>
+   {
+      setAnchorElement(null);
+   }
+
+   const pushDividerIfNeeded = (menuItems: JSX.Element[]) =>
+   {
+      if (menuItems.length > 0)
+      {
+         menuItems.push(<Divider key="divider" />);
+      }
+   };
+
+   const runSomething = (handler: () => void) =>
+   {
+      closeActionsMenu();
+      handler();
+   }
+
+   const menuItems: JSX.Element[] = [];
+   if (tableMetaData.capabilities.has(Capability.TABLE_INSERT) && tableMetaData.insertPermission)
+   {
+      menuItems.push(<MenuItem key="bulkLoad" onClick={() => runSomething(bulkLoadClicked)}><ListItemIcon><Icon>library_add</Icon></ListItemIcon>Bulk Load</MenuItem>);
+   }
+   if (tableMetaData.capabilities.has(Capability.TABLE_UPDATE) && tableMetaData.editPermission)
+   {
+      menuItems.push(<MenuItem key="bulkEdit" onClick={() => runSomething(bulkEditClicked)}><ListItemIcon><Icon>edit</Icon></ListItemIcon>Bulk Edit</MenuItem>);
+   }
+   if (tableMetaData.capabilities.has(Capability.TABLE_DELETE) && tableMetaData.deletePermission)
+   {
+      menuItems.push(<MenuItem key="bulkDelete" onClick={() => runSomething(bulkDeleteClicked)}><ListItemIcon><Icon>delete</Icon></ListItemIcon>Bulk Delete</MenuItem>);
+   }
+
+   const runRecordScriptProcess = metaData?.processes.get("runRecordScript");
+   if (runRecordScriptProcess)
+   {
+      const process = runRecordScriptProcess;
+      menuItems.push(<MenuItem key={process.name} onClick={() => runSomething(() => processClicked(process))}><ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon>{process.label}</MenuItem>);
+   }
+
+   menuItems.push(<MenuItem key="developerMode" onClick={() => navigate(`${metaData.getTablePathByName(tableMetaData.name)}/dev`)}><ListItemIcon><Icon>code</Icon></ListItemIcon>Developer Mode</MenuItem>);
+
+   if (tableProcesses && tableProcesses.length)
+   {
+      pushDividerIfNeeded(menuItems);
+   }
+
+   tableProcesses.sort((a, b) => a.label.localeCompare(b.label));
+   tableProcesses.map((process) =>
+   {
+      menuItems.push(<MenuItem key={process.name} onClick={() => runSomething(() => processClicked(process))}><ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon>{process.label}</MenuItem>);
+   });
+
+   if (menuItems.length === 0)
+   {
+      menuItems.push(<MenuItem key="notAvaialableNow" disabled><ListItemIcon><Icon>block</Icon></ListItemIcon><i>No actions available</i></MenuItem>);
+   }
+
+   return (
+      <>
+         <QActionsMenuButton isOpen={anchorElement} onClickHandler={openActionsMenu} />
+         <Menu
+            anchorEl={anchorElement}
+            anchorOrigin={{vertical: "bottom", horizontal: "right",}}
+            transformOrigin={{vertical: "top", horizontal: "right",}}
+            open={anchorElement != null}
+            onClose={closeActionsMenu}
+            keepMounted
+         >
+            {menuItems}
+         </Menu>
+      </>
+   )
+}

src/qqq/components/query/QuickFilter.tsx

@@ -0,0 +1,556 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2023.  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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
+import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
+import {Tooltip} from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Menu from "@mui/material/Menu";
+import TextField from "@mui/material/TextField";
+import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
+import QContext from "QContext";
+import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
+import {getDefaultCriteriaValue, getOperatorOptions, getValueModeRequiredCount, OperatorOption, validateCriteria} from "qqq/components/query/FilterCriteriaRow";
+import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
+import XIcon from "qqq/components/query/XIcon";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+
+export type CriteriaParamType = QFilterCriteriaWithId | null | "tooComplex";
+
+interface QuickFilterProps
+{
+   tableMetaData: QTableMetaData;
+   fullFieldName: string;
+   fieldMetaData: QFieldMetaData;
+   criteriaParam: CriteriaParamType;
+   updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean, doRemoveCriteria: boolean) => void;
+   defaultOperator?: QCriteriaOperator;
+   handleRemoveQuickFilterField?: (fieldName: string) => void;
+}
+
+QuickFilter.defaultProps =
+   {
+      defaultOperator: QCriteriaOperator.EQUALS,
+      handleRemoveQuickFilterField: null
+   };
+
+let seedId = new Date().getTime() % 173237;
+
+export const quickFilterButtonStyles = {
+   fontSize: "0.75rem",
+   fontWeight: 600,
+   color: "#757575",
+   textTransform: "none",
+   borderRadius: "2rem",
+   border: "1px solid #757575",
+   minWidth: "3.5rem",
+   minHeight: "auto",
+   padding: "0.375rem 0.625rem", whiteSpace: "nowrap",
+   marginBottom: "0.5rem"
+}
+
+/*******************************************************************************
+ ** Test if a CriteriaParamType represents an actual query criteria - or, if it's
+ ** null or the "tooComplex" placeholder.
+ *******************************************************************************/
+const criteriaParamIsCriteria = (param: CriteriaParamType): boolean =>
+{
+   return (param != null && param != "tooComplex");
+};
+
+/*******************************************************************************
+ ** Test of an OperatorOption equals a query Criteria - that is - that the
+ ** operators within them are equal - AND - if the OperatorOption has implicit
+ ** values (e.g., the booleans), then those options equal the criteria's options.
+ *******************************************************************************/
+const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteria: QFilterCriteriaWithId): boolean =>
+{
+   if(operatorOption.value == criteria.operator)
+   {
+      if(operatorOption.implicitValues)
+      {
+         if(JSON.stringify(operatorOption.implicitValues) == JSON.stringify(criteria.values))
+         {
+            return (true);
+         }
+         else
+         {
+            return (false);
+         }
+      }
+
+      return (true);
+   }
+
+   return (false);
+}
+
+
+/*******************************************************************************
+ ** Get the object to use as the selected OperatorOption (e.g., value for that
+ ** autocomplete), given an array of options, the query's active criteria in this
+ ** field, and the default operator to use for this field
+ *******************************************************************************/
+const getOperatorSelectedValue = (operatorOptions: OperatorOption[], criteria: QFilterCriteriaWithId, defaultOperator: QCriteriaOperator): OperatorOption =>
+{
+   if(criteria)
+   {
+      const filteredOptions = operatorOptions.filter(o => doesOperatorOptionEqualCriteria(o, criteria));
+      if(filteredOptions.length > 0)
+      {
+         return (filteredOptions[0]);
+      }
+   }
+
+   const filteredOptions = operatorOptions.filter(o => o.value == defaultOperator);
+   if(filteredOptions.length > 0)
+   {
+      return (filteredOptions[0]);
+   }
+
+   return (null);
+}
+
+/*******************************************************************************
+ ** Component to render a QuickFilter - that is - a button, with a Menu under it,
+ ** with Operator and Value controls.
+ *******************************************************************************/
+export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField}: QuickFilterProps): JSX.Element
+{
+   const operatorOptions = fieldMetaData ? getOperatorOptions(tableMetaData, fullFieldName) : [];
+   const [_, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fullFieldName);
+
+   const [isOpen, setIsOpen] = useState(false);
+   const [anchorEl, setAnchorEl] = useState(null);
+   const [isMouseOver, setIsMouseOver] = useState(false);
+
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // copy the criteriaParam to a new object in here - so changes won't apply until user closes the menu //
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const [criteria, setCriteria] = useState(criteriaParamIsCriteria(criteriaParam) ? Object.assign({}, criteriaParam) as QFilterCriteriaWithId : null);
+   const [id, setId] = useState(criteriaParamIsCriteria(criteriaParam) ? (criteriaParam as QFilterCriteriaWithId).id : ++seedId);
+
+   const [operatorSelectedValue, setOperatorSelectedValue] = useState(getOperatorSelectedValue(operatorOptions, criteria, defaultOperator));
+   const [operatorInputValue, setOperatorInputValue] = useState(operatorSelectedValue?.label);
+
+   const {criteriaIsValid, criteriaStatusTooltip} = validateCriteria(criteria, operatorSelectedValue);
+
+   const {accentColor} = useContext(QContext);
+
+   //////////////////////
+   // ole' faithful... //
+   //////////////////////
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOverElement()
+   {
+      setIsMouseOver(true);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOutElement()
+   {
+      setIsMouseOver(false);
+   }
+
+
+   //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // handle a change to the criteria from outside this component (e.g., the prop isn't the same as the state) //
+   //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   if (criteriaParamIsCriteria(criteriaParam) && JSON.stringify(criteriaParam) !== JSON.stringify(criteria))
+   {
+      if(isOpen)
+      {
+         ////////////////////////////////////////////////////////////////////////////////
+         // this was firing too-often for case where:  there was a criteria originally //
+         ////////////////////////////////////////////////////////////////////////////////
+         console.log("Not handling outside change (A), because dropdown is-open");
+      }
+      else
+      {
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // copy the criteriaParam to a new object in here - so changes won't apply until user closes the menu //
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////
+         const newCriteria = Object.assign({}, criteriaParam) as QFilterCriteriaWithId;
+         setCriteria(newCriteria);
+         const operatorOption = operatorOptions.filter(o => o.value == newCriteria.operator)[0];
+         setOperatorSelectedValue(operatorOption);
+         setOperatorInputValue(operatorOption.label);
+      }
+   }
+
+   /*******************************************************************************
+    ** Test if we need to construct a new criteria object
+    ** This is (at least for some cases) for when the criteria gets changed
+    ** from outside of this component - e.g., a reset on the query screen
+    *******************************************************************************/
+   const criteriaNeedsReset = (): boolean =>
+   {
+      if(criteria != null && criteriaParam == null)
+      {
+         const defaultOperatorOption = operatorOptions.filter(o => o.value == defaultOperator)[0];
+         if(criteria.operator !== defaultOperatorOption?.value || JSON.stringify(criteria.values) !== JSON.stringify(getDefaultCriteriaValue()))
+         {
+            if(isOpen)
+            {
+               //////////////////////////////////////////////////////////////////////////////////
+               // this was firing too-often for case where:  there was no criteria originally, //
+               // so, by adding this is-open check, we eliminated those.                       //
+               //////////////////////////////////////////////////////////////////////////////////
+               console.log("Not handling outside change (B), because dropdown is-open");
+               return (false);
+            }
+
+            return (true);
+         }
+      }
+
+      return (false);
+   }
+
+   /*******************************************************************************
+    ** Construct a new criteria object - resetting the values tied to the operator
+    ** autocomplete at the same time.
+    *******************************************************************************/
+   const makeNewCriteria = (): QFilterCriteria =>
+   {
+      const operatorOption = operatorOptions.filter(o => o.value == defaultOperator)[0];
+      const criteria = new QFilterCriteriaWithId(fullFieldName, operatorOption?.value, getDefaultCriteriaValue());
+      criteria.id = id;
+      setOperatorSelectedValue(operatorOption);
+      setOperatorInputValue(operatorOption?.label);
+      setCriteria(criteria);
+      return(criteria);
+   }
+
+   /*******************************************************************************
+    ** event handler to open the menu in response to the button being clicked.
+    *******************************************************************************/
+   const handleOpenMenu = (event: any) =>
+   {
+      setIsOpen(!isOpen);
+      setAnchorEl(event.currentTarget);
+
+      setTimeout(() =>
+      {
+         const element = document.getElementById("value-" + criteria.id);
+         element?.focus();
+      })
+   };
+
+   /*******************************************************************************
+    ** handler for the Menu when being closed
+    *******************************************************************************/
+   const closeMenu = () =>
+   {
+      //////////////////////////////////////////////////////////////////////////////////
+      // when closing the menu, that's when we'll update the criteria from the caller //
+      //////////////////////////////////////////////////////////////////////////////////
+      updateCriteria(criteria, false, false);
+
+      setIsOpen(false);
+      setAnchorEl(null);
+   };
+
+   /*******************************************************************************
+    ** event handler for operator Autocomplete having its value changed
+    *******************************************************************************/
+   const handleOperatorChange = (event: any, newValue: any, reason: string) =>
+   {
+      criteria.operator = newValue ? newValue.value : null;
+
+      if (newValue)
+      {
+         setOperatorSelectedValue(newValue);
+         setOperatorInputValue(newValue.label);
+
+         if (newValue.implicitValues)
+         {
+            criteria.values = newValue.implicitValues;
+         }
+
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         // we've seen cases where switching operators can sometimes put a null in as the first value... //
+         // that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that.      //
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
+         {
+            criteria.values = [];
+         }
+
+         if(newValue.valueMode && !newValue.implicitValues)
+         {
+            const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
+            if(requiredValueCount != null && criteria.values.length > requiredValueCount)
+            {
+               criteria.values.splice(requiredValueCount);
+            }
+         }
+      }
+      else
+      {
+         setOperatorSelectedValue(null);
+         setOperatorInputValue("");
+      }
+
+      setCriteria(criteria);
+      forceUpdate();
+   };
+
+   /*******************************************************************************
+    ** implementation of isOptionEqualToValue for Autocomplete - compares both the
+    ** value (e.g., what operator it is) and the implicitValues within the option
+    *******************************************************************************/
+   function isOperatorOptionEqual(option: OperatorOption, value: OperatorOption)
+   {
+      return (option?.value == value?.value && JSON.stringify(option?.implicitValues) == JSON.stringify(value?.implicitValues));
+   }
+
+   /*******************************************************************************
+    ** event handler for the value field (of all types), when it changes
+    *******************************************************************************/
+   const handleValueChange = (event: React.ChangeEvent | SyntheticEvent, valueIndex: number | "all" = 0, newValue?: any) =>
+   {
+      // @ts-ignore
+      const value = newValue !== undefined ? newValue : event ? event.target.value : null;
+
+      if (!criteria.values)
+      {
+         criteria.values = [];
+      }
+
+      if (valueIndex == "all")
+      {
+         criteria.values = value;
+      }
+      else
+      {
+         criteria.values[valueIndex] = value;
+      }
+
+      setCriteria(criteria);
+      forceUpdate();
+   };
+
+   /*******************************************************************************
+    ** a noop event handler, e.g., for a too-complex
+    *******************************************************************************/
+   const noop = () =>
+   {
+   };
+
+   /*******************************************************************************
+    ** event handler that responds to 'x' button that removes the criteria from the
+    ** quick-filter, resetting it to a new filter.
+    *******************************************************************************/
+   const resetCriteria = (e: React.MouseEvent<HTMLSpanElement>) =>
+   {
+      if(criteriaIsValid)
+      {
+         e.stopPropagation();
+         const newCriteria = makeNewCriteria();
+         updateCriteria(newCriteria, false, true);
+      }
+   }
+
+   /*******************************************************************************
+    ** event handler for clicking the (x) icon that turns off this quick filter field.
+    ** hands off control to the function that was passed in (e.g., from RecordQueryOrig).
+    *******************************************************************************/
+   const handleTurningOffQuickFilterField = () =>
+   {
+      closeMenu()
+      if(handleRemoveQuickFilterField)
+      {
+         handleRemoveQuickFilterField(criteria?.fieldName);
+      }
+   }
+
+   ////////////////////////////////////////////////////////////////////////////////////
+   // if no field was input (e.g., record-query is still loading), return null early //
+   ////////////////////////////////////////////////////////////////////////////////////
+   if(!fieldMetaData)
+   {
+      return (null);
+   }
+
+   //////////////////////////////////////////////////////////////////////////////////////////
+   // if there should be a selected value in the operator autocomplete, and it's different //
+   // from the last selected one, then set the state vars that control that autocomplete   //
+   //////////////////////////////////////////////////////////////////////////////////////////
+   const maybeNewOperatorSelectedValue = getOperatorSelectedValue(operatorOptions, criteria, defaultOperator);
+   if(JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue))
+   {
+      setOperatorSelectedValue(maybeNewOperatorSelectedValue)
+      setOperatorInputValue(maybeNewOperatorSelectedValue?.label)
+   }
+
+   /////////////////////////////////////////////////////////////////////////////////////
+   // if there wasn't a criteria, or we need to reset it (make a new one), then do so //
+   /////////////////////////////////////////////////////////////////////////////////////
+   if (criteria == null || criteriaNeedsReset())
+   {
+      makeNewCriteria();
+   }
+
+   /////////////////////////
+   // build up the button //
+   /////////////////////////
+   const tooComplex = criteriaParam == "tooComplex";
+   const tooltipEnterDelay = 500;
+
+   let buttonAdditionalStyles: any = {};
+   let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>
+   let buttonClassName = "filterNotActive";
+   if (criteriaIsValid)
+   {
+      buttonAdditionalStyles.backgroundColor = accentColor + " !important";
+      buttonAdditionalStyles.borderColor = accentColor + " !important";
+      buttonAdditionalStyles.color = "white !important";
+      buttonClassName = "filterActive";
+
+      let valuesString = FilterUtils.getValuesString(fieldMetaData, criteria, 1, "+N");
+
+      ///////////////////////////////////////////
+      // don't show the Equals or In operators //
+      ///////////////////////////////////////////
+      let operatorString = (<>{operatorSelectedValue.label}&nbsp;</>);
+      if(operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
+      {
+         operatorString = (<></>)
+      }
+
+      buttonContent = (<><span style={{fontWeight: 700}}>{buttonContent}:</span>&nbsp;<span style={{fontWeight: 400}}>{operatorString}{valuesString}</span></>);
+   }
+
+   const mouseEvents =
+      {
+         onMouseOver: () => handleMouseOverElement(),
+         onMouseOut: () => handleMouseOutElement()
+      };
+
+   let button = fieldMetaData && <Button
+      id={`quickFilter.${fullFieldName}`}
+      className={buttonClassName}
+      {...mouseEvents}
+      sx={{...quickFilterButtonStyles, ...buttonAdditionalStyles, mr: "0.5rem"}}
+      onClick={tooComplex ? noop : handleOpenMenu}
+      disabled={tooComplex}
+   >{buttonContent}</Button>;
+
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // if the criteria on this field is the "tooComplex" sentinel, then wrap the button in a tooltip stating such, and return early. //
+   // note this was part of original design on this widget, but later deprecated...                                                 //
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   if (tooComplex)
+   {
+      ////////////////////////////////////////////////////////////////////////////
+      // wrap button in span, so disabled button doesn't cause disabled tooltip //
+      ////////////////////////////////////////////////////////////////////////////
+      return (
+         <Tooltip title={`Your current filter is too complex to do a Quick Filter on ${fieldMetaData.label}.  Use the Filter button to edit.`} enterDelay={tooltipEnterDelay} slotProps={{popper: {sx: {top: "-0.75rem!important"}}}}>
+            <span>{button}</span>
+         </Tooltip>
+      );
+   }
+
+   /*******************************************************************************
+    ** event handler for 'x' button - either resets the criteria or turns off the field.
+    *******************************************************************************/
+   const xClicked = (e: React.MouseEvent<HTMLSpanElement>) =>
+   {
+      e.stopPropagation();
+      if(criteriaIsValid)
+      {
+         resetCriteria(e);
+      }
+      else
+      {
+         handleTurningOffQuickFilterField();
+      }
+   }
+
+   //////////////////////////////
+   // return the button & menu //
+   //////////////////////////////
+   const widthAndMaxWidth = 250
+   return (
+      <>
+         {button}
+         {
+            /////////////////////////////////////////////////////////////////////////////////////
+            // only show the 'x' if it's to clear out a valid criteria on the field,           //
+            // or if we were given a callback to remove the quick-filter field from the screen //
+            /////////////////////////////////////////////////////////////////////////////////////
+            (criteriaIsValid || handleRemoveQuickFilterField) && isMouseOver && <span {...mouseEvents}><XIcon shade={criteriaIsValid ? "accent" : "default"} position="forQuickFilter" onClick={xClicked} /></span>
+         }
+         {
+            isOpen && <Menu open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={closeMenu} sx={{overflow: "visible"}}>
+               <Box display="inline-block" width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="operatorColumn">
+                  <Autocomplete
+                     id={"criteriaOperator"}
+                     ////////////////////////////////////////////////////////////////////////////////////////////////////
+                     // ok, so, by default, if you type an 'o' as the first letter in the FilterCriteriaRowValues box, //
+                     // something is causing THIS element to become selected, if the first letter in its label is 'O'. //
+                     // ... work around is to put invisible &zwnj; entity as first character in label instead...       //
+                     ////////////////////////////////////////////////////////////////////////////////////////////////////
+                     renderInput={(params) => (<TextField {...params} label={<>&zwnj;Operator</>} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
+                     options={operatorOptions}
+                     value={operatorSelectedValue as any}
+                     inputValue={operatorInputValue}
+                     onChange={handleOperatorChange}
+                     onInputChange={(e, value) => setOperatorInputValue(value)}
+                     isOptionEqualToValue={(option, value) => isOperatorOptionEqual(option, value)}
+                     getOptionLabel={(option: any) => option.label}
+                     autoSelect={true}
+                     autoHighlight={true}
+                     disableClearable
+                     slotProps={{popper: {style: {padding: 0, maxHeight: "unset", width: "250px"}}}}
+                  />
+               </Box>
+               <Box width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="quickFilter filterValuesColumn">
+                  <FilterCriteriaRowValues
+                     operatorOption={operatorSelectedValue}
+                     criteria={criteria}
+                     field={fieldMetaData}
+                     table={tableForField}
+                     valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
+                     initiallyOpenMultiValuePvs={true} // todo - maybe not?
+                  />
+               </Box>
+            </Menu>
+         }
+      </>
+   );
+}

src/qqq/components/query/SelectionSubsetDialog.tsx

@@ -0,0 +1,74 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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 Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import TextField from "@mui/material/TextField";
+import React, {useState} from "react";
+import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+
+
+/*******************************************************************************
+ ** Component that is the dialog for the user to enter the selection-subset
+ *******************************************************************************/
+export default function SelectionSubsetDialog(props: { isOpen: boolean; initialValue: number; closeHandler: (value?: number) => void })
+{
+   const [value, setValue] = useState(props.initialValue);
+
+   const handleChange = (newValue: string) =>
+   {
+      setValue(parseInt(newValue));
+   };
+
+   const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
+   {
+      if (e.key == "Enter" && value)
+      {
+         props.closeHandler(value);
+      }
+   };
+
+   return (
+      <Dialog open={props.isOpen} onClose={() => props.closeHandler()} onKeyPress={(e) => keyPressed(e)}>
+         <DialogTitle>Subset of the Query Result</DialogTitle>
+         <DialogContent>
+            <DialogContentText>How many records do you want to select?</DialogContentText>
+            <TextField
+               autoFocus
+               name="selection-subset-size"
+               inputProps={{width: "100%", type: "number", min: 1}}
+               onChange={(e) => handleChange(e.target.value)}
+               value={value}
+               sx={{width: "100%"}}
+               onFocus={event => event.target.select()}
+            />
+         </DialogContent>
+         <DialogActions>
+            <QCancelButton disabled={false} onClickHandler={() => props.closeHandler()} />
+            <QSaveButton label="OK" iconName="check" disabled={value == undefined || isNaN(value)} onClickHandler={() => props.closeHandler(value)} />
+         </DialogActions>
+      </Dialog>
+   );
+}
+

src/qqq/components/query/TableVariantDialog.tsx

@@ -0,0 +1,122 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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 {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QTableVariant} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableVariant";
+import Autocomplete from "@mui/material/Autocomplete";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import TextField from "@mui/material/TextField";
+import React, {useEffect, useState} from "react";
+import {TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT} from "qqq/pages/records/query/RecordQuery";
+import Client from "qqq/utils/qqq/Client";
+
+const qController = Client.getInstance();
+
+/*******************************************************************************
+ ** Component that is the dialog for the user to select a variant on tables with variant backends //
+ *******************************************************************************/
+export default function TableVariantDialog(props: { isOpen: boolean; table: QTableMetaData; closeHandler: (value?: QTableVariant) => void })
+{
+   const [value, setValue] = useState(null);
+   const [dropDownOpen, setDropDownOpen] = useState(false);
+   const [variants, setVariants] = useState(null);
+
+   const handleVariantChange = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) =>
+   {
+      const tableVariantLocalStorageKey = `${TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT}.${props.table.name}`;
+      if (value != null)
+      {
+         localStorage.setItem(tableVariantLocalStorageKey, JSON.stringify(value));
+      }
+      else
+      {
+         localStorage.removeItem(tableVariantLocalStorageKey);
+      }
+      props.closeHandler(value);
+   };
+
+   const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
+   {
+      if (e.key == "Enter" && value)
+      {
+         props.closeHandler(value);
+      }
+   };
+
+   useEffect(() =>
+   {
+      console.log("queryVariants");
+      try
+      {
+         (async () =>
+         {
+            const variants = await qController.tableVariants(props.table.name);
+            console.log(JSON.stringify(variants));
+            setVariants(variants);
+         })();
+      }
+      catch (e)
+      {
+         console.log(e);
+      }
+   }, []);
+
+
+   return variants && (
+      <Dialog open={props.isOpen} onKeyPress={(e) => keyPressed(e)}>
+         <DialogTitle>{props.table.variantTableLabel}</DialogTitle>
+         <DialogContent>
+            <DialogContentText>Select the {props.table.variantTableLabel} to be used on this table:</DialogContentText>
+            <Autocomplete
+               id="tableVariantId"
+               sx={{width: "400px", marginTop: "10px"}}
+               open={dropDownOpen}
+               size="small"
+               onOpen={() =>
+               {
+                  setDropDownOpen(true);
+               }}
+               onClose={() =>
+               {
+                  setDropDownOpen(false);
+               }}
+               // @ts-ignore
+               onChange={handleVariantChange}
+               isOptionEqualToValue={(option, value) => option.id === value.id}
+               options={variants}
+               renderInput={(params) => <TextField {...params} label={props.table.variantTableLabel} />}
+               getOptionLabel={(option) =>
+               {
+                  if (typeof option == "object")
+                  {
+                     return (option as QTableVariant).name;
+                  }
+                  return option;
+               }}
+            />
+         </DialogContent>
+      </Dialog>
+   );
+}
+

src/qqq/components/query/XIcon.tsx

@@ -0,0 +1,92 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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 Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import React, {useContext} from "react";
+import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
+
+interface XIconProps
+{
+   onClick: (e: React.MouseEvent<HTMLSpanElement>) => void;
+   position: "forQuickFilter" | "forAdvancedQueryPreview" | "default";
+   shade: "default" | "accent" | "accentLight"
+}
+
+XIcon.defaultProps = {
+   position: "default",
+   shade: "default"
+};
+
+export default function XIcon({onClick, position, shade}: XIconProps): JSX.Element
+{
+   const {accentColor, accentColorLight} = useContext(QContext)
+
+   //////////////////////////
+   // for default position //
+   //////////////////////////
+   let rest: any = {
+      top: "-0.75rem",
+      left: "-0.5rem",
+   }
+
+   if(position == "forQuickFilter")
+   {
+      rest = {
+         left: "-1.125rem",
+      }
+   }
+   else if(position == "forAdvancedQueryPreview")
+   {
+      rest = {
+         top: "-0.5rem",
+         left: "-0.75rem",
+      }
+   }
+
+   let color;
+   switch (shade)
+   {
+      case "default":
+         color = colors.gray.main;
+         break;
+      case "accent":
+         color = accentColor;
+         break;
+      case "accentLight":
+         color = accentColorLight;
+         break;
+   }
+
+   return (
+      <span style={{position: "relative"}}><IconButton sx={{
+         fontSize: "0.75rem",
+         border: `1px solid ${color}`,
+         color: color,
+         padding: "0",
+         background: "#FFFFFF !important",
+         position: "absolute",
+         ... rest
+      }} onClick={onClick}><Icon>close</Icon></IconButton></span>
+   )
+}

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -22,11 +22,13 @@ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Q
 import {Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
 import parse from "html-react-parser";
 import React, {useContext, useEffect, useReducer, useState} from "react";
-import {useLocation} from "react-router-dom";
 import QContext from "QContext";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import TabPanel from "qqq/components/misc/TabPanel";
 import BarChart from "qqq/components/widgets/charts/barchart/BarChart";
 import HorizontalBarChart from "qqq/components/widgets/charts/barchart/HorizontalBarChart";
 import DefaultLineChart from "qqq/components/widgets/charts/linechart/DefaultLineChart";
@@ -44,7 +46,7 @@ import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
 import ParentWidget from "qqq/components/widgets/ParentWidget";
 import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
 import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard";
-import Widget, {WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT} from "qqq/components/widgets/Widget";
+import Widget, {HeaderIcon, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, LabelComponent} from "qqq/components/widgets/Widget";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
 import Client from "qqq/utils/qqq/Client";
 import TableWidget from "./tables/TableWidget";
@@ -58,9 +60,10 @@ interface Props
    tableName?: string;
    entityPrimaryKey?: string;
    omitWrappingGridContainer: boolean;
-   areChildren?: boolean
-   childUrlParams?: string
-   parentWidgetMetaData?: QWidgetMetaData
+   areChildren?: boolean;
+   childUrlParams?: string;
+   parentWidgetMetaData?: QWidgetMetaData;
+   wrapWidgetsInTabPanels: boolean;
 }
 
 DashboardWidgets.defaultProps = {
@@ -70,12 +73,12 @@ DashboardWidgets.defaultProps = {
    omitWrappingGridContainer: false,
    areChildren: false,
    childUrlParams: "",
-   parentWidgetMetaData: null
+   parentWidgetMetaData: null,
+   wrapWidgetsInTabPanels: false,
 };
 
-function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData}: Props): JSX.Element
+function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
 {
-   const location = useLocation();
    const [widgetData, setWidgetData] = useState([] as any[]);
    const [widgetCounter, setWidgetCounter] = useState(0);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
@@ -84,6 +87,24 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
    const [haveLoadedParams, setHaveLoadedParams] = useState(false);
    const {accentColor} = useContext(QContext);
 
+   let initialSelectedTab = 0;
+   let selectedTabKey: string = null;
+   if(parentWidgetMetaData && wrapWidgetsInTabPanels)
+   {
+      selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`
+      if (localStorage.getItem(selectedTabKey))
+      {
+         initialSelectedTab = Number(localStorage.getItem(selectedTabKey));
+      }
+   }
+   const [selectedTab, setSelectedTab] = useState(initialSelectedTab);
+
+   const changeTab = (newValue: number) =>
+   {
+      setSelectedTab(newValue);
+      localStorage.setItem(selectedTabKey, String(newValue));
+   };
+
    useEffect(() =>
    {
       setWidgetData([]);
@@ -102,15 +123,15 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                widgetData[i] = await qController.widget(widgetMetaData.name, urlParams);
                setWidgetData(widgetData);
                setWidgetCounter(widgetCounter + 1);
-               if(widgetData[i])
+               if (widgetData[i])
                {
                   widgetData[i]["errorLoading"] = false;
                }
             }
-            catch(e)
+            catch (e)
             {
                console.error(e);
-               if(widgetData[i])
+               if (widgetData[i])
                {
                   widgetData[i]["errorLoading"] = true;
                }
@@ -123,7 +144,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    const reloadWidget = async (index: number, data: string) =>
    {
-      (async() =>
+      (async () =>
       {
          const urlParams = getQueryParams(widgetMetaDataList[index], data);
          setCurrentUrlParams(urlParams);
@@ -140,7 +161,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                widgetData[index]["errorLoading"] = false;
             }
          }
-         catch(e)
+         catch (e)
          {
             console.error(e);
             if (widgetData[index])
@@ -151,7 +172,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
          forceUpdate();
       })();
-   }
+   };
 
    function getQueryParams(widgetMetaData: QWidgetMetaData, extraParams: string): string
    {
@@ -178,36 +199,36 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
          }
       }
 
-      if(entityPrimaryKey)
+      if (entityPrimaryKey)
       {
          paramMap.set("id", entityPrimaryKey);
       }
 
-      if(tableName)
+      if (tableName)
       {
          paramMap.set("tableName", tableName);
       }
 
-      if(extraParams)
+      if (extraParams)
       {
          let pairs = extraParams.split("&");
          for (let i = 0; i < pairs.length; i++)
          {
             let nameValue = pairs[i].split("=");
-            if(nameValue.length == 2)
+            if (nameValue.length == 2)
             {
                paramMap.set(nameValue[0], nameValue[1]);
             }
          }
       }
 
-      if(childUrlParams)
+      if (childUrlParams)
       {
          let pairs = childUrlParams.split("&");
          for (let i = 0; i < pairs.length; i++)
          {
             let nameValue = pairs[i].split("=");
-            if(nameValue.length == 2)
+            if (nameValue.length == 2)
             {
                paramMap.set(nameValue[0], nameValue[1]);
             }
@@ -227,6 +248,16 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
    {
+      const labelAdditionalComponentsRight: LabelComponent[] = [];
+      if (widgetMetaData && widgetMetaData.icons)
+      {
+         const topRightInsideCardIcon = widgetMetaData.icons.get("topRightInsideCard");
+         if (topRightInsideCardIcon)
+         {
+            labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color));
+         }
+      }
+
       return (
          <Box key={`${widgetMetaData.name}-${i}`} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%"}}>
             {
@@ -238,7 +269,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetIndex={i}
                      widgetMetaData={widgetMetaData}
                      data={widgetData[i]}
-                     reloadWidgetCallback={reloadWidget}
+                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      storeDropdownSelections={widgetMetaData.storeDropdownSelections}
                   />
                )
@@ -270,8 +301,9 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
                   >
-                     <StackedBarChart data={widgetData[i]?.chartData}/>
+                     <StackedBarChart data={widgetData[i]?.chartData} chartSubheaderData={widgetData[i]?.chartSubheaderData} />
                   </Widget>
                )
             }
@@ -311,7 +343,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      widgetData={widgetData[i]}
                   >
-                     <Box px={3} pt={0} pb={2}>
+                     <Box>
                         <MDTypography component="div" variant="button" color="text" fontWeight="light">
                            {
                               widgetData && widgetData[i] && widgetData[i].html ? (
@@ -381,10 +413,12 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
                   >
                      <div>
                         <PieChart
                            chartData={widgetData[i]?.chartData}
+                           chartSubheaderData={widgetData[i]?.chartSubheaderData}
                            description={widgetData[i]?.description}
                         />
                      </div>
@@ -436,11 +470,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
             {
                widgetMetaData.type === "fieldValueList" && (
                   widgetData && widgetData[i] &&
-                     <FieldValueListWidget
-                        widgetMetaData={widgetMetaData}
-                        data={widgetData[i]}
-                        reloadWidgetCallback={(data) => reloadWidget(i, data)}
-                     />
+                  <FieldValueListWidget
+                     widgetMetaData={widgetMetaData}
+                     data={widgetData[i]}
+                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                  />
                )
             }
             {
@@ -461,32 +495,76 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
             }
          </Box>
       );
+   };
+
+   if(wrapWidgetsInTabPanels)
+   {
+      omitWrappingGridContainer = true;
    }
 
    const body: JSX.Element =
       (
          <>
             {
-               widgetMetaDataList.map((widgetMetaData, i) => (
-                  omitWrappingGridContainer
-                     ? widgetMetaData && renderWidget(widgetMetaData, i)
-                     :
-                     widgetMetaData && <Grid id={widgetMetaData.name} key={`${widgetMetaData.name}-${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
-                        {renderWidget(widgetMetaData, i)}
-                     </Grid>
-               ))
+               widgetMetaDataList.map((widgetMetaData, i) =>
+               {
+                  let renderedWidget = widgetMetaData ? renderWidget(widgetMetaData, i) : (<></>);
+
+                  if (!omitWrappingGridContainer)
+                  {
+                     // @ts-ignore
+                     renderedWidget = (<Grid id={widgetMetaData.name} item xxl={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
+                        {renderedWidget}
+                     </Grid>);
+                  }
+
+                  if (wrapWidgetsInTabPanels)
+                  {
+                     renderedWidget = (<TabPanel index={i} value={selectedTab} style={{
+                        padding: 0,
+                        margin: "-1rem",
+                        marginBottom: "-3.5rem",
+                        width: "calc(100% + 2rem)"
+                     }}>
+                        {renderedWidget}
+                     </TabPanel>);
+                  }
+
+                  return (<React.Fragment key={`${widgetMetaData.name}-${i}`}>{renderedWidget}</React.Fragment>)
+               })
             }
          </>
       );
 
+   const tabs = widgetMetaDataList && wrapWidgetsInTabPanels ?
+      <Tabs
+         sx={{m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
+            "& .MuiTabs-scroller": {
+               ml: 0
+            }
+         }}
+         value={selectedTab}
+         onChange={(event, newValue) => changeTab(newValue)}
+         variant="standard"
+      >
+         {widgetMetaDataList.map((widgetMetaData, i) => (
+            <Tab key={widgetMetaData.name} label={widgetMetaData.label} />
+         ))}
+      </Tabs>
+      : <></>
+
    return (
       widgetCount > 0 ? (
-         omitWrappingGridContainer ? body :
-            (
-               <Grid container spacing={3} pb={4}>
-                  {body}
-               </Grid>
-            )
+         <>
+            {tabs}
+            {
+               omitWrappingGridContainer ? body : (
+                  <Grid container spacing={2.5}>
+                     {body}
+                  </Grid>
+               )
+            }
+         </>
       ) : null
    );
 }

src/qqq/components/widgets/ParentWidget.tsx

@@ -43,6 +43,7 @@ export interface ParentWidgetData
    dropdownNeedsSelectedText?: string;
    storeDropdownSelections?: boolean;
    icon?: string;
+   layoutType: string;
 }
 
 
@@ -55,7 +56,7 @@ interface Props
    widgetMetaData?: QWidgetMetaData;
    widgetIndex: number;
    data: ParentWidgetData;
-   reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
+   reloadWidgetCallback?: (params: string) => void;
    entityPrimaryKey?: string;
    tableName?: string;
    storeDropdownSelections?: boolean;
@@ -91,18 +92,29 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
       }
    }, [qInstance, data, childUrlParams]);
 
+   useEffect(() =>
+   {
+      setChildUrlParams(urlParams)
+   }, [urlParams]);
+
    const parentReloadWidgetCallback = (data: string) =>
    {
       setChildUrlParams(data);
-      reloadWidgetCallback(widgetIndex, data);
+      reloadWidgetCallback(data);
    }
 
    ///////////////////////////////////////////////////////////////////////////////////////////
    // if this parent widget is in card form, and its children are too, then we need some px //
    ///////////////////////////////////////////////////////////////////////////////////////////
-   const px = (widgetMetaData && widgetMetaData.isCard && widgets && widgets[0] && widgets[0].isCard) ? 3 : 0;
+   const parentIsCard = widgetMetaData && widgetMetaData.isCard;
+   const childrenAreCards = widgetMetaData && widgets && widgets[0] && widgets[0].isCard;
+   const px = (parentIsCard && childrenAreCards) ? 3 : 0;
+
+   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // if this is a parent, which is not a card, then we need to omit the padding, i think, on the Widget that ultimately gets rendered //
+   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const omitPadding = !parentIsCard;
 
-   // @ts-ignore
    return (
       qInstance && data ? (
          <Widget
@@ -110,9 +122,10 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
             widgetData={data}
             storeDropdownSelections={storeDropdownSelections}
             reloadWidgetCallback={parentReloadWidgetCallback}
+            omitPadding={omitPadding}
          >
             <Box sx={{height: "100%", width: "100%"}} px={px}>
-               <DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData}/>
+               <DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType == "TABS"}/>
             </Box>
          </Widget>
       ) : null

src/qqq/components/widgets/Widget.tsx

@@ -25,14 +25,13 @@ import Box from "@mui/material/Box";
 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 Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
 import parse from "html-react-parser";
 import React, {useEffect, useState} from "react";
-import {Link, NavigateFunction, useNavigate} from "react-router-dom";
-import colors from "qqq/components/legacy/colors";
-import DropdownMenu, {DropdownOption} from "qqq/components/widgets/components/DropdownMenu";
+import {NavigateFunction, useNavigate} from "react-router-dom";
+import colors from "qqq/assets/theme/base/colors";
+import WidgetDropdownMenu, {DropdownOption} from "qqq/components/widgets/components/WidgetDropdownMenu";
 
 export interface WidgetData
 {
@@ -43,9 +42,11 @@ export interface WidgetData
       id: string,
       label: string
    }[][];
+   dropdownDefaultValueList?: string[];
    dropdownNeedsSelectedText?: string;
    hasPermission?: boolean;
    errorLoading?: boolean;
+
    [other: string]: any;
 }
 
@@ -53,7 +54,9 @@ export interface WidgetData
 interface Props
 {
    labelAdditionalComponentsLeft: LabelComponent[];
+   labelAdditionalElementsLeft: JSX.Element[];
    labelAdditionalComponentsRight: LabelComponent[];
+   labelBoxAdditionalSx?: any;
    widgetMetaData?: QWidgetMetaData;
    widgetData?: WidgetData;
    children: JSX.Element;
@@ -62,6 +65,7 @@ interface Props
    isChild?: boolean;
    footerHTML?: string;
    storeDropdownSelections?: boolean;
+   omitPadding: boolean;
 }
 
 Widget.defaultProps = {
@@ -70,7 +74,10 @@ Widget.defaultProps = {
    widgetMetaData: {},
    widgetData: {},
    labelAdditionalComponentsLeft: [],
+   labelAdditionalElementsLeft: [],
    labelAdditionalComponentsRight: [],
+   labelBoxAdditionalSx: {},
+   omitPadding: false,
 };
 
 
@@ -88,34 +95,56 @@ export class LabelComponent
 {
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      return (<div>Unsupported component type</div>)
-   }
+      return (<div>Unsupported component type</div>);
+   };
 }
 
 
 /*******************************************************************************
  **
  *******************************************************************************/
-export class HeaderLink extends LabelComponent
+export class HeaderIcon extends LabelComponent
 {
-   label: string;
-   to: string
+   iconName: string;
+   iconPath: string;
+   color: string;
+   coloredBG: boolean;
 
-   constructor(label: string, to: string)
+   iconColor: string;
+   bgColor: string;
+
+   constructor(iconName: string, iconPath: string, color: string, coloredBG: boolean = true)
    {
       super();
-      this.label = label;
-      this.to = to;
+      this.iconName = iconName;
+      this.iconPath = iconPath;
+      this.color = color;
+      this.coloredBG = coloredBG;
+
+      this.iconColor = this.coloredBG ? "#FFFFFF" : this.color;
+      this.bgColor = this.coloredBG ? this.color : "none";
    }
 
+
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      return (
-         <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative" top="-0.25rem">
-            {this.to ? <Link to={this.to}>{this.label}</Link> : null}
-         </Typography>
-      );
-   }
+      const styles = {
+         width: "1.75rem",
+         height: "1.75rem",
+         color: this.iconColor,
+         backgroundColor: this.bgColor,
+         borderRadius: "0.25rem"
+      };
+
+      if (this.iconPath)
+      {
+         return (<Box sx={{textAlign: "center", ...styles}}><img src={this.iconPath} width="16" height="16" /></Box>);
+      }
+      else
+      {
+         return (<Icon sx={{padding: "0.25rem", ...styles}} fontSize="small">{this.iconName}</Icon>);
+      }
+   };
 }
 
 
@@ -141,45 +170,17 @@ export class AddNewRecordButton extends LabelComponent
 
    openEditForm = (navigate: any, table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any) =>
    {
-      navigate(`#/createChild=${table.name}/defaultValues=${JSON.stringify(defaultValues)}/disabledFields=${JSON.stringify(disabledFields)}`)
-   }
+      navigate(`#/createChild=${table.name}/defaultValues=${JSON.stringify(defaultValues)}/disabledFields=${JSON.stringify(disabledFields)}`);
+   };
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
       return (
-         <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="0.25rem">
+         <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="-0.5rem">
             <Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
          </Typography>
       );
-   }
-}
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-export class ExportDataButton extends LabelComponent
-{
-   callbackToExport: any;
-   tooltipTitle: string;
-   isDisabled: boolean;
-
-   constructor(callbackToExport: any, isDisabled = false, tooltipTitle: string = "Export")
-   {
-      super();
-      this.callbackToExport = callbackToExport;
-      this.isDisabled = isDisabled;
-      this.tooltipTitle = tooltipTitle;
-   }
-
-   render = (args: LabelComponentRenderArgs): JSX.Element =>
-   {
-      return (
-         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem">
-            <Tooltip title={this.tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callbackToExport()} disabled={this.isDisabled}><Icon>save_alt</Icon></Button></Tooltip>
-         </Typography>
-      );
-   }
+   };
 }
 
 
@@ -189,45 +190,115 @@ export class ExportDataButton extends LabelComponent
 export class Dropdown extends LabelComponent
 {
    label: string;
+   dropdownMetaData: any;
    options: DropdownOption[];
+   dropdownDefaultValue?: string;
    dropdownName: string;
    onChangeCallback: any;
 
-   constructor(label: string, options: DropdownOption[], dropdownName: string, onChangeCallback: any)
+   constructor(label: string, dropdownMetaData: any, options: DropdownOption[], dropdownDefaultValue: string, dropdownName: string, onChangeCallback: any)
    {
       super();
       this.label = label;
+      this.dropdownMetaData = dropdownMetaData;
       this.options = options;
+      this.dropdownDefaultValue = dropdownDefaultValue;
       this.dropdownName = dropdownName;
       this.onChangeCallback = onChangeCallback;
    }
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
+      const label = `Select ${this.label}`;
       let defaultValue = null;
       const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${args.widgetProps.widgetMetaData.name}.${this.dropdownName}`;
       if (args.widgetProps.storeDropdownSelections)
       {
-         ///////////////////////////////////////////////////////////////////////////////////////
-         // see if an existing value is stored in local storage, and if so set it in dropdown //
-         ///////////////////////////////////////////////////////////////////////////////////////
-         defaultValue = JSON.parse(localStorage.getItem(localStorageKey));
-         args.dropdownData[args.componentIndex] = defaultValue?.id;
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         // see if an existing value is stored in local storage, and if so set it in dropdown      //
+         // originally we used the full object from localStorage - but - in case the label         //
+         // changed since it was stored, we'll instead just find the option by id (or in case that //
+         // option isn't available anymore, then we'll select nothing instead of a missing value   //
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         try
+         {
+            const localStorageOption = JSON.parse(localStorage.getItem(localStorageKey));
+            if(localStorageOption)
+            {
+               const id = localStorageOption.id;
+               for (let i = 0; i < this.options.length; i++)
+               {
+                  if (this.options[i].id == id)
+                  {
+                     defaultValue = this.options[i]
+                     args.dropdownData[args.componentIndex] = defaultValue?.id;
+                  }
+               }
+            }
+         }
+         catch(e)
+         {
+            console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e)
+         }
+      }
+
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      // if there wasn't a value selected, but there is a default from the backend, then use it. //
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      if (defaultValue == null && this.dropdownDefaultValue != null)
+      {
+         for (let i = 0; i < this.options.length; i++)
+         {
+            if(this.options[i].id == this.dropdownDefaultValue)
+            {
+               defaultValue = this.options[i];
+               args.dropdownData[args.componentIndex] = defaultValue?.id;
+
+               if (args.widgetProps.storeDropdownSelections)
+               {
+                  localStorage.setItem(localStorageKey, JSON.stringify(defaultValue));
+               }
+
+               this.onChangeCallback(label, defaultValue);
+               break;
+            }
+         }
+      }
+
+      /////////////////////////////////////////////////////////////////////////////
+      // if there's a 'label for null value' (and no default from the backend),  //
+      // then add that as an option (and select it if nothing else was selected) //
+      /////////////////////////////////////////////////////////////////////////////
+      let options = this.options;
+      if (this.dropdownMetaData.labelForNullValue && !this.dropdownDefaultValue)
+      {
+         const nullOption = {id: null as string, label: this.dropdownMetaData.labelForNullValue};
+         options = [nullOption, ...this.options];
+
+         if (!defaultValue)
+         {
+            defaultValue = nullOption;
+         }
       }
 
       return (
-         <Box my={2} sx={{float: "right"}}>
-            <DropdownMenu
+         <Box mb={2} sx={{float: "right"}}>
+            <WidgetDropdownMenu
                name={this.dropdownName}
                defaultValue={defaultValue}
-               sx={{width: 200, marginLeft: "15px"}}
-               label={`Select ${this.label}`}
-               dropdownOptions={this.options}
+               sx={{marginLeft: "1rem"}}
+               label={label}
+               startIcon={this.dropdownMetaData.startIconName}
+               allowBackAndForth={this.dropdownMetaData.allowBackAndForth}
+               backAndForthInverted={this.dropdownMetaData.backAndForthInverted}
+               disableClearable={this.dropdownMetaData.disableClearable}
+               dropdownOptions={options}
                onChangeCallback={this.onChangeCallback}
+               width={this.dropdownMetaData.width ?? 225}
             />
          </Box>
       );
-   }
+   };
 }
 
 
@@ -247,11 +318,11 @@ export class ReloadControl extends LabelComponent
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
       return (
-         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem">
-            <Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon>refresh</Icon></Button></Tooltip>
+         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.175rem">
+            <Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>refresh</Icon></Button></Tooltip>
          </Typography>
       );
-   }
+   };
 }
 
 
@@ -333,7 +404,12 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          props.widgetData.dropdownDataList?.map((dropdownData: any, index: number) =>
          {
             // console.log(`${props.widgetMetaData.name} building a Dropdown, data is: ${dropdownData}`);
-            updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], dropdownData, props.widgetData.dropdownNameList[index], handleDataChange));
+            let defaultValue = null;
+            if(props.widgetData.dropdownDefaultValueList && props.widgetData.dropdownDefaultValueList.length >= index)
+            {
+               defaultValue = props.widgetData.dropdownDefaultValueList[index];
+            }
+            updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], props.widgetMetaData.dropdowns[index], dropdownData, defaultValue, props.widgetData.dropdownNameList[index], handleDataChange));
          });
          setLabelComponentsRight(updatedStateLabelComponentsRight);
       }
@@ -372,7 +448,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
 
          if (index < 0)
          {
-            throw(`Could not find table name for label ${tableName}`);
+            throw (`Could not find table name for label ${tableName}`);
          }
 
          dropdownData[index] = (changedData) ? changedData.id : null;
@@ -394,7 +470,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
             }
          }
 
-         reloadWidget(dropdownData)
+         reloadWidget(dropdownData);
       }
    }
 
@@ -422,7 +498,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       {
          console.log(`No reload widget callback in ${props.widgetMetaData.label}`);
       }
-   }
+   };
 
    const toggleFullScreenWidget = () =>
    {
@@ -434,14 +510,14 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       {
          setFullScreenWidgetClassName("fullScreenWidget");
       }
-   }
+   };
 
    const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
 
    const isSet = (v: any): boolean =>
    {
       return (v !== null && v !== undefined);
-   }
+   };
 
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // to avoid taking up the space of the Box with the label and icon and label-components (since it has a height), only output that box if we need any of the components //
@@ -450,36 +526,50 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
    if (hasPermission)
    {
       needLabelBox ||= (labelComponentsLeft && labelComponentsLeft.length > 0);
+      needLabelBox ||= (props.labelAdditionalElementsLeft && props.labelAdditionalElementsLeft.length > 0);
       needLabelBox ||= (labelComponentsRight && labelComponentsRight.length > 0);
       needLabelBox ||= isSet(props.widgetMetaData?.icon);
       needLabelBox ||= isSet(props.widgetData?.label);
       needLabelBox ||= isSet(props.widgetMetaData?.label);
    }
 
+   //////////////////////////////////////////////////////////////////////////////////////////
+   // first look for a label in the widget data, which would override that in the metadata //
+   // note - previously this had a ?: and one was pl={2}, the other was pl={3}...          //
+   //////////////////////////////////////////////////////////////////////////////////////////
+   const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label;
+   let labelElement = (
+      <Typography sx={{cursor: "default", pl: "auto", pt: props.widgetMetaData.type == "parentWidget" ? "1rem" : "auto", fontWeight: 600}} variant="h6" display="inline">
+         {labelToUse}
+      </Typography>
+   );
+
+   if (props.widgetMetaData.tooltip)
+   {
+      labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={false} followCursor={true} placement="bottom-start">{labelElement}</Tooltip>;
+   }
+
    const errorLoading = props.widgetData?.errorLoading !== undefined && props.widgetData?.errorLoading === true;
    const widgetContent =
       <Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
          {
             needLabelBox &&
-            <Box pr={2} display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}} height={"3.5rem"}>
-               <Box pt={2} pb={1}>
+            <Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%", ...props.labelBoxAdditionalSx}} minHeight={"2.5rem"}>
+               <Box>
                   {
                      hasPermission ?
                         props.widgetMetaData?.icon && (
-                           <Box
-                              ml={3}
-                              mt={-4}
-                              sx={{
-                                 display: "flex",
-                                 justifyContent: "center",
-                                 alignItems: "center",
-                                 width: "64px",
-                                 height: "64px",
-                                 borderRadius: "8px",
-                                 background: colors.info.main,
-                                 color: "#ffffff",
-                                 float: "left"
-                              }}
+                           <Box ml={1} mr={2} mt={-4} sx={{
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              width: "64px",
+                              height: "64px",
+                              borderRadius: "8px",
+                              background: colors.info.main,
+                              color: "#ffffff",
+                              float: "left"
+                           }}
                            >
                               <Icon fontSize="medium" color="inherit">
                                  {props.widgetMetaData.icon}
@@ -487,40 +577,24 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                            </Box>
                         ) :
                         (
-                           <Box
-                              ml={3}
-                              mt={-4}
-                              sx={{
-                                 display: "flex",
-                                 justifyContent: "center",
-                                 alignItems: "center",
-                                 width: "64px",
-                                 height: "64px",
-                                 borderRadius: "8px",
-                                 background: colors.info.main,
-                                 color: "#ffffff",
-                                 float: "left"
-                              }}
+                           <Box ml={3} mt={-4} sx={{
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              width: "64px",
+                              height: "64px",
+                              borderRadius: "8px",
+                              background: colors.info.main,
+                              color: "#ffffff",
+                              float: "left"
+                           }}
                            >
                               <Icon fontSize="medium" color="inherit">lock</Icon>
                            </Box>
                         )
                   }
                   {
-                     //////////////////////////////////////////////////////////////////////////////////////////
-                     // first look for a label in the widget data, which would override that in the metadata //
-                     //////////////////////////////////////////////////////////////////////////////////////////
-                     hasPermission && props.widgetData?.label ? (
-                        <Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={2} display="inline-block">
-                           {props.widgetData.label}
-                        </Typography>
-                     ) : (
-                        hasPermission && props.widgetMetaData?.label && (
-                           <Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={3} display="inline-block">
-                              {props.widgetMetaData.label}
-                           </Typography>
-                        )
-                     )
+                     hasPermission && labelToUse && (labelElement)
                   }
                   {
                      hasPermission && (
@@ -530,6 +604,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                         })
                      )
                   }
+                  {props.labelAdditionalElementsLeft}
                </Box>
                <Box>
                   {
@@ -544,7 +619,12 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
             </Box>
          }
          {
-            props.widgetMetaData?.isCard && (reloading ? <LinearProgress color="info" sx={{overflow: "hidden", borderRadius: "0"}} /> : <Box height="0.375rem" />)
+            ///////////////////////////////////////////////////////////////////
+            // turning this off... for now.  maybe make a property in future //
+            ///////////////////////////////////////////////////////////////////
+            /*
+            props.widgetMetaData?.isCard && (reloading ? <LinearProgress color="info" sx={{overflow: "hidden", borderRadius: "0", mx:-2}} /> : <Box height="0.375rem" />)
+            */
          }
          {
             errorLoading ? (
@@ -554,7 +634,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                </Box>
             ) : (
                hasPermission && props.widgetData?.dropdownNeedsSelectedText ? (
-                  <Box pb={3} pr={3} sx={{width: "100%", textAlign: "right"}}>
+                  <Box pb={3} sx={{width: "100%", textAlign: "right"}}>
                      <Typography variant="body2">
                         {props.widgetData?.dropdownNeedsSelectedText}
                      </Typography>
@@ -575,11 +655,12 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          }
       </Box>;
 
+   const padding = props.omitPadding ? "auto" : "24px 16px";
    return props.widgetMetaData?.isCard
-      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%"}} className={fullScreenWidgetClassName}>
+      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className={fullScreenWidgetClassName}>
          {widgetContent}
       </Card>
-      : widgetContent;
+      : <span style={{width: "100%", padding: padding}}>{widgetContent}</span>;
 }
 
 export default Widget;

src/qqq/components/widgets/charts/StackedBarChart.tsx

@@ -28,6 +28,7 @@ import {Bar} from "react-chartjs-2";
 import {useNavigate} from "react-router-dom";
 import colors from "qqq/assets/theme/base/colors";
 import {chartColors, DefaultChartData} from "qqq/components/widgets/charts/DefaultChartData";
+import ChartSubheaderWithData, {ChartSubheaderData} from "qqq/components/widgets/components/ChartSubheaderWithData";
 
 ChartJS.register(
    CategoryScale,
@@ -38,30 +39,89 @@ ChartJS.register(
    Legend
 );
 
-export const options = {
-   responsive: true,
-   animation: {
-      duration: 0
-   },
-   scales: {
-      x: {
-         stacked: true,
-         grid: {offset: false},
-         ticks: {autoSkip: false, maxRotation: 90}
+export const makeOptions = (data: DefaultChartData) =>
+{
+   return({
+      maintainAspectRatio: false,
+      responsive: true,
+      animation: {
+         duration: 0
       },
-      y: {
-         stacked: true,
+      elements: {
+         bar: {
+            borderRadius: 4
+         }
       },
-   },
-};
+      onHover: function (event: any, elements: any[], chart: any)
+      {
+         if(event.type == "mousemove" && elements.length > 0 && data.urls && data.urls.length > elements[0].index && data.urls[elements[0].index])
+         {
+            chart.canvas.style.cursor = "pointer";
+         }
+         else
+         {
+            chart.canvas.style.cursor = "default";
+         }
+      },
+      plugins: {
+         tooltip: {
+            // todo - some configs around this
+            callbacks: {
+               title: function(context: any)
+               {
+                  return ("");
+               },
+               label: function(context: any)
+               {
+                  if(context.dataset.label.startsWith(context.label))
+                  {
+                     return `${context.label}: ${context.formattedValue}`;
+                  }
+                  else
+                  {
+                     return ("");
+                  }
+               }
+            }
+         },
+         legend: {
+            position: "bottom",
+            labels: {
+               usePointStyle: true,
+               pointStyle: "circle",
+               boxHeight: 6,
+               boxWidth: 6,
+               padding: 12,
+               font: {
+                  size: 14
+               }
+            }
+         }
+      },
+      scales: {
+         x: {
+            stacked: true,
+            grid: {display: false},
+            ticks: {autoSkip: false, maxRotation: 90}
+         },
+         y: {
+            stacked: true,
+            position: "right",
+            ticks: {precision: 0}
+         },
+      },
+   });
+}
 
 interface Props
 {
    data: DefaultChartData;
+   chartSubheaderData?: ChartSubheaderData;
 }
 
 const {gradients} = colors;
-function StackedBarChart({data}: Props): JSX.Element
+
+function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
 {
    const navigate = useNavigate();
 
@@ -70,23 +130,30 @@ function StackedBarChart({data}: Props): JSX.Element
 
    const handleClick = (e: Array<{}>) =>
    {
-      if(e && e.length > 0 && data?.urls && data?.urls.length)
+      if (e && e.length > 0 && data?.urls && data?.urls.length)
       {
          // @ts-ignore
          navigate(data.urls[e[0]["index"]]);
       }
       console.log(e);
-   }
+   };
 
    useEffect(() =>
    {
-      if(data)
+      if (data)
       {
          data?.datasets.forEach((dataset: any, index: number) =>
          {
             if (!dataset.backgroundColor)
             {
-               dataset.backgroundColor = gradients[chartColors[index]].state;
+               if (gradients[chartColors[index]])
+               {
+                  dataset.backgroundColor = gradients[chartColors[index]].state;
+               }
+               else
+               {
+                  dataset.backgroundColor = chartColors[index];
+               }
             }
          });
          setStateData(stateData);
@@ -95,8 +162,13 @@ function StackedBarChart({data}: Props): JSX.Element
 
 
    return data ? (
-      <Box p={3}><Bar data={data} options={options} getElementsAtEvent={handleClick} /></Box>
-   ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} /> ;
+      <Box>
+         {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
+         <Box width="100%" height="300px">
+            <Bar data={data} options={makeOptions(data)} getElementsAtEvent={handleClick} />
+         </Box>
+      </Box>
+   ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} />;
 }
 
 export default StackedBarChart;

src/qqq/components/widgets/charts/barchart/BarChart.tsx

@@ -63,7 +63,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },
@@ -86,7 +86,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },

src/qqq/components/widgets/charts/barchart/HorizontalBarChart.tsx

@@ -67,7 +67,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },
@@ -88,7 +88,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },

src/qqq/components/widgets/charts/linechart/DefaultLineChart.tsx

@@ -81,7 +81,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },
@@ -107,7 +107,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "Roboto",
+               family: "SF Pro Display,Roboto",
                style: "normal",
                lineHeight: 2,
             },

src/qqq/components/widgets/charts/linechart/LineChartConfigs.ts

@@ -69,7 +69,7 @@ function configs(labels: any, datasets: any)
                   font: {
                      size: 14,
                      weight: 300,
-                     family: "Roboto",
+                     family: "SF Pro Display,Roboto",
                      style: "normal",
                      lineHeight: 2,
                   },
@@ -90,7 +90,7 @@ function configs(labels: any, datasets: any)
                   font: {
                      size: 14,
                      weight: 300,
-                     family: "Roboto",
+                     family: "SF Pro Display,Roboto",
                      style: "normal",
                      lineHeight: 2,
                   },

src/qqq/components/widgets/charts/piechart/PieChart.tsx

@@ -30,6 +30,7 @@ import {useNavigate} from "react-router-dom";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import {chartColors} from "qqq/components/widgets/charts/DefaultChartData";
 import configs from "qqq/components/widgets/charts/piechart/PieChartConfigs";
+import ChartSubheaderWithData, {ChartSubheaderData} from "qqq/components/widgets/components/ChartSubheaderWithData";
 
 //////////////////////////////////////////
 // structure of expected bar chart data //
@@ -51,25 +52,29 @@ interface Props
 {
    description?: string;
    chartData: PieChartData;
+   chartSubheaderData?: ChartSubheaderData;
 
    [key: string]: any;
 }
 
 
-function PieChart({description, chartData}: Props): JSX.Element
+function PieChart({description, chartData, chartSubheaderData}: Props): JSX.Element
 {
    const navigate = useNavigate();
    const [dataLoaded, setDataLoaded] = useState(false);
 
    if (chartData && chartData.dataset)
    {
-      chartData.dataset.backgroundColors = chartColors;
+      if(!chartData.dataset.backgroundColors)
+      {
+         chartData.dataset.backgroundColors = chartColors;
+      }
    }
-   const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {});
+   const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {}, chartData?.dataset?.urls);
 
    useEffect(() =>
    {
-      if(chartData)
+      if (chartData)
       {
          setDataLoaded(true);
       }
@@ -77,53 +82,51 @@ function PieChart({description, chartData}: Props): JSX.Element
 
    const handleClick = (e: Array<{}>) =>
    {
-      if(e && e.length > 0 && chartData?.dataset?.urls && chartData?.dataset?.urls.length)
+      if (e && e.length > 0 && chartData?.dataset?.urls && chartData?.dataset?.urls.length)
       {
          // @ts-ignore
          navigate(chartData.dataset.urls[e[0]["index"]]);
       }
-   }
+   };
 
    return (
-      <Card sx={{minHeight: "400px", boxShadow: "none", height: "100%", width: "100%", display: "flex", flexGrow: 1}}>
-         <Box mt={3}>
-            <Grid container alignItems="center">
-               <Grid item xs={12} justifyContent="center">
-                  <Box width="100%" height="80%" py={2} pr={2} pl={2}>
-                     {useMemo(
-                        () => (
-                           <Pie data={data} options={options} getElementsAtEvent={handleClick} />
-                        ),
-                        [chartData]
-                     )}
+      <Card sx={{boxShadow: "none", height: "100%", width: "100%", display: "flex", flexGrow: 1, border: 0}}>
+         <Box>
+            <Box>
+               {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
+            </Box>
+            <Box width="100%" height="300px">
+               {useMemo(
+                  () => (
+                     <Pie data={data} options={options} getElementsAtEvent={handleClick} />
+                  ),
+                  [chartData]
+               )}
+            </Box>
+            {
+               !chartData && (
+                  <Box sx={{
+                     position: "absolute",
+                     top: "40%",
+                     left: "50%",
+                     transform: "translate(-50%, -50%)",
+                     display: "flex",
+                     justifyContent: "center"
+                  }}>
+                     <Skeleton sx={{width: "150px", height: "150px"}} variant="circular" />
                   </Box>
-                  {
-                     ! chartData && (
-                        <Box sx={{
-                           position: "absolute",
-                           top: "40%",
-                           left: "50%",
-                           transform: "translate(-50%, -50%)",
-                           display: "flex",
-                           justifyContent: "center"}}>
-                           <Skeleton sx={{width: "150px", height: "150px"}} variant="circular"/>
-                        </Box>
-                     )
-                  }
-               </Grid>
-            </Grid>
-            <Divider />
+               )
+            }
             {
                description && (
-                  <Grid container>
-                     <Grid item xs={12}>
-                        <Box pb={2} px={2} display="flex" flexDirection={{xs: "column", sm: "row"}} mt="auto">
-                           <MDTypography variant="button" color="text" fontWeight="light">
-                              {parse(description)}
-                           </MDTypography>
-                        </Box>
-                     </Grid>
-                  </Grid>
+                  <>
+                     <Divider />
+                     <Box display="flex" flexDirection={{xs: "column", sm: "row"}} mt="auto">
+                        <MDTypography variant="button" color="text" fontWeight="light">
+                           {parse(description)}
+                        </MDTypography>
+                     </Box>
+                  </>
                )
             }
          </Box>

src/qqq/components/widgets/charts/piechart/PieChartConfigs.ts

@@ -23,17 +23,23 @@ import colors from "qqq/assets/theme/base/colors";
 
 const {gradients, dark} = colors;
 
-function configs(labels: any, datasets: any)
+function configs(labels: any, datasets: any, urls: string[] | undefined)
 {
    const backgroundColors = [];
 
    if (datasets.backgroundColors)
    {
       datasets.backgroundColors.forEach((color: string) =>
-         gradients[color]
-            ? backgroundColors.push(gradients[color].state)
-            : backgroundColors.push(dark.main)
-      );
+      {
+         if (gradients[color])
+         {
+            backgroundColors.push(gradients[color].state);
+         }
+         else
+         {
+            backgroundColors.push(color);
+         }
+      });
    }
    else
    {
@@ -58,12 +64,60 @@ function configs(labels: any, datasets: any)
          ],
       },
       options: {
-         maintainAspectRatio: true,
+         maintainAspectRatio: false,
          responsive: true,
-         aspectRatio: 2,
+         onHover: function (event: any, elements: any[], chart: any)
+         {
+            if(event.type == "mousemove" && elements.length > 0 && urls && urls.length > elements[0].index && urls[elements[0].index])
+            {
+               chart.canvas.style.cursor = "pointer";
+            }
+            else
+            {
+               chart.canvas.style.cursor = "default";
+            }
+         },
          plugins: {
+            tooltip: {
+               callbacks: {
+                  label: function(context: any)
+                  {
+                     let percentSuffix = "";
+                     try
+                     {
+                        //////////////////////////////////////////////////////////////////////////
+                        // make percent by dividing this slice's value by the sum of all values //
+                        //////////////////////////////////////////////////////////////////////////
+                        const thisSlice = context.dataset.data[context.dataIndex];
+                        const sum = context.dataset.data.reduce((acc: number, val: number) => acc + val, 0);
+                        percentSuffix = " (" + Number(100 * thisSlice / sum).toFixed(1) + "%)";
+                     }
+                     catch(e)
+                     {
+                        // leave percentSuffix empty
+                     }
+
+                     ////////////////////////////////////////////////////////////////////////////////
+                     // our labels already have the value in them - so just use the label in the   //
+                     // tooltip (lib by default puts label + value, so we were duplicating value!) //
+                     // oh, and we add percent if we can                                           //
+                     ////////////////////////////////////////////////////////////////////////////////
+                     return context.label + percentSuffix;
+                  }
+               }
+            },
             legend: {
                position: "bottom",
+               labels: {
+                  usePointStyle: true,
+                  pointStyle: "circle",
+                  padding: 12,
+                  boxHeight: 8,
+                  boxWidth: 8,
+                  font: {
+                     size: 14
+                  }
+               }
             },
          },
          scales: {

src/qqq/components/widgets/components/ChartSubheaderWithData.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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 {Skeleton} from "@mui/material";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import {Link} from "react-router-dom";
+import colors from "qqq/assets/theme/base/colors";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+export interface ChartSubheaderData
+{
+   mainNumber: number;
+   vsPreviousPercent: number;
+   vsPreviousNumber: number;
+   isUpVsPrevious: boolean;
+   isGoodVsPrevious: boolean;
+   vsDescription: string;
+   mainNumberUrl: string;
+   previousNumberUrl: string;
+}
+
+interface Props
+{
+   chartSubheaderData: ChartSubheaderData;
+}
+
+const GOOD_COLOR = colors.success.main;
+const BAD_COLOR = colors.error.main;
+const UP_ICON = "arrow_drop_up";
+const DOWN_ICON = "arrow_drop_down";
+
+function StackedBarChart({chartSubheaderData}: Props): JSX.Element
+{
+   let color = "black";
+   if (chartSubheaderData && chartSubheaderData.isGoodVsPrevious != null)
+   {
+      color = chartSubheaderData.isGoodVsPrevious ? GOOD_COLOR : BAD_COLOR;
+   }
+
+   let iconName: string = null;
+   if (chartSubheaderData && chartSubheaderData.isUpVsPrevious != null)
+   {
+      iconName = chartSubheaderData.isUpVsPrevious ? UP_ICON : DOWN_ICON;
+   }
+
+   let mainNumberElement = <Typography variant="h3" display="inline">{ValueUtils.getFormattedNumber(chartSubheaderData.mainNumber)}</Typography>;
+   if(chartSubheaderData.mainNumberUrl)
+   {
+      mainNumberElement = <Link to={chartSubheaderData.mainNumberUrl}>{mainNumberElement}</Link>
+   }
+   mainNumberElement = <Box pr={1}>{mainNumberElement}</Box>
+
+   let previousNumberElement = (
+      <>
+         <Typography display="block" variant="body2" sx={{color: colors.gray.main, fontSize: ".875rem", fontWeight: 500}}>
+            &nbsp;{chartSubheaderData.vsDescription}
+            {chartSubheaderData.vsPreviousNumber && (<>&nbsp;({ValueUtils.getFormattedNumber(chartSubheaderData.vsPreviousNumber)})</>)}
+         </Typography>
+      </>
+   )
+
+   if(chartSubheaderData.previousNumberUrl)
+   {
+      previousNumberElement = <Link to={chartSubheaderData.previousNumberUrl}>{previousNumberElement}</Link>
+   }
+
+   return chartSubheaderData ? (
+      <Box display="inline-flex" alignItems="flex-end" flexWrap="wrap">
+         {mainNumberElement}
+         {
+            chartSubheaderData.vsPreviousPercent != null && iconName != null && (
+               <Box display="inline-flex" alignItems="baseline" pb={0.5} ml={-0.5}>
+                  <Icon fontSize="medium" sx={{color: color, alignSelf: "flex-end"}}>{iconName}</Icon>
+                  <Typography display="inline" variant="body2" sx={{color: color, fontSize: ".875rem", fontWeight: 500}}>{chartSubheaderData.vsPreviousPercent}%</Typography>
+                  {previousNumberElement}
+               </Box>
+            )
+         }
+      </Box>
+   ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "12px"}} />;
+}
+
+export default StackedBarChart;

src/qqq/components/widgets/components/DropdownMenu.tsx

@@ -1,179 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2022.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {Collapse, Theme} from "@mui/material";
-import Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
-import TextField from "@mui/material/TextField";
-import {SxProps} from "@mui/system";
-import {Field, Form, Formik} from "formik";
-import React, {useState} from "react";
-import MDInput from "qqq/components/legacy/MDInput";
-import FilterUtils from "qqq/utils/qqq/FilterUtils";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-
-
-export interface DropdownOption
-{
-   id: string;
-   label: string;
-}
-
-/////////////////////////
-// inputs and defaults //
-/////////////////////////
-interface Props
-{
-   name: string;
-   defaultValue?: any;
-   label?: string;
-   dropdownOptions?: DropdownOption[];
-   onChangeCallback?: (dropdownLabel: string, data: any) => void;
-   sx?: SxProps<Theme>;
-}
-
-interface StartAndEndDate
-{
-   startDate?: string,
-   endDate?: string
-}
-
-function parseCustomTimeValuesFromDefaultValue(defaultValue: any): StartAndEndDate
-{
-   const customTimeValues: StartAndEndDate = {};
-   if(defaultValue && defaultValue.id)
-   {
-      var parts = defaultValue.id.split(",");
-      if(parts.length >= 2)
-      {
-         customTimeValues["startDate"] = ValueUtils.formatDateTimeValueForForm(parts[1]);
-      }
-      if(parts.length >= 3)
-      {
-         customTimeValues["endDate"] = ValueUtils.formatDateTimeValueForForm(parts[2]);
-      }
-   }
-
-   return (customTimeValues);
-}
-
-function makeBackendValuesFromFrontendValues(frontendDefaultValues: StartAndEndDate): StartAndEndDate
-{
-   const backendTimeValues: StartAndEndDate = {};
-   if(frontendDefaultValues && frontendDefaultValues.startDate)
-   {
-      backendTimeValues.startDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.startDate);
-   }
-   if(frontendDefaultValues && frontendDefaultValues.endDate)
-   {
-      backendTimeValues.endDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.endDate);
-   }
-   return (backendTimeValues);
-}
-
-function DropdownMenu({name, defaultValue, label, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
-{
-   const [customTimesVisible, setCustomTimesVisible] = useState(defaultValue && defaultValue.id && defaultValue.id.startsWith("custom,"));
-   const [customTimeValuesFrontend, setCustomTimeValuesFrontend] = useState(parseCustomTimeValuesFromDefaultValue(defaultValue) as StartAndEndDate);
-   const [customTimeValuesBackend, setCustomTimeValuesBackend] = useState(makeBackendValuesFromFrontendValues(customTimeValuesFrontend) as StartAndEndDate);
-   const [debounceTimeout, setDebounceTimeout] = useState(null as any);
-
-   const handleOnChange = (event: any, newValue: any, reason: string) =>
-   {
-      const isTimeframeCustom = name == "timeframe" && newValue && newValue.id == "custom"
-      setCustomTimesVisible(isTimeframeCustom);
-
-      if(isTimeframeCustom)
-      {
-         callOnChangeCallbackIfCustomTimeframeHasDateValues();
-      }
-      else
-      {
-         onChangeCallback(label, newValue);
-      }
-   };
-
-   const callOnChangeCallbackIfCustomTimeframeHasDateValues = () =>
-   {
-      if(customTimeValuesBackend["startDate"] && customTimeValuesBackend["endDate"])
-      {
-         onChangeCallback(label, {id: `custom,${customTimeValuesBackend["startDate"]},${customTimeValuesBackend["endDate"]}`, label: "Custom"});
-      }
-   }
-
-   let customTimes = <></>;
-   if (name == "timeframe")
-   {
-      const handleSubmit = async (values: any, actions: any) =>
-      {
-      };
-
-      const dateChanged = (fieldName: "startDate" | "endDate", event: any) =>
-      {
-         customTimeValuesFrontend[fieldName] = event.target.value;
-         customTimeValuesBackend[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(event.target.value);
-
-         clearTimeout(debounceTimeout);
-         const newDebounceTimeout = setTimeout(() =>
-         {
-            callOnChangeCallbackIfCustomTimeframeHasDateValues();
-         }, 500);
-         setDebounceTimeout(newDebounceTimeout);
-      };
-
-      customTimes = <Box sx={{display: "inline-block", position: "relative", top: "-7px"}}>
-         <Collapse orientation="horizontal" in={customTimesVisible}>
-            <Formik initialValues={customTimeValuesFrontend} onSubmit={handleSubmit}>
-               {({}) => (
-                  <Form id="timeframe-form" autoComplete="off">
-                     <Field name="startDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe Start" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("startDate", event)} />
-                     <Field name="endDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe End" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("endDate", event)} />
-                  </Form>
-               )}
-            </Formik>
-         </Collapse>
-      </Box>;
-   }
-
-   return (
-      dropdownOptions ? (
-         <span style={{whiteSpace: "nowrap", display: "flex"}} className="dashboardDropdownMenu">
-            <Autocomplete
-               defaultValue={defaultValue}
-               size="small"
-               disablePortal
-               id={`${label}-combo-box`}
-               options={dropdownOptions}
-               sx={{...sx, cursor: "pointer", display: "inline-block"}}
-               onChange={handleOnChange}
-               isOptionEqualToValue={(option, value) => option.id === value.id}
-               renderInput={(params: any) => <TextField {...params} label={label} />}
-               renderOption={(props, option: DropdownOption) => (
-                  <li {...props} style={{whiteSpace: "normal"}}>{option.label}</li>
-               )}
-            />
-            {customTimes}
-         </span>
-      ) : null
-   );
-}
-
-export default DropdownMenu;

src/qqq/components/widgets/components/WidgetDropdownMenu.tsx

@@ -0,0 +1,335 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Collapse, Theme, InputAdornment} from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import TextField from "@mui/material/TextField";
+import {SxProps} from "@mui/system";
+import {Field, Form, Formik} from "formik";
+import React, {useState} from "react";
+import colors from "qqq/assets/theme/base/colors";
+import MDInput from "qqq/components/legacy/MDInput";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+
+export interface DropdownOption
+{
+   id: string;
+   label: string;
+}
+
+/////////////////////////
+// inputs and defaults //
+/////////////////////////
+interface Props
+{
+   name: string;
+   defaultValue?: any;
+   label?: string;
+   startIcon?: string;
+   width?: number;
+   disableClearable?: boolean;
+   allowBackAndForth?: boolean;
+   backAndForthInverted?: boolean;
+   dropdownOptions?: DropdownOption[];
+   onChangeCallback?: (dropdownLabel: string, data: any) => void;
+   sx?: SxProps<Theme>;
+}
+
+interface StartAndEndDate
+{
+   startDate?: string,
+   endDate?: string
+}
+
+function parseCustomTimeValuesFromDefaultValue(defaultValue: any): StartAndEndDate
+{
+   const customTimeValues: StartAndEndDate = {};
+   if (defaultValue && defaultValue.id)
+   {
+      var parts = defaultValue.id.split(",");
+      if (parts.length >= 2)
+      {
+         customTimeValues["startDate"] = ValueUtils.formatDateTimeValueForForm(parts[1]);
+      }
+      if (parts.length >= 3)
+      {
+         customTimeValues["endDate"] = ValueUtils.formatDateTimeValueForForm(parts[2]);
+      }
+   }
+
+   return (customTimeValues);
+}
+
+function makeBackendValuesFromFrontendValues(frontendDefaultValues: StartAndEndDate): StartAndEndDate
+{
+   const backendTimeValues: StartAndEndDate = {};
+   if (frontendDefaultValues && frontendDefaultValues.startDate)
+   {
+      backendTimeValues.startDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.startDate);
+   }
+   if (frontendDefaultValues && frontendDefaultValues.endDate)
+   {
+      backendTimeValues.endDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.endDate);
+   }
+   return (backendTimeValues);
+}
+
+function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disableClearable, allowBackAndForth, backAndForthInverted, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
+{
+   const [customTimesVisible, setCustomTimesVisible] = useState(defaultValue && defaultValue.id && defaultValue.id.startsWith("custom,"));
+   const [customTimeValuesFrontend, setCustomTimeValuesFrontend] = useState(parseCustomTimeValuesFromDefaultValue(defaultValue) as StartAndEndDate);
+   const [customTimeValuesBackend, setCustomTimeValuesBackend] = useState(makeBackendValuesFromFrontendValues(customTimeValuesFrontend) as StartAndEndDate);
+   const [debounceTimeout, setDebounceTimeout] = useState(null as any);
+
+   const [isOpen, setIsOpen] = useState(false);
+   const [value, setValue] = useState(defaultValue);
+   const [inputValue, setInputValue] = useState("");
+
+   const [backDisabled, setBackDisabled] = useState(false);
+   const [forthDisabled, setForthDisabled] = useState(false);
+
+   const doForceOpen = (event: React.MouseEvent<HTMLDivElement>) =>
+   {
+      setIsOpen(true);
+   };
+
+   function getSelectedIndex(value: DropdownOption)
+   {
+      let currentIndex = null;
+      for (let i = 0; i < dropdownOptions.length; i++)
+      {
+         if (value && dropdownOptions[i].id == value.id)
+         {
+            currentIndex = i;
+            break;
+         }
+      }
+      return currentIndex;
+   }
+
+   const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1) =>
+   {
+      event.stopPropagation();
+      let currentIndex = getSelectedIndex(value);
+
+      if (currentIndex == null)
+      {
+         console.log("No current value.... TODO");
+         return;
+      }
+
+      if (currentIndex == 0 && direction == -1)
+      {
+         console.log("Can't go -1");
+         return;
+      }
+
+      if (currentIndex == dropdownOptions.length - 1 && direction == 1)
+      {
+         console.log("Can't go +1");
+         return;
+      }
+
+      handleOnChange(event, dropdownOptions[currentIndex + direction], "navigatedBackAndForth");
+   };
+
+
+   const handleOnChange = (event: any, newValue: any, reason: string) =>
+   {
+      setValue(newValue);
+
+      const isTimeframeCustom = name == "timeframe" && newValue && newValue.id == "custom";
+      setCustomTimesVisible(isTimeframeCustom);
+
+      if (isTimeframeCustom)
+      {
+         callOnChangeCallbackIfCustomTimeframeHasDateValues();
+      }
+      else
+      {
+         onChangeCallback(label, newValue);
+      }
+
+      /* this had bugs (seemed to not take immediate effect?), so don't use for now.
+      let currentIndex = getSelectedIndex(value);
+      if(currentIndex == 0)
+      {
+         backAndForthInverted ? setForthDisabled(true) : setBackDisabled(true);
+      }
+      else
+      {
+         backAndForthInverted ? setForthDisabled(false) : setBackDisabled(false);
+      }
+
+      if (currentIndex == dropdownOptions.length - 1)
+      {
+         backAndForthInverted ? setBackDisabled(true) : setForthDisabled(true);
+      }
+      else
+      {
+         backAndForthInverted ? setBackDisabled(false) : setForthDisabled(false);
+      }
+      */
+   };
+
+   const handleOnInputChange = (event: any, newValue: any, reason: string) =>
+   {
+      setInputValue(newValue);
+   };
+
+   const callOnChangeCallbackIfCustomTimeframeHasDateValues = () =>
+   {
+      if (customTimeValuesBackend["startDate"] && customTimeValuesBackend["endDate"])
+      {
+         onChangeCallback(label, {id: `custom,${customTimeValuesBackend["startDate"]},${customTimeValuesBackend["endDate"]}`, label: "Custom"});
+      }
+   };
+
+   let customTimes = <></>;
+   if (name == "timeframe")
+   {
+      const handleSubmit = async (values: any, actions: any) =>
+      {
+      };
+
+      const dateChanged = (fieldName: "startDate" | "endDate", event: any) =>
+      {
+         customTimeValuesFrontend[fieldName] = event.target.value;
+         customTimeValuesBackend[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(event.target.value);
+
+         clearTimeout(debounceTimeout);
+         const newDebounceTimeout = setTimeout(() =>
+         {
+            callOnChangeCallbackIfCustomTimeframeHasDateValues();
+         }, 500);
+         setDebounceTimeout(newDebounceTimeout);
+      };
+
+      customTimes = <Box sx={{display: "inline-block", position: "relative", top: "-7px"}}>
+         <Collapse orientation="horizontal" in={customTimesVisible}>
+            <Formik initialValues={customTimeValuesFrontend} onSubmit={handleSubmit}>
+               {({}) => (
+                  <Form id="timeframe-form" autoComplete="off">
+                     <Field name="startDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe Start" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("startDate", event)} />
+                     <Field name="endDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe End" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("endDate", event)} />
+                  </Form>
+               )}
+            </Formik>
+         </Collapse>
+      </Box>;
+   }
+
+   const startAdornment = startIcon ? <Icon sx={{fontSize: "1.25rem!important", color: colors.gray.main, paddingLeft: allowBackAndForth ? "auto" : "0.25rem", width: allowBackAndForth ? "1.5rem" : "1.75rem"}}>{startIcon}</Icon> : null;
+
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // we tried this end-adornment, for a different style of down-arrow - but by using it, we then messed something else up (i forget what), so... not used right now //
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const endAdornment = <InputAdornment position="end" sx={{position: "absolute", right: allowBackAndForth ? "-0.5rem" : "0.5rem"}}><Icon sx={{fontSize: "1.75rem!important", color: colors.gray.main}}>keyboard_arrow_down</Icon></InputAdornment>;
+
+   const fontSize = "1rem";
+   let optionPaddingLeftRems = 0.75;
+   if(startIcon)
+   {
+      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75
+   }
+   if(allowBackAndForth)
+   {
+      optionPaddingLeftRems += 2.5;
+   }
+
+   return (
+      dropdownOptions ? (
+         <Box sx={{whiteSpace: "nowrap", display: "flex",
+            "& .MuiPopperUnstyled-root": {
+               border: `1px solid ${colors.grayLines.main}`,
+               borderTop: "none",
+               borderRadius: "0 0 0.75rem 0.75rem",
+               padding: 0,
+            }, "& .MuiPaper-rounded": {
+               borderRadius: "0 0 0.75rem 0.75rem",
+            }
+         }} className="dashboardDropdownMenu">
+            <Autocomplete
+               id={`${label}-combo-box`}
+
+               defaultValue={defaultValue}
+               value={value}
+               onChange={handleOnChange}
+               inputValue={inputValue}
+               onInputChange={handleOnInputChange}
+
+               isOptionEqualToValue={(option, value) => option.id === value.id}
+
+               open={isOpen}
+               onOpen={() => setIsOpen(true)}
+               onClose={() => setIsOpen(false)}
+
+               size="small"
+               disablePortal
+               disableClearable={disableClearable}
+               options={dropdownOptions}
+               sx={{
+                  ...sx,
+                  cursor: "pointer",
+                  display: "inline-block",
+                  "& .MuiOutlinedInput-notchedOutline": {
+                     border: "none"
+                  },
+               }}
+               renderInput={(params: any) =>
+                  <>
+                     <Box sx={{width: `${width}px`, background: "white", borderRadius: isOpen ? "0.75rem 0.75rem 0 0" : "0.75rem", border: `1px solid ${colors.grayLines.main}`, "& *": {cursor: "pointer"}}} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
+                        {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
+                        <TextField {...params} placeholder={label} sx={{
+                           "& .MuiInputBase-input": {
+                              fontSize: fontSize
+                           }
+                        }} InputProps={{...params.InputProps, startAdornment: startAdornment/*, endAdornment: endAdornment*/}}
+                        />
+                        {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
+                     </Box>
+                  </>
+               }
+               renderOption={(props, option: DropdownOption) => (
+                  <li {...props} style={{whiteSpace: "normal", fontSize: fontSize, paddingLeft: `${optionPaddingLeftRems}rem`}}>{option.label}</li>
+               )}
+
+               noOptionsText={<Box fontSize={fontSize}>No options found</Box>}
+
+               slotProps={{
+                  popper: {
+                     sx: {
+                        width: `${width}px!important`
+                     }
+                  }
+               }}
+            />
+            {customTimes}
+         </Box>
+      ) : null
+   );
+}
+
+export default WidgetDropdownMenu;

src/qqq/components/widgets/misc/DataBagViewer.tsx

@@ -286,18 +286,15 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
                         <Grid container spacing={3}>
                            <Grid item xs={12}>
                               <>
-                                 <Box display="flex" alignItems="center" justifyContent="space-between" gap={2} mt={-6}>
-                                    <Typography variant="h5" p={2}></Typography>
-                                    <Tabs
-                                       sx={{m: 1}}
-                                       value={selectedTab}
-                                       onChange={(event, newValue) => changeTab(newValue)}
-                                       variant="standard"
-                                    >
-                                       <Tab label="Raw Data" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "150px"}} />
-                                       <Tab label="Data Preview" id="simple-tab-1" aria-controls="simple-tabpanel-1" sx={{width: "150px"}} />
-                                    </Tabs>
-                                 </Box>
+                                 <Tabs
+                                    sx={{m: 0, mb: 1, mt: -3}}
+                                    value={selectedTab}
+                                    onChange={(event, newValue) => changeTab(newValue)}
+                                    variant="standard"
+                                 >
+                                    <Tab label="Raw Data" id="simple-tab-0" aria-controls="simple-tabpanel-0" />
+                                    <Tab label="Data Preview" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
+                                 </Tabs>
 
                                  <TabPanel index={0} value={selectedTab}>
                                     <Grid container>

src/qqq/components/widgets/misc/RecordGridWidget.tsx

@@ -22,10 +22,15 @@
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {DataGridPro, GridCallbackDetails, GridRowParams, MuiEvent} from "@mui/x-data-grid-pro";
-import React, {useEffect, useState} from "react";
-import {useNavigate} from "react-router-dom";
-import Widget, {AddNewRecordButton, ExportDataButton, HeaderLink, LabelComponent} from "qqq/components/widgets/Widget";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Icon from "@mui/material/Icon";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
+import Typography from "@mui/material/Typography";
+import {DataGridPro, GridCallbackDetails, GridEventListener, GridFilterModel, gridPreferencePanelStateSelector, GridRowParams, GridSelectionModel, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, MuiEvent, useGridApiContext, useGridApiEventHandler, useGridSelector} from "@mui/x-data-grid-pro";
+import React, {useEffect, useRef, useState} from "react";
+import {useNavigate, Link} from "react-router-dom";
+import Widget, {AddNewRecordButton, LabelComponent} from "qqq/components/widgets/Widget";
 import DataGridUtils from "qqq/utils/DataGridUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
@@ -43,10 +48,15 @@ const qController = Client.getInstance();
 
 function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
 {
+   const instance = useRef({timer: null});
    const [rows, setRows] = useState([]);
    const [records, setRecords] = useState([] as QRecord[])
    const [columns, setColumns] = useState([]);
    const [allColumns, setAllColumns] = useState([])
+   const [csv, setCsv] = useState(null as string);
+   const [fileName, setFileName] = useState(null as string);
+   const [gridMouseDownX, setGridMouseDownX] = useState(0);
+   const [gridMouseDownY, setGridMouseDownY] = useState(0);
    const navigate = useNavigate();
 
    useEffect(() =>
@@ -75,6 +85,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////
          // capture all-columns to use for the export (before we might splice some away from the on-screen display) //
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         const allColumns = [... columns];
          setAllColumns(JSON.parse(JSON.stringify(columns)));
 
          ////////////////////////////////////////////////////////////////
@@ -95,39 +106,42 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          setRows(rows);
          setRecords(records)
          setColumns(columns);
-      }
-   }, [data]);
 
-   const exportCallback = () =>
-   {
-      let csv = "";
-      for (let i = 0; i < allColumns.length; i++)
-      {
-         csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`
-      }
-      csv += "\n";
-
-      for (let i = 0; i < records.length; i++)
-      {
-         for (let j = 0; j < allColumns.length; j++)
+         let csv = "";
+         for (let i = 0; i < allColumns.length; i++)
          {
-            const value = records[i].displayValues.get(allColumns[j].field) ?? records[i].values.get(allColumns[j].field)
-            csv += `${j > 0 ? "," : ""}"${ValueUtils.cleanForCsv(value)}"`
+            csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`
          }
          csv += "\n";
-      }
 
-      const fileName = (data?.label ?? widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
-      HtmlUtils.download(fileName, csv);
-   }
+         for (let i = 0; i < records.length; i++)
+         {
+            for (let j = 0; j < allColumns.length; j++)
+            {
+               const value = records[i].displayValues.get(allColumns[j].field) ?? records[i].values.get(allColumns[j].field)
+               csv += `${j > 0 ? "," : ""}"${ValueUtils.cleanForCsv(value)}"`
+            }
+            csv += "\n";
+         }
+
+         const fileName = (data?.label ?? widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
+
+         setCsv(csv);
+         setFileName(fileName);
+      }
+   }, [data]);
 
    ///////////////////
    // view all link //
    ///////////////////
-   const labelAdditionalComponentsLeft: LabelComponent[] = []
+   const labelAdditionalElementsLeft: JSX.Element[] = [];
    if(data && data.viewAllLink)
    {
-      labelAdditionalComponentsLeft.push(new HeaderLink("View All", data.viewAllLink));
+      labelAdditionalElementsLeft.push(
+         <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
+            <Link to={data.viewAllLink}>View All</Link>
+         </Typography>
+      )
    }
 
    ///////////////////
@@ -149,7 +163,26 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
       }
    }
 
-   labelAdditionalComponentsLeft.push(new ExportDataButton(() => exportCallback(), isExportDisabled, tooltipTitle))
+   const onExportClick = () =>
+   {
+      if(csv)
+      {
+         HtmlUtils.download(fileName, csv);
+      }
+      else
+      {
+         alert("There is no data available to export.")
+      }
+   }
+
+   if(widgetMetaData?.showExportButton)
+   {
+      labelAdditionalElementsLeft.push(
+         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative">
+            <Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></Tooltip>
+         </Typography>
+      );
+   }
 
    ////////////////////
    // add new button //
@@ -166,61 +199,102 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
    }
 
 
+   /////////////////////////////////////////////////////////////////
+   // if a grid preference window is open, ignore and reset timer //
+   /////////////////////////////////////////////////////////////////
    const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
    {
       (async () =>
       {
          const qInstance = await qController.loadMetaData()
-         const tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
+         let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
          if(tablePath)
          {
-            navigate(`${tablePath}/${params.id}`);
+            tablePath = `${tablePath}/${params.id}`;
+            DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance);
          }
       })();
    };
 
+   /*******************************************************************************
+    ** So that we can useGridApiContext to add event handlers for mouse down and
+    ** row double-click (to make it so you don't accidentally click into records),
+    ** we have to define a grid component, so even though we don't want a custom
+    ** toolbar, that's why we have this (and why it returns empty)
+    *******************************************************************************/
+   function CustomToolbar()
+   {
+      const handleMouseDown: GridEventListener<"cellMouseDown"> = ( params, event, details ) =>
+      {
+         setGridMouseDownX(event.clientX);
+         setGridMouseDownY(event.clientY);
+         clearTimeout(instance.current.timer);
+      };
+
+      const handleDoubleClick: GridEventListener<"rowDoubleClick"> = (event: any) =>
+      {
+         clearTimeout(instance.current.timer);
+      };
+
+      const apiRef = useGridApiContext();
+      useGridApiEventHandler(apiRef, "cellMouseDown", handleMouseDown);
+      useGridApiEventHandler(apiRef, "rowDoubleClick", handleDoubleClick);
+
+      return (<GridToolbarContainer />);
+   }
+
 
    return (
       <Widget
          widgetMetaData={widgetMetaData}
          widgetData={data}
-         labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
+         labelAdditionalElementsLeft={labelAdditionalElementsLeft}
          labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+         labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
       >
-         <DataGridPro
-            autoHeight
-            rows={rows}
-            disableSelectionOnClick
-            columns={columns}
-            rowBuffer={10}
-            getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
-            onRowClick={handleRowClick}
-            // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
-            // components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
-            // pinnedColumns={pinnedColumns}
-            // onPinnedColumnsChange={handlePinnedColumnsChange}
-            // pagination
-            // paginationMode="server"
-            // rowsPerPageOptions={[20]}
-            // sortingMode="server"
-            // filterMode="server"
-            // page={pageNumber}
-            // checkboxSelection
-            rowCount={data && data.totalRows}
-            // onPageSizeChange={handleRowsPerPageChange}
-            // onStateChange={handleStateChange}
-            // density={density}
-            // loading={loading}
-            // filterModel={filterModel}
-            // onFilterModelChange={handleFilterChange}
-            // columnVisibilityModel={columnVisibilityModel}
-            // onColumnVisibilityModelChange={handleColumnVisibilityChange}
-            // onColumnOrderChange={handleColumnOrderChange}
-            // onSelectionModelChange={selectionChanged}
-            // onSortModelChange={handleSortChange}
-            // sortingOrder={[ "asc", "desc" ]}
-            // sortModel={columnSortModel}
-         />
+         <Box mx={-2} mb={-3}>
+            <DataGridPro
+               autoHeight
+               sx={{
+                  borderBottom: "none",
+                  borderLeft: "none",
+                  borderRight: "none"
+               }}
+               rows={rows}
+               disableSelectionOnClick
+               columns={columns}
+               rowBuffer={10}
+               getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
+               onRowClick={handleRowClick}
+               // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
+               components={{
+                  Toolbar: CustomToolbar
+               }}
+               // pinnedColumns={pinnedColumns}
+               // onPinnedColumnsChange={handlePinnedColumnsChange}
+               // pagination
+               // paginationMode="server"
+               // rowsPerPageOptions={[20]}
+               // sortingMode="server"
+               // filterMode="server"
+               // page={pageNumber}
+               // checkboxSelection
+               rowCount={data && data.totalRows}
+               // onPageSizeChange={handleRowsPerPageChange}
+               // onStateChange={handleStateChange}
+               // density={density}
+               // loading={loading}
+               // filterModel={filterModel}
+               // onFilterModelChange={handleFilterChange}
+               // columnVisibilityModel={columnVisibilityModel}
+               // onColumnVisibilityModelChange={handleColumnVisibilityChange}
+               // onColumnOrderChange={handleColumnOrderChange}
+               // onSelectionModelChange={selectionChanged}
+               // onSortModelChange={handleSortChange}
+               // sortingOrder={[ "asc", "desc" ]}
+               // sortModel={columnSortModel}
+            />
+         </Box>
       </Widget>
    );
 }

src/qqq/components/widgets/misc/ScriptViewer.tsx

@@ -392,14 +392,8 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       return JSON.stringify(new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])]));
    }
 
-   /*
-    position: relative;
-    left: -356px;
-    width: calc(100% + 380px);
-   */
-
    return (
-      <Grid container className="scriptViewer">
+      <Grid container className="scriptViewer" m={-2} pt={4} width={"calc(100% + 2rem)"}>
          <Grid item xs={12}>
             <Box>
                {
@@ -430,20 +424,17 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                         <Grid container spacing={3}>
                            <Grid item xs={12}>
                               <>
-                                 <Box display="flex" alignItems="center" justifyContent="space-between" gap={2} mt={-6}>
-                                    <Typography variant="h5" p={2}></Typography>
-                                    <Tabs
-                                       sx={{m: 1}}
-                                       value={selectedTab}
-                                       onChange={(event, newValue) => changeTab(newValue)}
-                                       variant="standard"
-                                    >
-                                       <Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "100px"}} />
-                                       <Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" sx={{width: "100px"}} />
-                                       <Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" sx={{width: "100px"}} />
-                                       <Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" sx={{width: "100px"}} />
-                                    </Tabs>
-                                 </Box>
+                                 <Tabs
+                                    sx={{m: 0, mb: 1, mt: -3}}
+                                    value={selectedTab}
+                                    onChange={(event, newValue) => changeTab(newValue)}
+                                    variant="standard"
+                                 >
+                                    <Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" />
+                                    <Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
+                                    <Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" />
+                                    <Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" />
+                                 </Tabs>
 
                                  <TabPanel index={0} value={selectedTab}>
                                     <Grid container>
@@ -498,7 +489,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                                                       editorProps={{$blockScrolling: true}}
                                                       setOptions={{useWorker: false}}
                                                       width="100%"
-                                                      height="368px"
+                                                      height="400px"
                                                       value={getSelectedFileCode()}
                                                       style={{borderTop: "1px solid lightgray", borderBottomRightRadius: "1rem"}}
                                                    />

src/qqq/components/widgets/tables/DataTable.tsx

@@ -30,7 +30,8 @@ import TableRow from "@mui/material/TableRow";
 import Tooltip from "@mui/material/Tooltip";
 import parse from "html-react-parser";
 import {useEffect, useMemo, useState} from "react";
-import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
+import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable, useExpanded} from "react-table";
+import colors from "qqq/assets/theme/base/colors";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDPagination from "qqq/components/legacy/MDPagination";
 import MDTypography from "qqq/components/legacy/MDTypography";
@@ -47,6 +48,8 @@ interface Props
    canSearch?: boolean;
    showTotalEntries?: boolean;
    hidePaginationDropdown?: boolean;
+   fixedStickyLastRow?: boolean;
+   fixedHeight?: number;
    table: TableDataInput;
    pagination?: {
       variant: "contained" | "gradient";
@@ -56,6 +59,18 @@ interface Props
    noEndBorder?: boolean;
 }
 
+DataTable.defaultProps = {
+   entriesPerPage: 10,
+   entriesPerPageOptions: ["5", "10", "15", "20", "25"],
+   canSearch: false,
+   showTotalEntries: true,
+   fixedStickyLastRow: false,
+   fixedHeight: null,
+   pagination: {variant: "gradient", color: "info"},
+   isSorted: true,
+   noEndBorder: false,
+};
+
 const NoMaxWidthTooltip = styled(({className, ...props}: TooltipProps) => (
    <Tooltip {...props} classes={{popper: className}} />
 ))({
@@ -71,6 +86,8 @@ function DataTable({
    hidePaginationDropdown,
    canSearch,
    showTotalEntries,
+   fixedStickyLastRow,
+   fixedHeight,
    table,
    pagination,
    isSorted,
@@ -83,8 +100,77 @@ function DataTable({
    defaultValue = (entriesPerPage) ? entriesPerPage : "10";
    entries = entriesPerPageOptions ? entriesPerPageOptions : ["10", "25", "50", "100"];
 
-   const columns = useMemo<any>(() => table.columns, [table]);
+   let widths = [];
+   for(let i = 0; i<table.columns.length; i++)
+   {
+      const column = table.columns[i];
+      if(column.type !== "hidden")
+      {
+         widths.push(table.columns[i].width ?? "1fr");
+      }
+   }
+
+   let showExpandColumn = false;
+   if(table.rows)
+   {
+      for (let i = 0; i < table.rows.length; i++)
+      {
+         if (table.rows[i].subRows)
+         {
+            showExpandColumn = true;
+            break;
+         }
+      }
+   }
+
+   const columnsToMemo = [...table.columns];
+   if(showExpandColumn)
+   {
+      widths.push("60px");
+      columnsToMemo.push(
+         {
+            ///////////////////////////////
+            // Build our expander column //
+            ///////////////////////////////
+            id: "__expander",
+            width: 60,
+
+            ////////////////////////////////////////////////
+            // use this block if we want to do expand-all //
+            ////////////////////////////////////////////////
+            // @ts-ignore
+            // header: ({getToggleAllRowsExpandedProps, isAllRowsExpanded}) => (
+            //    <span {...getToggleAllRowsExpandedProps()}>
+            //       {isAllRowsExpanded ? "yes" : "no"}
+            //    </span>
+            // ),
+            header: () => (<span />),
+
+            // @ts-ignore
+            cell: ({row}) =>
+               /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               // Use the row.canExpand and row.getToggleRowExpandedProps prop getter to build the toggle for expanding a row //
+               /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               row.canExpand ? (
+                  <span
+                     {...row.getToggleRowExpandedProps({
+                        //////////////////////////////////////////////////////////////////////////////////////////
+                        // We could use the row.depth property and paddingLeft to indicate the depth of the row //
+                        //////////////////////////////////////////////////////////////////////////////////////////
+                        // style: {paddingLeft: `${row.depth * 2}rem`,},
+                     })}
+                  >
+                     {/* float this icon to keep it "out of the flow" - in other words, to keep it from making the row taller than it otherwise would be... */}
+                     <Icon fontSize="medium" sx={{float: "left"}}>{row.isExpanded ? "expand_less" : "chevron_right"}</Icon>
+                  </span>
+               ) : null,
+         },
+      );
+   }
+
+   const columns = useMemo<any>(() => columnsToMemo, [table]);
    const data = useMemo<any>(() => table.rows, [table]);
+   const gridTemplateColumns = widths.join(" ");
 
    if (!columns || !data)
    {
@@ -95,6 +181,7 @@ function DataTable({
       {columns, data, initialState: {pageIndex: 0}},
       useGlobalFilter,
       useSortBy,
+      useExpanded,
       usePagination
    );
 
@@ -113,7 +200,7 @@ function DataTable({
       previousPage,
       setPageSize,
       setGlobalFilter,
-      state: {pageIndex, pageSize, globalFilter},
+      state: {pageIndex, pageSize, globalFilter, expanded},
    }: any = tableInstance;
 
    // Set the default value for the entries per page when component mounts
@@ -193,11 +280,131 @@ function DataTable({
       entriesEnd = pageSize * (pageIndex + 1);
    }
 
+   function getTable(includeHead: boolean, rows: any, isFooter: boolean)
+   {
+      let boxStyle = {};
+      if(fixedStickyLastRow)
+      {
+         boxStyle = isFooter
+            ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, overflow: "auto", scrollbarGutter: "stable"}
+            : {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
+      }
+
+      return <Box sx={boxStyle}>
+         <Table {...getTableProps()}>
+            {
+               includeHead && (
+                  <Box component="thead" sx={{position: "sticky", top: 0, background: "white"}}>
+                     {headerGroups.map((headerGroup: any, i: number) => (
+                        <TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", gridTemplateColumns: gridTemplateColumns}}>
+                           {headerGroup.headers.map((column: any) => (
+                              column.type !== "hidden" && (
+                                 <DataTableHeadCell
+                                    key={i++}
+                                    {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
+                                    align={column.align ? column.align : "left"}
+                                    sorted={setSortedValue(column)}
+                                 >
+                                    {column.render("header")}
+                                 </DataTableHeadCell>
+                              )
+                           ))}
+                        </TableRow>
+                     ))}
+                  </Box>
+               )
+            }
+            <TableBody {...getTableBodyProps()}>
+               {rows.map((row: any, key: any) =>
+               {
+                  prepareRow(row);
+
+                  let overrideNoEndBorder = false;
+
+                  //////////////////////////////////////////////////////////////////////////////////
+                  // don't do an end-border on nested rows - unless they're the last one in a set //
+                  //////////////////////////////////////////////////////////////////////////////////
+                  if(row.depth > 0)
+                  {
+                     overrideNoEndBorder = true;
+                     if(key + 1 < rows.length && rows[key + 1].depth == 0)
+                     {
+                        overrideNoEndBorder = false;
+                     }
+                  }
+
+                  ///////////////////////////////////////
+                  // don't do end-border on the footer //
+                  ///////////////////////////////////////
+                  if(isFooter)
+                  {
+                     overrideNoEndBorder = true;
+                  }
+
+                  return (
+                     <TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: (row.depth > 0 ? "#FAFAFA" : "initial")}} key={key} {...row.getRowProps()}>
+                        {row.cells.map((cell: any) => (
+                           cell.column.type !== "hidden" && (
+                              <DataTableBodyCell
+                                 key={key}
+                                 noBorder={noEndBorder || overrideNoEndBorder}
+                                 depth={row.depth}
+                                 align={cell.column.align ? cell.column.align : "left"}
+                                 {...cell.getCellProps()}
+                              >
+                                 {
+                                    cell.column.type === "default" && (
+                                       cell.value && "number" === typeof cell.value ? (
+                                          <DefaultCell isFooter={isFooter}>{cell.value.toLocaleString()}</DefaultCell>
+                                       ) : (<DefaultCell isFooter={isFooter}>{cell.render("Cell")}</DefaultCell>)
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "htmlAndTooltip" && (
+                                       <DefaultCell isFooter={isFooter}>
+                                          <NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
+                                             <Box>
+                                                {parse(cell.value)}
+                                             </Box>
+                                          </NoMaxWidthTooltip>
+                                       </DefaultCell>
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "html" && (
+                                       <DefaultCell isFooter={isFooter}>{parse(cell.value)}</DefaultCell>
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "image" && row.values["imageTotal"] && (
+                                       <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} total={row.values["imageTotal"].toLocaleString()} totalType={row.values["imageTotalType"]} />
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "image" && !row.values["imageTotal"] && (
+                                       <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} />
+                                    )
+                                 }
+                                 {
+                                    (cell.column.id === "__expander") && cell.render("cell")
+                                 }
+                              </DataTableBodyCell>
+                           )
+                        ))}
+                     </TableRow>
+                  );
+               })}
+
+            </TableBody>
+         </Table>
+      </Box>
+   }
+
    return (
       <TableContainer sx={{boxShadow: "none"}}>
-         {entriesPerPage && ((hidePaginationDropdown !== undefined && ! hidePaginationDropdown) || canSearch) ? (
+         {entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? (
             <Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
-               {entriesPerPage && (hidePaginationDropdown === undefined || ! hidePaginationDropdown) &&  (
+               {entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && (
                   <Box display="flex" alignItems="center">
                      <Autocomplete
                         disableClearable
@@ -205,7 +412,7 @@ function DataTable({
                         options={entries}
                         onChange={(event, newValues: any) =>
                         {
-                           if(typeof newValues === "string")
+                           if (typeof newValues === "string")
                            {
                               setEntriesPerPage(parseInt(newValues, 10));
                            }
@@ -240,82 +447,15 @@ function DataTable({
                )}
             </Box>
          ) : null}
-         <Table {...getTableProps()}>
-            <Box component="thead">
-               {headerGroups.map((headerGroup: any, i: number) => (
-                  <TableRow key={i} {...headerGroup.getHeaderGroupProps()}>
-                     {headerGroup.headers.map((column: any) => (
-                        column.type !== "hidden" && (
-                           <DataTableHeadCell
-                              key={i++}
-                              {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
-                              width={column.width ? column.width : "auto"}
-                              align={column.align ? column.align : "left"}
-                              sorted={setSortedValue(column)}
-                           >
-                              {column.render("header")}
-                           </DataTableHeadCell>
-                        )
-                     ))}
-                  </TableRow>
-               ))}
-            </Box>
-            <TableBody {...getTableBodyProps()}>
-               {page.map((row: any, key: any) =>
-               {
-                  prepareRow(row);
-                  return (
-                     <TableRow sx={{verticalAlign: "top"}} key={key} {...row.getRowProps()}>
-                        {row.cells.map((cell: any) => (
-                           cell.column.type !== "hidden" && (
-                              <DataTableBodyCell
-                                 key={key}
-                                 noBorder={noEndBorder && rows.length - 1 === key}
-                                 align={cell.column.align ? cell.column.align : "left"}
-                                 {...cell.getCellProps()}
-                              >
-                                 {
-                                    cell.column.type === "default" && (
-                                       cell.value && "number" === typeof cell.value ? (
-                                          <DefaultCell>{cell.value.toLocaleString()}</DefaultCell>
-                                       ) : (<DefaultCell>{cell.render("Cell")}</DefaultCell>)
-                                    )
-                                 }
-                                 {
-                                    cell.column.type === "htmlAndTooltip" && (
-                                       <DefaultCell>
 
-                                          <NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
-                                             <Box>
-                                                {parse(cell.value)}
-                                             </Box>
-                                          </NoMaxWidthTooltip>
-                                       </DefaultCell>
-                                    )
-                                 }
-                                 {
-                                    cell.column.type === "html" && (
-                                       <DefaultCell>{parse(cell.value)}</DefaultCell>
-                                    )
-                                 }
-                                 {
-                                    cell.column.type === "image" && row.values["imageTotal"] && (
-                                       <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} total={row.values["imageTotal"].toLocaleString()} totalType={row.values["imageTotalType"]} />
-                                    )
-                                 }
-                                 {
-                                    cell.column.type === "image" && !row.values["imageTotal"] && (
-                                       <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} />
-                                    )
-                                 }
-                              </DataTableBodyCell>
-                           )
-                        ))}
-                     </TableRow>
-                  );
-               })}
-            </TableBody>
-         </Table>
+         {
+            fixedStickyLastRow ? (
+               <>
+                  {getTable(true, page.slice(0, page.length -1), false)}
+                  {getTable(false, page.slice(page.length-1), true)}
+               </>
+            ) : getTable(true, page, false)
+         }
 
          <Box
             display="flex"
@@ -368,15 +508,4 @@ function DataTable({
    );
 }
 
-// Declaring default props for DataTable
-DataTable.defaultProps = {
-   entriesPerPage: 10,
-   entriesPerPageOptions: ["5", "10", "15", "20", "25"],
-   canSearch: false,
-   showTotalEntries: true,
-   pagination: {variant: "gradient", color: "info"},
-   isSorted: true,
-   noEndBorder: false,
-};
-
 export default DataTable;

src/qqq/components/widgets/tables/TableCard.tsx

@@ -54,11 +54,13 @@ interface Props
    noRowsFoundHTML?: string;
    rowsPerPage?: number;
    hidePaginationDropdown?: boolean;
+   fixedStickyLastRow?: boolean;
+   fixedHeight?: number;
    data: TableDataInput;
 }
 
 const qController = Client.getInstance();
-function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown}: Props): JSX.Element
+function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight}: Props): JSX.Element
 {
    const [qInstance, setQInstance] = useState(null as QInstance);
 
@@ -72,16 +74,17 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown}:
    }, []);
 
    return (
-      <Box py={1}>
+      <Box py={1} mx={-2}>
          {
             data && data.columns && !noRowsFoundHTML ?
                <DataTable
                   table={data}
                   entriesPerPage={rowsPerPage}
                   hidePaginationDropdown={hidePaginationDropdown}
+                  fixedStickyLastRow={fixedStickyLastRow}
+                  fixedHeight={fixedHeight}
                   showTotalEntries={false}
                   isSorted={false}
-                  noEndBorder
                />
                : noRowsFoundHTML ?
                   <Box p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
@@ -114,7 +117,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown}:
                               <TableRow sx={{verticalAlign: "top"}} key={`row-${i}`}>
                                  {Array(8).fill(0).map((_, j) =>
                                     <DataTableBodyCell key={`cell-${i}-${j}`} align="center">
-                                       <DefaultCell><Skeleton /></DefaultCell>
+                                       <DefaultCell isFooter={false}><Skeleton /></DefaultCell>
                                     </DataTableBodyCell>
                                  )}
                               </TableRow>

src/qqq/components/widgets/tables/TableWidget.tsx

@@ -21,11 +21,16 @@
 
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import Button from "@mui/material/Button";
+import Icon from "@mui/material/Icon";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
+import Typography from "@mui/material/Typography";
 // @ts-ignore
 import {htmlToText} from "html-to-text";
 import React, {useEffect, useState} from "react";
+import colors from "qqq/assets/theme/base/colors";
 import TableCard from "qqq/components/widgets/tables/TableCard";
-import Widget, {ExportDataButton, WidgetData} from "qqq/components/widgets/Widget";
+import Widget, {WidgetData} from "qqq/components/widgets/Widget";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -43,6 +48,8 @@ TableWidget.defaultProps = {
 function TableWidget(props: Props): JSX.Element
 {
    const [isExportDisabled, setIsExportDisabled] = useState(false); // hmm, would like true here, but it broke...
+   const [csv, setCsv] = useState(null as string);
+   const [fileName, setFileName] = useState(null as string);
 
    const rows = props.widgetData?.rows;
    const columns = props.widgetData?.columns;
@@ -56,14 +63,8 @@ function TableWidget(props: Props): JSX.Element
       }
       setIsExportDisabled(isExportDisabled);
 
-   }, [props.widgetMetaData, props.widgetData]);
-
-   const exportCallback = () =>
-   {
       if (props.widgetData && rows && columns)
       {
-         console.log(props.widgetData);
-
          let csv = "";
          for (let j = 0; j < columns.length; j++)
          {
@@ -85,29 +86,54 @@ function TableWidget(props: Props): JSX.Element
                }
 
                const cell = rows[i][columns[j].accessor];
-               const text = htmlToText(cell,
-                  {
-                     selectors: [
-                        {selector: "a", format: "inline"},
-                        {selector: ".MuiIcon-root", format: "skip"},
-                        {selector: ".button", format: "skip"}
-                     ]
-                  });
+               let text = cell;
+               if(columns[j].type != "default")
+               {
+                  text = htmlToText(cell,
+                     {
+                        selectors: [
+                           {selector: "a", format: "inline"},
+                           {selector: ".MuiIcon-root", format: "skip"},
+                           {selector: ".button", format: "skip"}
+                        ]
+                     });
+               }
                csv += `"${ValueUtils.cleanForCsv(text)}"`;
             }
             csv += "\n";
          }
 
-         console.log(csv);
+         setCsv(csv);
 
          const fileName = (props.widgetData.label ?? props.widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
+         setFileName(fileName)
+
+         console.log(`useEffect, setting fileName ${fileName}`);
+      }
+
+   }, [props.widgetMetaData, props.widgetData]);
+
+   const onExportClick = () =>
+   {
+      if(csv)
+      {
          HtmlUtils.download(fileName, csv);
       }
       else
       {
-         alert("There is no data available to export.");
+         alert("There is no data available to export.")
       }
-   };
+   }
+
+   const labelAdditionalElementsLeft: JSX.Element[] = [];
+   if(props.widgetMetaData?.showExportButton)
+   {
+      labelAdditionalElementsLeft.push(
+         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative" top="-0.25rem">
+            <Tooltip title="Export"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={false}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>save_alt</Icon></Button></Tooltip>
+         </Typography>
+      );
+   }
 
    return (
       <Widget
@@ -116,12 +142,14 @@ function TableWidget(props: Props): JSX.Element
          reloadWidgetCallback={(data) => props.reloadWidgetCallback(data)}
          footerHTML={props.widgetData?.footerHTML}
          isChild={props.isChild}
-         labelAdditionalComponentsLeft={props.widgetMetaData?.showExportButton ? [new ExportDataButton(() => exportCallback(), isExportDisabled)] : []}
+         labelAdditionalElementsLeft={labelAdditionalElementsLeft}
       >
          <TableCard
             noRowsFoundHTML={props.widgetData?.noRowsFoundHTML}
             rowsPerPage={props.widgetData?.rowsPerPage}
             hidePaginationDropdown={props.widgetData?.hidePaginationDropdown}
+            fixedStickyLastRow={props.widgetData?.fixedStickyLastRow}
+            fixedHeight={props.widgetData?.fixedHeight}
             data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows}}
          />
       </Widget>

src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx

@@ -22,6 +22,7 @@
 import Box from "@mui/material/Box";
 import {Theme} from "@mui/material/styles";
 import {ReactNode} from "react";
+import colors from "qqq/assets/theme/base/colors";
 
 // Declaring prop types for DataTableBodyCell
 interface Props
@@ -40,14 +41,26 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
          py={1.5}
          px={3}
          sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({
-            fontSize: size.sm,
-            borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`,
+            borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${colors.grayLines.main}`,
+            fontSize: "0.875rem",
+            "@media (min-width: 1440px)": {
+               fontSize: "1rem"
+            },
+            "@media (max-width: 1440px)": {
+               fontSize: "0.875rem"
+            },
+            "&:nth-child(1)": {
+               paddingLeft: "1rem"
+            },
+            "&:last-child": {
+               paddingRight: "1rem"
+            }
          })}
       >
          <Box
             display="initial"
             width="max-content"
-            color="text"
+            color={colors.dark.main}
          >
             {children}
          </Box>

src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx

@@ -23,6 +23,7 @@ import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
 import {ReactNode} from "react";
+import colors from "qqq/assets/theme/base/colors";
 import {useMaterialUIController} from "qqq/context";
 
 // Declaring props types for DataTableHeadCell
@@ -46,18 +47,28 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
          py={1.5}
          px={3}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
-            borderBottom: `${borderWidth[1]} solid ${light.main}`,
+            borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
+            "&:nth-child(1)": {
+               paddingLeft: "1rem"
+            },
+            "&:last-child": {
+               paddingRight: "1rem"
+            },
          })}
       >
          <Box
             {...rest}
             sx={({typography: {size, fontWeightBold}}: Theme) => ({
                position: "relative",
-               opacity: "0.7",
+               color: colors.grey[700],
                textAlign: align,
-               fontSize: size.xxs,
-               fontWeight: fontWeightBold,
-               textTransform: "uppercase",
+               "@media (min-width: 1440px)": {
+                  fontSize: "1rem"
+               },
+               "@media (max-width: 1440px)": {
+                  fontSize: "0.875rem"
+               },
+               fontWeight: 600,
                cursor: sorted && "pointer",
                userSelect: sorted && "none",
             })}

src/qqq/components/widgets/tables/cells/DefaultCell.tsx

@@ -14,12 +14,31 @@ Coded by www.creative-tim.com
 */
 
 import {ReactNode} from "react";
+import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 
-function DefaultCell({children}: { children: ReactNode }): JSX.Element
+interface Props
+{
+   isFooter: boolean
+   children: ReactNode;
+}
+
+
+function DefaultCell({isFooter, children}: Props): JSX.Element
 {
    return (
-      <MDTypography variant="button" fontWeight="regular" color="text">
+      <MDTypography variant="button" color={colors.dark.main} sx={{
+         fontWeight: isFooter ? 600 : 500,
+         "@media (min-width: 1440px)": {
+            fontSize: "1rem"
+         },
+         "@media (max-width: 1440px)": {
+            fontSize: "0.875rem"
+         },
+         "& a": {
+            color: colors.blueGray.main
+         }
+      }}>
          {children}
       </MDTypography>
    );

src/qqq/context/index.tsx

@@ -116,7 +116,7 @@ function MaterialUIControllerProvider({children}: { children: ReactNode }): JSX.
       whiteSidenav: false,
       sidenavColor: "info",
       transparentNavbar: true,
-      fixedNavbar: true,
+      fixedNavbar: false,
       openConfigurator: false,
       direction: "ltr",
       layout: "dashboard",

src/qqq/layouts/DashboardLayout.tsx

@@ -38,11 +38,11 @@ function DashboardLayout({children}: { children: ReactNode }): JSX.Element
    return (
       <Box
          sx={({breakpoints, transitions, functions: {pxToRem}}) => ({
-            p: 3,
+            p: "20px",
             position: "relative",
 
             [breakpoints.up("xl")]: {
-               marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274),
+               marginLeft: miniSidenav ? pxToRem(120) : pxToRem(245),
                transition: transitions.create(["margin-left", "margin-right"], {
                   easing: transitions.easing.easeInOut,
                   duration: transitions.duration.standard,

src/qqq/models/LoadingState.ts

@@ -41,25 +41,45 @@
  **      {myLoadingState.isNotLoading() && myData && <Box>...
  ** - In your template, before your "slow loading" view, check for `myLoadingState.isLoadingSlow()`, e.g.
  **      {myLoadingState.isLoadingSlow() && <Spinner />}
+ **
+ ** In addition, you can also supply a callback to run "upon slow" (e.g., when
+ ** moving into the slow state).
  *******************************************************************************/
 export class LoadingState
 {
    private state: "notLoading" | "loading" | "slow"
    private slowTimeout: any;
-   private forceUpdate: () => void
+   private forceUpdate: () => void;
+   private uponSlowCallback: () => void;
 
    constructor(forceUpdate: () => void, initialState: "notLoading" | "loading" | "slow" = "notLoading")
    {
       this.forceUpdate = forceUpdate;
       this.state = initialState;
+
+      if(initialState == "loading")
+      {
+         this.setLoading();
+      }
+      else if(initialState == "notLoading")
+      {
+         this.setNotLoading();
+      }
    }
 
    public setLoading()
    {
+      clearTimeout(this.slowTimeout);
       this.state = "loading";
       this.slowTimeout = setTimeout(() =>
       {
          this.state = "slow";
+
+         if(this.uponSlowCallback)
+         {
+            this.uponSlowCallback();
+         }
+
          this.forceUpdate();
       }, 1000);
    }
@@ -85,4 +105,14 @@ export class LoadingState
       return (this.state == "notLoading");
    }
 
+   public getState(): string
+   {
+      return (this.state);
+   }
+
+   public setUponSlowCallback(value: any)
+   {
+      this.uponSlowCallback = value;
+   }
+
 }

src/qqq/models/query/QQueryColumns.ts

@@ -0,0 +1,406 @@
+/*
+ * 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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {GridPinnedColumns} from "@mui/x-data-grid-pro";
+import quickSightChart from "qqq/components/widgets/misc/QuickSightChart";
+import DataGridUtils from "qqq/utils/DataGridUtils";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+
+/*******************************************************************************
+ ** member object
+ *******************************************************************************/
+interface Column
+{
+   name: string;
+   isVisible: boolean;
+   width: number;
+   pinned?: "left" | "right";
+}
+
+/*******************************************************************************
+ ** Model for all info we'll store about columns on a query screen.
+ *******************************************************************************/
+export default class QQueryColumns
+{
+   columns: Column[] = [];
+
+   /*******************************************************************************
+    ** factory function - build a QQueryColumns object from JSON (string or parsed object).
+    **
+    ** input json is must look like if you JSON.stringify this class - that is:
+    ** {columns: [{name:"",isVisible:true,width:0,pinned:"left"},{}...]}
+    *******************************************************************************/
+   public static buildFromJSON = (json: string | any): QQueryColumns =>
+   {
+      const queryColumns = new QQueryColumns();
+
+      if (typeof json == "string")
+      {
+         json = JSON.parse(json);
+      }
+
+      queryColumns.columns = json.columns;
+
+      return (queryColumns);
+   };
+
+
+   /*******************************************************************************
+    ** factory function - build a default QQueryColumns object for a table
+    **
+    *******************************************************************************/
+   public static buildDefaultForTable = (table: QTableMetaData): QQueryColumns =>
+   {
+      const queryColumns = new QQueryColumns();
+
+      queryColumns.columns = [];
+      queryColumns.columns.push({name: "__check__", isVisible: true, width: 100, pinned: "left"});
+
+      const fields = this.getSortedFieldsFromTable(table);
+      fields.forEach((field) =>
+      {
+         const column: Column = {name: field.name, isVisible: true, width: DataGridUtils.getColumnWidthForField(field, table)};
+         queryColumns.columns.push(column);
+
+         if (field.name == table.primaryKeyField)
+         {
+            column.pinned = "left";
+         }
+      });
+
+      table.exposedJoins?.forEach((exposedJoin) =>
+      {
+         const joinFields = this.getSortedFieldsFromTable(exposedJoin.joinTable);
+         joinFields.forEach((field) =>
+         {
+            const column: Column = {name: `${exposedJoin.joinTable.name}.${field.name}`, isVisible: false, width: DataGridUtils.getColumnWidthForField(field, null)};
+            queryColumns.columns.push(column);
+         });
+      });
+
+      return (queryColumns);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public addColumnForNewField = (table: QTableMetaData, fieldName: string, defaultVisibilityIfInMainTable: boolean): void =>
+   {
+      const [field, tableForField] = TableUtils.getFieldAndTable(table, fieldName)
+
+      let column: Column;
+      if(tableForField.name == table.name)
+      {
+         column = {name: field.name, isVisible: defaultVisibilityIfInMainTable, width: DataGridUtils.getColumnWidthForField(field, table)};
+      }
+      else
+      {
+         column = {name: `${tableForField.name}.${field.name}`, isVisible: false, width: DataGridUtils.getColumnWidthForField(field, null)};
+      }
+
+      this.columns.push(column);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public deleteColumnForOldField = (table: QTableMetaData, fieldName: string): void =>
+   {
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         if(this.columns[i].name == fieldName)
+         {
+            this.columns.splice(i, 1);
+            return;
+         }
+      }
+
+      console.log(`Couldn't find column to be deleted, for name [${fieldName}]`);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private static getSortedFieldsFromTable(table: QTableMetaData)
+   {
+      const fields = [...table.fields.values()];
+      fields.sort((a: QFieldMetaData, b: QFieldMetaData) =>
+      {
+         return a.name.localeCompare(b.name);
+      });
+      return fields;
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public getVisibleColumnCount(): number
+   {
+      let rs = 0;
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         if(this.columns[i].name == "__check__")
+         {
+            continue;
+         }
+
+         if(this.columns[i].isVisible)
+         {
+            rs++;
+         }
+      }
+      return (rs);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public getVisibilityToggleStates(): { [name: string]: boolean }
+   {
+      const rs: {[name: string]: boolean} = {};
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         rs[this.columns[i].name] = this.columns[i].isVisible;
+      }
+      return (rs);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public setIsVisible(name: string, isVisible: boolean)
+   {
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         if(this.columns[i].name == name)
+         {
+            this.columns[i].isVisible = isVisible;
+            break;
+         }
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public updateVisibility = (visibilityModel: { [name: string]: boolean }): void =>
+   {
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const name = this.columns[i].name;
+         this.columns[i].isVisible = visibilityModel[name];
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public updateColumnOrder = (names: string[]): void =>
+   {
+      const newColumns: Column[] = [];
+      const rest: Column[] = [];
+
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         const index = names.indexOf(column.name);
+         if (index > -1)
+         {
+            newColumns[index] = column;
+         }
+         else
+         {
+            rest.push(column);
+         }
+      }
+
+      this.columns = [...newColumns, ...rest];
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public updateColumnWidth = (name: string, width: number): void =>
+   {
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         if (this.columns[i].name == name)
+         {
+            this.columns[i].width = width;
+         }
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public setPinnedLeftColumns = (names: string[]): void =>
+   {
+      const leftPins: Column[] = [];
+      const rest: Column[] = [];
+
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         const pinIndex = names ? names.indexOf(column.name) : -1;
+         if (pinIndex > -1)
+         {
+            column.pinned = "left";
+            leftPins[pinIndex] = column;
+         }
+         else
+         {
+            if (column.pinned == "left")
+            {
+               column.pinned = undefined;
+            }
+            rest.push(column);
+         }
+      }
+
+      this.columns = [...leftPins, ...rest];
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public setPinnedRightColumns = (names: string[]): void =>
+   {
+      const rightPins: Column[] = [];
+      const rest: Column[] = [];
+
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         const pinIndex = names ? names.indexOf(column.name) : -1;
+         if (pinIndex > -1)
+         {
+            column.pinned = "right";
+            rightPins[pinIndex] = column;
+         }
+         else
+         {
+            if (column.pinned == "right")
+            {
+               column.pinned = undefined;
+            }
+            rest.push(column);
+         }
+      }
+
+      this.columns = [...rest, ...rightPins];
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public getColumnSortValues = (): { [name: string]: number } =>
+   {
+      const sortValues: { [name: string]: number } = {};
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         sortValues[this.columns[i].name] = i;
+      }
+      return sortValues;
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public getColumnWidths = (): { [name: string]: number } =>
+   {
+      const widths: { [name: string]: number } = {};
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         widths[column.name] = column.width;
+      }
+      return widths;
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public toGridPinnedColumns = (): GridPinnedColumns =>
+   {
+      const gridPinnedColumns: GridPinnedColumns = {left: [], right: []};
+
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         if (column.pinned == "left")
+         {
+            gridPinnedColumns.left.push(column.name);
+         }
+         else if (column.pinned == "right")
+         {
+            gridPinnedColumns.right.push(column.name);
+         }
+      }
+
+      return gridPinnedColumns;
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public toColumnVisibilityModel = (): { [index: string]: boolean } =>
+   {
+      const columnVisibilityModel: { [index: string]: boolean } = {};
+
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         columnVisibilityModel[column.name] = column.isVisible;
+      }
+
+      return columnVisibilityModel;
+   };
+
+}
+
+
+/*******************************************************************************
+ ** subclass of QQueryColumns - used as a marker, to indicate that the table
+ ** isn't yet loaded, so it just a placeholder.
+ *******************************************************************************/
+export class PreLoadQueryColumns extends QQueryColumns
+{
+}
+

src/qqq/models/query/RecordQueryView.ts

@@ -0,0 +1,100 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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 {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import QQueryColumns, {PreLoadQueryColumns} from "qqq/models/query/QQueryColumns";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+
+
+/*******************************************************************************
+ ** Model to represent the full "view" that is active on the RecordQuery screen
+ ** (and accordingly, can be saved as a saved view).
+ *******************************************************************************/
+export default class RecordQueryView
+{
+   queryFilter: QQueryFilter; // contains orderBys
+   queryColumns: QQueryColumns; // contains on/off, sequence, widths, and pins
+   viewIdentity: string; // url vs. saved vs. ad-hoc, plus "noncey" stuff?  not very used...
+   rowsPerPage: number;
+   quickFilterFieldNames: string[];
+   mode: string;
+   // variant?
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   constructor()
+   {
+   }
+
+
+   /*******************************************************************************
+    ** factory function - build a RecordQueryView object from JSON (string or parsed object).
+    **
+    ** input json is must look like if you JSON.stringify this class - that is:
+    ** {queryFilter: {}, queryColumns: {}, etc...}
+    *******************************************************************************/
+   public static buildFromJSON = (json: string | any): RecordQueryView =>
+   {
+      const view = new RecordQueryView();
+
+      if (typeof json == "string")
+      {
+         json = JSON.parse(json);
+      }
+
+      view.queryFilter = json.queryFilter as QQueryFilter;
+
+      //////////////////////////////////////////////////////////////////////////////////////////
+      // it's important that some criteria values exist as expression objects - so - do that. //
+      //////////////////////////////////////////////////////////////////////////////////////////
+      for (let i = 0; i < view.queryFilter?.criteria?.length; i++)
+      {
+         const criteria = view.queryFilter.criteria[i]
+         for (let j = 0; j < criteria?.values?.length; j++)
+         {
+            const value = criteria.values[j];
+            const expression = FilterUtils.gridCriteriaValueToExpression(value);
+            if(expression)
+            {
+               criteria.values[j] = expression;
+            }
+         }
+      }
+
+      if(json.queryColumns)
+      {
+         view.queryColumns = QQueryColumns.buildFromJSON(json.queryColumns);
+      }
+      else
+      {
+         view.queryColumns = new PreLoadQueryColumns();
+      }
+
+      view.viewIdentity = json.viewIdentity;
+      view.rowsPerPage = json.rowsPerPage;
+      view.quickFilterFieldNames = json.quickFilterFieldNames;
+      view.mode = json.mode;
+
+      return (view);
+   };
+
+}

src/qqq/pages/apps/Home.tsx

@@ -34,6 +34,7 @@ import Grid from "@mui/material/Grid";
 import React, {useContext, useEffect, useState} from "react";
 import {Link, useLocation} from "react-router-dom";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import ProcessLinkCard from "qqq/components/processes/ProcessLinkCard";
 import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
@@ -180,9 +181,6 @@ function AppHome({app}: Props): JSX.Element
       }
    }, [qInstance, location]);
 
-   const widgetCount = widgets ? widgets.length : 0;
-
-   // eslint-disable-next-line no-nested-ternary
    const tileSizeLg = 3;
 
    const hasTablePermission = (tableName: string) =>
@@ -200,11 +198,66 @@ function AppHome({app}: Props): JSX.Element
       return reports.find(r => r.name === reportName && r.hasPermission);
    };
 
+   const widgetCount = widgets ? widgets.length : 0;
+   const sectionCount = app.sections ? app.sections.length : 0;
+
+   //////////////////////////////////////////////////////////////////////////////////////////////////////
+   // if our app has no widgets or sections, but it does have child apps, then return those child apps //
+   //////////////////////////////////////////////////////////////////////////////////////////////////////
+   if(widgetCount == 0 && sectionCount == 0 && childApps && childApps.length > 0)
+   {
+      return (
+         <BaseLayout>
+            <Grid container spacing={3}>
+               <Grid item xs={12} lg={12}>
+                  <Card sx={{overflow: "visible"}}>
+                     <Box p={3} display="flex" alignItems="center" gap=".5rem">
+                        <Typography variant="h5">Apps</Typography>
+                     </Box>
+                     <Grid container spacing={3} padding={3} pt={0}>
+                        {childApps.map((childApp) => (
+                           <Grid key={childApp.name} item xs={12} lg={3}>
+                              <Link to={childApp.name}>
+                                 <Card>
+                                    <Box display="flex" alignItems="center" p={2}>
+                                       <Box
+                                          color={"#FFFFFF"}
+                                          display="flex"
+                                          justifyContent="center"
+                                          alignItems="center"
+                                          width="4rem"
+                                          height="4rem"
+                                          sx={{borderRadius: "10px", backgroundColor: colors.info.main}}
+                                       >
+                                          <Icon fontSize="medium" color="inherit">
+                                             {childApp.iconName || app.iconName}
+                                          </Icon>
+                                       </Box>
+                                       <Box textAlign="left" ml={2}>
+                                          <MDTypography variant="button" fontWeight="bold" color="text">
+                                             {childApp.label}
+                                          </MDTypography>
+                                       </Box>
+                                    </Box>
+                                 </Card>
+                              </Link>
+                           </Grid>
+                        ))}
+                     </Grid>
+                  </Card>
+               </Grid>
+            </Grid>
+         </BaseLayout>
+      )
+   }
+
    return (
       <BaseLayout>
          <Box>
-            {app.widgets && (
-               <DashboardWidgets widgetMetaDataList={widgets} />
+            {app.widgets && app.widgets.length > 0 && (
+               <Box pb={app.sections ? 2.375 : 0}>
+                  <DashboardWidgets widgetMetaDataList={widgets} />
+               </Box>
             )}
             <Grid container spacing={3}>
                {

src/qqq/pages/processes/ProcessRun.tsx

@@ -229,7 +229,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    const download = (url: string, fileName: string) =>
    {
       /////////////////////////////////////////////////////////////////////////////////////////////
-      // todo - this could be simplified.                                                        //
+      // todo - this could be simplified, i think?                                               //
       // it was originally built like this when we had to submit full access token to backend... //
       /////////////////////////////////////////////////////////////////////////////////////////////
       let xhr = new XMLHttpRequest();
@@ -237,12 +237,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       xhr.responseType = "blob";
       let formData = new FormData();
 
-      ////////////////////////////////////
-      // todo#authHeader - delete this. //
-      ////////////////////////////////////
-      const qController = Client.getInstance();
-      formData.append("Authorization", qController.getAuthorizationHeaderValue());
-
       // @ts-ignore
       xhr.send(formData);
 
@@ -329,7 +323,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             <Grid m={3} mt={9} container>
                <Grid item xs={0} lg={3} />
                <Grid item xs={12} lg={6}>
-                  <Card elevation={5}>
+                  <Card>
                      <Box p={3}>
                         <MDTypography variant="h5" component="div">
                            Working
@@ -420,228 +414,238 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                //////////////////////////////////////////////////
                // render all of the components for this screen //
                //////////////////////////////////////////////////
-               step.components && (step.components.map((component: QFrontendComponent, index: number) => (
-                  <div key={index}>
-                     {
-                        component.type === QComponentType.HELP_TEXT && (
-                           component.values.previewText ?
-                              <>
-                                 <Box mt={1}>
-                                    <Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}}>
-                                       {showFullHelpText ? "Hide " : "Show "}
-                                       {component.values.previewText}
-                                    </Button>
-                                 </Box>
-                                 <Box mt={1} style={{display: showFullHelpText ? "block" : "none"}}>
-                                    <Typography variant="body2" color="info">
-                                       {ValueUtils.breakTextIntoLines(component.values.text)}
-                                    </Typography>
-                                 </Box>
-                              </>
-                              :
-                              <MDTypography variant="button" color="info">
-                                 {ValueUtils.breakTextIntoLines(component.values.text)}
-                              </MDTypography>
-                        )
-                     }
-                     {
-                        component.type === QComponentType.BULK_EDIT_FORM && (
-                           tableMetaData && localTableSections ?
-                              <Grid container spacing={3} mt={2}>
-                                 {
-                                    localTableSections.length == 0 &&
-                                    <Grid item xs={12}>
-                                       <Alert color="error">There are no editable fields on this table.</Alert>
+               step.components && (step.components.map((component: QFrontendComponent, index: number) =>
+               {
+                  let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"]
+                  if(component.type == QComponentType.BULK_EDIT_FORM)
+                  {
+                     helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
+                  }
+
+                  return (
+                     <div key={index}>
+                        {
+                           component.type === QComponentType.HELP_TEXT && (
+                              component.values.previewText ?
+                                 <>
+                                    <Box mt={1}>
+                                       <Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}}>
+                                          {showFullHelpText ? "Hide " : "Show "}
+                                          {component.values.previewText}
+                                       </Button>
+                                    </Box>
+                                    <Box mt={1} style={{display: showFullHelpText ? "block" : "none"}}>
+                                       <Typography variant="body2" color="info">
+                                          {ValueUtils.breakTextIntoLines(component.values.text)}
+                                       </Typography>
+                                    </Box>
+                                 </>
+                                 :
+                                 <MDTypography variant="button" color="info">
+                                    {ValueUtils.breakTextIntoLines(component.values.text)}
+                                 </MDTypography>
+                           )
+                        }
+                        {
+                           component.type === QComponentType.BULK_EDIT_FORM && (
+                              tableMetaData && localTableSections ?
+                                 <Grid container spacing={3} mt={2}>
+                                    {
+                                       localTableSections.length == 0 &&
+                                       <Grid item xs={12}>
+                                          <Alert color="error">There are no editable fields on this table.</Alert>
+                                       </Grid>
+                                    }
+                                    <Grid item xs={12} lg={3}>
+                                       {
+                                          localTableSections.length > 0 && <QRecordSidebar tableSections={localTableSections} stickyTop="20px" />
+                                       }
                                     </Grid>
-                                 }
-                                 <Grid item xs={12} lg={3}>
-                                    {
-                                       localTableSections.length > 0 && <QRecordSidebar tableSections={localTableSections} stickyTop="20px" />
-                                    }
-                                 </Grid>
-                                 <Grid item xs={12} lg={9}>
-
-                                    {localTableSections.map((section: QTableSection, index: number) =>
-                                    {
-                                       const name = section.name;
-
-                                       if (section.isHidden)
+                                    <Grid item xs={12} lg={9}>
                                        {
-                                          return;
-                                       }
-
-                                       const sectionFormFields = {};
-                                       for (let i = 0; i < section.fieldNames.length; i++)
-                                       {
-                                          const fieldName = section.fieldNames[i];
-                                          if (formFields[fieldName])
+                                          localTableSections.map((section: QTableSection, index: number) =>
                                           {
-                                             // @ts-ignore
-                                             sectionFormFields[fieldName] = formFields[fieldName];
-                                          }
-                                       }
+                                             const name = section.name;
 
-                                       if (Object.keys(sectionFormFields).length > 0)
-                                       {
-                                          const sectionFormData = {
-                                             formFields: sectionFormFields,
-                                             values: values,
-                                             errors: errors,
-                                             touched: touched
-                                          };
+                                             if (section.isHidden)
+                                             {
+                                                return;
+                                             }
 
-                                          return (
-                                             <Box key={name} pb={3}>
-                                                <Card id={name} sx={{scrollMarginTop: "20px"}} elevation={5}>
-                                                   <MDTypography variant="h5" p={3} pb={1}>
-                                                      {section.label}
-                                                   </MDTypography>
-                                                   <Box px={2}>
-                                                      <QDynamicForm formData={sectionFormData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
+                                             const sectionFormFields = {};
+                                             for (let i = 0; i < section.fieldNames.length; i++)
+                                             {
+                                                const fieldName = section.fieldNames[i];
+                                                if (formFields[fieldName])
+                                                {
+                                                   // @ts-ignore
+                                                   sectionFormFields[fieldName] = formFields[fieldName];
+                                                }
+                                             }
+
+                                             if (Object.keys(sectionFormFields).length > 0)
+                                             {
+                                                const sectionFormData = {
+                                                   formFields: sectionFormFields,
+                                                   values: values,
+                                                   errors: errors,
+                                                   touched: touched
+                                                };
+
+                                                return (
+                                                   <Box key={name} pb={3}>
+                                                      <Card id={name} sx={{scrollMarginTop: "20px"}} elevation={5}>
+                                                         <MDTypography variant="h5" p={3} pb={1}>
+                                                            {section.label}
+                                                         </MDTypography>
+                                                         <Box px={2}>
+                                                            <QDynamicForm formData={sectionFormData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableMetaData?.name};`} />
+                                                         </Box>
+                                                      </Card>
                                                    </Box>
-                                                </Card>
-                                             </Box>
-                                          );
+                                                );
+                                             }
+                                             else
+                                             {
+                                                return (<br />);
+                                             }
+                                          })
                                        }
-                                       else
-                                       {
-                                          return (<br />);
-                                       }
-                                    }
-                                    )}
+                                    </Grid>
                                  </Grid>
-                              </Grid>
-                              : <QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
-                        )
-                     }
-                     {
-                        component.type === QComponentType.EDIT_FORM && (
-                           <QDynamicForm formData={formData} />
-                        )
-                     }
-                     {
-                        component.type === QComponentType.VIEW_FORM && step.viewFields && (
-                           <div>
-                              {step.viewFields.map((field: QFieldMetaData) => (
-                                 field.hasAdornment(AdornmentType.ERROR) ? (
-                                    processValues[field.name] && (
+                                 : <QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableMetaData?.name};`} />
+                           )
+                        }
+                        {
+                           component.type === QComponentType.EDIT_FORM && (
+                              <QDynamicForm formData={formData} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
+                           )
+                        }
+                        {
+                           component.type === QComponentType.VIEW_FORM && step.viewFields && (
+                              <div>
+                                 {step.viewFields.map((field: QFieldMetaData) => (
+                                    field.hasAdornment(AdornmentType.ERROR) ? (
+                                       processValues[field.name] && (
+                                          <Box key={field.name} display="flex" py={1} pr={2}>
+                                             <MDTypography variant="button" fontWeight="regular">
+                                                {ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
+                                             </MDTypography>
+                                          </Box>
+                                       )
+                                    ) : (
                                        <Box key={field.name} display="flex" py={1} pr={2}>
-                                          <MDTypography variant="button" fontWeight="regular">
+                                          <MDTypography variant="button" fontWeight="bold">
+                                             {field.label}
+                                             : &nbsp;
+                                          </MDTypography>
+                                          <MDTypography variant="button" fontWeight="regular" color="text">
                                              {ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
                                           </MDTypography>
                                        </Box>
-                                    )
-                                 ) : (
-                                    <Box key={field.name} display="flex" py={1} pr={2}>
-                                       <MDTypography variant="button" fontWeight="bold">
-                                          {field.label}
-                                          : &nbsp;
-                                       </MDTypography>
-                                       <MDTypography variant="button" fontWeight="regular" color="text">
-                                          {ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
+                                    )))
+                                 }
+                              </div>
+                           )
+                        }
+                        {
+                           component.type === QComponentType.DOWNLOAD_FORM && (
+                              <Grid container display="flex" justifyContent="center">
+                                 <Grid item xs={12} sm={12} xl={8} m={3} p={3} mt={6} sx={{border: "1px solid gray", borderRadius: "1rem"}}>
+                                    <Box mx={2} mt={-6} p={1} sx={{width: "fit-content", borderColor: "rgb(70%, 70%, 70%)", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "#FFFFFF"}} width="initial" color="white">
+                                       Download
+                                    </Box>
+                                    <Box display="flex" py={1} pr={2}>
+                                       <MDTypography variant="button" fontWeight="bold" onClick={() => download(`/download/${processValues.downloadFileName}?filePath=${processValues.serverFilePath}`, processValues.downloadFileName)} sx={{cursor: "pointer"}}>
+                                          <Box display="flex" alignItems="center" gap={1} py={1} pr={2}>
+                                             <Icon fontSize="large">download_for_offline</Icon>
+                                             {processValues.downloadFileName}
+                                          </Box>
                                        </MDTypography>
                                     </Box>
-                                 )))
-                              }
-                           </div>
-                        )
-                     }
-                     {
-                        component.type === QComponentType.DOWNLOAD_FORM && (
-                           <Grid container display="flex" justifyContent="center">
-                              <Grid item xs={12} sm={12} xl={8} m={3} p={3} mt={6} sx={{border: "1px solid gray", borderRadius: "1rem"}}>
-                                 <Box mx={2} mt={-6} p={1} sx={{width: "fit-content", borderColor: "rgb(70%, 70%, 70%)", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "#FFFFFF"}} width="initial" color="white">
-                                    Download
-                                 </Box>
-                                 <Box display="flex" py={1} pr={2}>
-                                    <MDTypography variant="button" fontWeight="bold" onClick={() => download(`/download/${processValues.downloadFileName}?filePath=${processValues.serverFilePath}`, processValues.downloadFileName)} sx={{cursor: "pointer"}}>
-                                       <Box display="flex" alignItems="center" gap={1} py={1} pr={2}>
-                                          <Icon fontSize="large">download_for_offline</Icon>
-                                          {processValues.downloadFileName}
-                                       </Box>
-                                    </MDTypography>
-                                 </Box>
+                                 </Grid>
                               </Grid>
-                           </Grid>
-                        )
-                     }
-                     {
-                        component.type === QComponentType.VALIDATION_REVIEW_SCREEN && (
-                           <ValidationReview
-                              qInstance={qInstance}
-                              process={processMetaData}
-                              table={tableMetaData}
-                              processValues={processValues}
-                              step={step}
-                              previewRecords={records}
-                              formValues={formData.values}
-                              doFullValidationRadioChangedHandler={(event: any) =>
-                              {
-                                 const {value} = event.currentTarget;
+                           )
+                        }
+                        {
+                           component.type === QComponentType.VALIDATION_REVIEW_SCREEN && (
+                              <ValidationReview
+                                 qInstance={qInstance}
+                                 process={processMetaData}
+                                 table={tableMetaData}
+                                 processValues={processValues}
+                                 step={step}
+                                 previewRecords={records}
+                                 formValues={formData.values}
+                                 doFullValidationRadioChangedHandler={(event: any) =>
+                                 {
+                                    const {value} = event.currentTarget;
 
-                                 //////////////////////////////////////////////////////////////
-                                 // call the formik function to set the value in this field. //
-                                 //////////////////////////////////////////////////////////////
-                                 setFieldValue("doFullValidation", value);
+                                    //////////////////////////////////////////////////////////////
+                                    // call the formik function to set the value in this field. //
+                                    //////////////////////////////////////////////////////////////
+                                    setFieldValue("doFullValidation", value);
 
-                                 setOverrideOnLastStep(value !== "true");
-                              }}
-                           />
-                        )
-                     }
-                     {
-                        component.type === QComponentType.PROCESS_SUMMARY_RESULTS && (
-                           <ProcessSummaryResults qInstance={qInstance} process={processMetaData} table={tableMetaData} processValues={processValues} step={step} />
-                        )
-                     }
-                     {
-                        component.type === QComponentType.GOOGLE_DRIVE_SELECT_FOLDER && (
-                           // todo - make these booleans configurable (values on the component)
-                           <GoogleDriveFolderPickerWrapper showSharedDrivesView={true} showDefaultFoldersView={false} qInstance={qInstance} />
-                        )
-                     }
-                     {
-                        component.type === QComponentType.RECORD_LIST && step.recordListFields && recordConfig.columns && (
-                           <div>
-                              <MDTypography variant="button" fontWeight="bold">Records</MDTypography>
-                              {" "}
-                              <br />
-                              <Box height="100%">
-                                 <DataGridPro
-                                    components={{Pagination: CustomPagination}}
-                                    page={recordConfig.pageNo}
-                                    disableSelectionOnClick
-                                    autoHeight
-                                    rows={recordConfig.rows}
-                                    columns={recordConfig.columns}
-                                    rowBuffer={10}
-                                    rowCount={recordConfig.totalRecords}
-                                    pageSize={recordConfig.rowsPerPage}
-                                    rowsPerPageOptions={[10, 25, 50]}
-                                    onPageSizeChange={recordConfig.handleRowsPerPageChange}
-                                    onPageChange={recordConfig.handlePageChange}
-                                    onRowClick={recordConfig.handleRowClick}
-                                    getRowId={(row) => row.__idForDataGridPro__}
-                                    paginationMode="server"
-                                    pagination
-                                    density="compact"
-                                    loading={recordConfig.loading}
-                                    disableColumnFilter
-                                 />
+                                    setOverrideOnLastStep(value !== "true");
+                                 }}
+                              />
+                           )
+                        }
+                        {
+                           component.type === QComponentType.PROCESS_SUMMARY_RESULTS && (
+                              <ProcessSummaryResults qInstance={qInstance} process={processMetaData} table={tableMetaData} processValues={processValues} step={step} />
+                           )
+                        }
+                        {
+                           component.type === QComponentType.GOOGLE_DRIVE_SELECT_FOLDER && (
+                              // todo - make these booleans configurable (values on the component)
+                              <GoogleDriveFolderPickerWrapper showSharedDrivesView={true} showDefaultFoldersView={false} qInstance={qInstance} />
+                           )
+                        }
+                        {
+                           component.type === QComponentType.RECORD_LIST && step.recordListFields && recordConfig.columns && (
+                              <div>
+                                 <MDTypography variant="button" fontWeight="bold">Records</MDTypography>
+                                 {" "}
+                                 <br />
+                                 <Box height="100%">
+                                    <DataGridPro
+                                       components={{Pagination: CustomPagination}}
+                                       page={recordConfig.pageNo}
+                                       disableSelectionOnClick
+                                       autoHeight
+                                       rows={recordConfig.rows}
+                                       columns={recordConfig.columns}
+                                       rowBuffer={10}
+                                       rowCount={recordConfig.totalRecords}
+                                       pageSize={recordConfig.rowsPerPage}
+                                       rowsPerPageOptions={[10, 25, 50]}
+                                       onPageSizeChange={recordConfig.handleRowsPerPageChange}
+                                       onPageChange={recordConfig.handlePageChange}
+                                       onRowClick={recordConfig.handleRowClick}
+                                       getRowId={(row) => row.__idForDataGridPro__}
+                                       paginationMode="server"
+                                       pagination
+                                       density="compact"
+                                       loading={recordConfig.loading}
+                                       disableColumnFilter
+                                    />
+                                 </Box>
+                              </div>
+                           )
+                        }
+                        {
+                           component.type === QComponentType.HTML && (
+                              processValues[`${step.name}.html`] &&
+                              <Box fontSize="1rem">
+                                 {parse(processValues[`${step.name}.html`])}
                               </Box>
-                           </div>
-                        )
-                     }
-                     {
-                        component.type === QComponentType.HTML && (
-                           processValues[`${step.name}.html`] &&
-                           <Box fontSize="1rem">
-                              {parse(processValues[`${step.name}.html`])}
-                           </Box>
-                        )
-                     }
-                  </div>
-               )))}
+                           )
+                        }
+                     </div>
+                  );
+               }))
+            }
          </>
       );
    };
@@ -1109,7 +1113,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             if (recordIds instanceof QQueryFilter)
             {
                queryStringPairsForInit.push("recordsParam=filterJSON");
-               queryStringPairsForInit.push(`filterJSON=${JSON.stringify(recordIds)}`);
+               queryStringPairsForInit.push(`filterJSON=${encodeURIComponent(JSON.stringify(recordIds))}`);
             }
             else if (typeof recordIds === "object" && recordIds.length)
             {
@@ -1122,7 +1126,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
          if (tableVariantLocalStorageKey && localStorage.getItem(tableVariantLocalStorageKey))
          {
             let tableVariant = JSON.parse(localStorage.getItem(tableVariantLocalStorageKey));
-            queryStringPairsForInit.push(`tableVariant=${JSON.stringify(tableVariant)}`);
+            queryStringPairsForInit.push(`tableVariant=${encodeURIComponent(JSON.stringify(tableVariant))}`);
          }
 
          try
@@ -1277,13 +1281,14 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
    if (!processError && (qJobRunning || activeStep === null) && !isModal && !isWidget)
    {
-      mainCardStyles.background = "none";
+      mainCardStyles.background = "#FFFFFF";
       mainCardStyles.boxShadow = "none";
    }
    if (isWidget)
    {
       mainCardStyles.background = "none";
       mainCardStyles.boxShadow = "none";
+      mainCardStyles.border = "none";
       mainCardStyles.minHeight = "";
       mainCardStyles.alignItems = "stretch";
       mainCardStyles.flexGrow = 1;

src/qqq/pages/records/create/RecordCreate.tsx

@@ -34,12 +34,8 @@ function EntityCreate({table}: Props): JSX.Element
 {
    return (
       <BaseLayout>
-         <Box mt={4}>
-            <Grid container spacing={3}>
-               <Grid item xs={12} lg={12}>
-                  <EntityForm table={table} />
-               </Grid>
-            </Grid>
+         <Box mb={3}>
+            <EntityForm table={table} />
          </Box>
       </BaseLayout>
    );

src/qqq/pages/records/edit/RecordEdit.tsx

@@ -43,18 +43,8 @@ function EntityEdit({table, isCopy}: Props): JSX.Element
 
    return (
       <BaseLayout>
-         <Box mt={4}>
-            <Grid container spacing={3}>
-               <Grid item xs={12} lg={12}>
-                  <Box mb={3}>
-                     <Grid container spacing={3}>
-                        <Grid item xs={12}>
-                           <EntityForm table={table} id={id} isCopy={isCopy} />
-                        </Grid>
-                     </Grid>
-                  </Box>
-               </Grid>
-            </Grid>
+         <Box mb={3}>
+            <EntityForm table={table} id={id} isCopy={isCopy} />
          </Box>
       </BaseLayout>
    );

src/qqq/pages/records/query/ColumnStats.tsx

@@ -21,6 +21,7 @@
 
 import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
 import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
@@ -146,6 +147,11 @@ function ColumnStats({tableMetaData, fieldMetaData, fieldTableName, filter}: Pro
             const rows = DataGridUtils.makeRows(valueCounts, fakeTableMetaData);
             const columns = DataGridUtils.setupGridColumns(fakeTableMetaData, null, null, "bySection");
 
+            if(fieldMetaData.type == QFieldType.DATE_TIME)
+            {
+               columns[0].headerName = fieldMetaData.label + " (grouped by hour)"
+            }
+
             columns.forEach((c) =>
             {
                c.filterable = false;

src/qqq/pages/records/view/RecordDeveloperView.tsx

@@ -190,7 +190,7 @@ function RecordDeveloperView({table}: Props): JSX.Element
                                           return (
                                              <div key={fieldName}>
                                                 <Card sx={{mb: 3}}>
-                                                   <Typography variant="h6" p={2} pl={3} pb={1}>{field?.label}</Typography>
+                                                   <Typography variant="h6" p={2} pl={3} pb={3}>{field?.label}</Typography>
 
                                                    <Box display="flex" alignItems="center" justifyContent="space-between" gap={2}>
                                                       {scriptId ?

src/qqq/pages/records/view/RecordView.tsx

@@ -45,13 +45,16 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Modal from "@mui/material/Modal";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
 import React, {useContext, useEffect, useState} from "react";
 import {useLocation, useNavigate, useParams} from "react-router-dom";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import AuditBody from "qqq/components/audits/AuditBody";
 import {QActionsMenuButton, QCancelButton, QDeleteButton, QEditButton} from "qqq/components/buttons/DefaultButtons";
 import EntityForm from "qqq/components/forms/EntityForm";
 import {GotoRecordButton} from "qqq/components/misc/GotoRecordDialog";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
 import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
 import BaseLayout from "qqq/layouts/BaseLayout";
@@ -98,6 +101,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const [metaData, setMetaData] = useState(null as QInstance);
    const [record, setRecord] = useState(null as QRecord);
    const [tableSections, setTableSections] = useState([] as QTableSection[]);
+   const [t1Section, setT1Section] = useState(null as QTableSection);
    const [t1SectionName, setT1SectionName] = useState(null as string);
    const [t1SectionElement, setT1SectionElement] = useState(null as JSX.Element);
    const [nonT1TableSections, setNonT1TableSections] = useState([] as QTableSection[]);
@@ -117,7 +121,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
    const closeActionsMenu = () => setActionsMenu(null);
 
-   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen} = useContext(QContext);
+   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive} = useContext(QContext);
 
    if (localStorage.getItem(tableVariantLocalStorageKey))
    {
@@ -351,6 +355,23 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       return (visibleJoinTables);
    };
 
+
+   /*******************************************************************************
+    ** get an element (or empty) to use as help content for a section
+    *******************************************************************************/
+   const getSectionHelp = (section: QTableSection) =>
+   {
+      const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
+      const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableName};section:${section.name}`} />;
+
+      return formattedHelpContent && (
+         <Box px={"1.5rem"} fontSize={"0.875rem"} color={colors.blueGray.main}>
+            {formattedHelpContent}
+         </Box>
+      )
+   }
+
+
    if (!asyncLoadInited)
    {
       setAsyncLoadInited(true);
@@ -502,15 +523,24 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                         {
                            let [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
                            let label = field.label;
+
+                           const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
+                           const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
+                           const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
+
+                           const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>
+
                            return (
                               <Box key={fieldName} flexDirection="row" pr={2}>
-                                 <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)">
-                                    {label}:
+                                 <>
+                                    {
+                                       showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
+                                    }
                                     <div style={{display: "inline-block", width: 0}}>&nbsp;</div>
-                                 </Typography>
-                                 <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
-                                    {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
-                                 </Typography>
+                                    <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
+                                       {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
+                                    </Typography>
+                                 </>
                               </Box>
                            )
                         })
@@ -531,6 +561,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                               <Typography variant="h6" p={3} pb={1}>
                                  {section.label}
                               </Typography>
+                              {getSectionHelp(section)}
                               <Box p={3} pt={0} flexDirection="column">
                                  {fields}
                               </Box>
@@ -549,6 +580,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
             {
                setT1SectionElement(sectionFieldElements.get(section.name));
                setT1SectionName(section.name);
+               setT1Section(section);
             }
             else
             {
@@ -879,6 +911,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                                                    {renderActionsMenu}
                                                 </Box>
                                              </Box>
+                                             {t1Section && getSectionHelp(t1Section)}
                                              {t1SectionElement ? (<Box p={3} pt={0}>{t1SectionElement}</Box>) : null}
                                           </Card>
                                        </Grid>

src/qqq/styles/qqq-override-styles.css

@@ -29,6 +29,13 @@
    min-height: calc(100vh - 450px) !important;
 }
 
+/* we want to leave columns w/ the sortable attribute (so they have it in the column menu),
+but we've turned off the click-to-sort function, so remove hand cursor */
+.recordQuery .MuiDataGrid-columnHeader--sortable
+{
+   cursor: default !important;
+}
+
 /* Disable red outlines on clicked cells */
 .MuiDataGrid-cell:focus,
 .MuiDataGrid-columnHeader:focus,
@@ -100,9 +107,12 @@
 }
 
 /* move the green check / red x down to align with the calendar icon */
-.MuiFormControl-root
+.MuiFormControl-root:has(input[type="datetime-local"]),
+.MuiFormControl-root:has(input[type="date"]),
+.MuiFormControl-root:has(input[type="time"]),
+.MuiFormControl-root:has(.MuiInputBase-inputAdornedEnd)
 {
-   background-position-y: 1.4rem !important;
+   background-position: right 2rem center;
 }
 
 .MuiInputAdornment-sizeMedium *
@@ -399,7 +409,8 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    margin-right: 8px;
 }
 
-.custom-columns-panel .MuiSwitch-thumb
+.custom-columns-panel .MuiSwitch-thumb,
+.fieldListMenuBody .MuiSwitch-thumb
 {
    width: 15px !important;
    height: 15px !important;
@@ -421,6 +432,20 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    top: -60px !important;
 }
 
+.MuiDataGrid-panel:has(.customFilterPanel)
+{
+   /* overwrite what the grid tries to do here, where it changes based on density... we always want the same. */
+   /* transform: translate(274px, 305px) !important; */
+   transform: translate(274px, 264px) !important;
+}
+
+/* within the data-grid, the filter-panel's container has a max-height.  mirror that, and set an overflow-y */
+.MuiDataGrid-panel .customFilterPanel
+{
+   max-height: 450px;
+   overflow-y: auto;
+}
+
 /* tighten the text in the field select dropdown in custom filters */
 .customFilterPanel .MuiAutocomplete-paper
 {
@@ -484,7 +509,8 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 }
 
 /* change tags in any-of value fields to not be black bg with white text */
-.customFilterPanel .filterValuesColumn .MuiChip-root
+.customFilterPanel .filterValuesColumn .MuiChip-root,
+.quickFilter.filterValuesColumn .MuiChip-root
 {
    background: none;
    color: black;
@@ -492,20 +518,23 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 }
 
 /* change 'x' icon in tags in any-of value */
-.customFilterPanel .filterValuesColumn .MuiChip-root .MuiChip-deleteIcon
+.customFilterPanel .filterValuesColumn .MuiChip-root .MuiChip-deleteIcon,
+.quickFilter.filterValuesColumn .MuiChip-root .MuiChip-deleteIcon
 {
    color: gray;
 }
 
 /* change tags in any-of value fields to not be black bg with white text */
-.customFilterPanel .filterValuesColumn .MuiAutocomplete-tag
+.customFilterPanel .filterValuesColumn .MuiAutocomplete-tag,
+.quickFilter.filterValuesColumn .MuiAutocomplete-tag
 {
    color: #191919;
    background: none;
 }
 
 /* default hover color for the 'x' to remove a tag from an 'any-of' value was white, which made it disappear */
-.customFilterPanel .filterValuesColumn .MuiAutocomplete-tag .MuiSvgIcon-root:hover
+.customFilterPanel .filterValuesColumn .MuiAutocomplete-tag .MuiSvgIcon-root:hover,
+.quickFilter.filterValuesColumn .MuiAutocomplete-tag .MuiSvgIcon-root:hover
 {
    color: lightgray;
 }
@@ -564,3 +593,68 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    display: inline;
    right: .5rem
 }
+
+/* help-content */
+.helpContent
+{
+   color: #757575;
+}
+
+.helpContent .header
+{
+   color: #212121;
+   font-weight: 500;
+   display: block;
+   margin-bottom: 0.25rem;
+}
+
+.MuiTooltip-tooltip .helpContent P + P,
+.MuiTooltip-tooltip .helpContent UL + P
+{
+   margin-top: 1rem;
+}
+
+.helpContent UL
+{
+   margin-left: 1rem;
+}
+
+/* for query screen column-header tooltips, move them up a little bit, to be more closely attached to the text. */
+.dataGridHeaderTooltip
+{
+   top: -1.25rem;
+}
+
+/* when grid contents weren't filling the height of the screen, the gray panel for pinned columns
+ was stretching to most of the grid height, but it wasn't the full height and so looked a little
+ broken.  just turing off this min height changes to not try to stretch at all, and is not broken. */
+.MuiDataGrid-pinnedColumns
+{
+   min-height: unset !important;
+}
+
+/* new style for toggle buttons */
+.MuiToggleButtonGroup-root
+{
+   padding: 0.25rem;
+   border: 1px solid #BDBDBD;
+   border-radius: 0.5rem !important;
+}
+.MuiToggleButtonGroup-root .MuiButtonBase-root
+{
+   text-transform: none;
+   font-size: 0.75rem;
+   color: black;
+   font-weight: 600;
+   border-radius: 0.375rem !important; /* overriding left/right edge overrides for first/last */
+   border: none;
+   flex: 1 1 0px;
+}
+.MuiToggleButtonGroup-root .MuiButtonBase-root.Mui-selected
+{
+   background: rgba(117, 117, 117, 0.20);
+}
+.MuiToggleButtonGroup-root .MuiButtonBase-root.Mui-disabled
+{
+   border: none;
+}

src/qqq/utils/DataGridUtils.tsx

@@ -25,10 +25,13 @@ import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QField
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {GridColDef, GridFilterItem, GridRowsProp} from "@mui/x-data-grid-pro";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
+import {GridColDef, GridFilterItem, GridRowsProp, MuiEvent} from "@mui/x-data-grid-pro";
 import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
+import {GridColumnHeaderParams} from "@mui/x-data-grid/models/params/gridColumnHeaderParams";
 import React from "react";
-import {Link} from "react-router-dom";
+import {Link, NavigateFunction} from "react-router-dom";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import {buildQGridPvsOperators, QGridBlobOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/records/query/GridFilterOperators";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -81,6 +84,36 @@ const QGridDateTimeOperators = [
 
 export default class DataGridUtils
 {
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static handleRowClick = (path: string, event: MuiEvent<React.MouseEvent>, gridMouseDownX: number, gridMouseDownY: number, navigate: NavigateFunction, instance: any) =>
+   {
+      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // strategy for when to trigger or not trigger a row click:                                                      //
+      // To avoid a drag-event that highlighted text in a cell:                                                        //
+      // - we capture the x & y upon mouse-down - then compare them in this method (which fires when the mouse is up)  //
+      //   if they are more than 5 pixels away from the mouse-down, then assume it's a drag, not a click.              //
+      // - avoid clicking the row upon double-click, by setting a 500ms timer here - and in the onDoubleClick handler, //
+      //   cancelling the timer.                                                                                       //
+      // - also avoid a click, then click-again-and-start-dragging, by always cancelling the timer in mouse-down.      //
+      // All in, these seem to have good results - the only downside being the half-second delay...                    //
+      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      const diff = Math.max(Math.abs(event.clientX - gridMouseDownX), Math.abs(event.clientY - gridMouseDownY));
+      if (diff < 5)
+      {
+         console.log("clearing timeout");
+         clearTimeout(instance.current.timer);
+         instance.current.timer = setTimeout(() =>
+         {
+            navigate(path);
+         }, 100);
+      }
+      else
+      {
+         console.log(`row-click mouse-up happened ${diff} x or y pixels away from the mouse-down - so not considering it a click.`);
+      }
+   }
 
    /*******************************************************************************
     **
@@ -310,6 +343,20 @@ export default class DataGridUtils
          (cellValues.value)
       );
 
+      const helpRoles = ["QUERY_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
+      const showHelp = hasHelpContent(field.helpContents, helpRoles); // todo - maybe - take helpHelpActive from context all the way down to here?
+      if(showHelp)
+      {
+         const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={headerName} helpContentKey={`table:${tableMetaData.name};field:${fieldName}`} />;
+         column.renderHeader = (params: GridColumnHeaderParams) => (
+            <Tooltip title={formattedHelpContent}>
+               <div className="MuiDataGrid-columnHeaderTitle" style={{lineHeight: "initial"}}>
+                  {headerName}
+               </div>
+            </Tooltip>
+         );
+      }
+
       return (column);
    }
 

src/qqq/utils/HtmlUtils.ts

@@ -63,6 +63,10 @@ export default class HtmlUtils
 
    /*******************************************************************************
     ** Download a server-side generated file (or the contents of a data: url)
+    **
+    ** todo - this could be simplified (i think?)
+    ** it was originally built like this when we had to submit full access token to backend...
+    **
     *******************************************************************************/
    static downloadUrlViaIFrame = (url: string, filename: string) =>
    {
@@ -95,18 +99,6 @@ export default class HtmlUtils
       form.setAttribute("target", "downloadIframe");
       iframe.appendChild(form);
 
-      /////////////////////////////////////////////////////////////////////////////////////////////
-      // todo#authHeader - remove after comfortable with sessionUUID                             //
-      // todo - this could be simplified (i think?)                                              //
-      // it was originally built like this when we had to submit full access token to backend... //
-      /////////////////////////////////////////////////////////////////////////////////////////////
-      const authorizationInput = document.createElement("input");
-      authorizationInput.setAttribute("type", "hidden");
-      authorizationInput.setAttribute("id", "authorizationInput");
-      authorizationInput.setAttribute("name", "Authorization");
-      authorizationInput.setAttribute("value", Client.getInstance().getAuthorizationHeaderValue());
-      form.appendChild(authorizationInput);
-
       const downloadInput = document.createElement("input");
       downloadInput.setAttribute("type", "hidden");
       downloadInput.setAttribute("name", "download");
@@ -118,15 +110,16 @@ export default class HtmlUtils
 
    /*******************************************************************************
     ** Open a server-side generated file from a url in a new window (or a data: url)
+    **
+    ** todo - this could be simplified (i think?)
+    ** it was originally built like this when we had to submit full access token to backend...
+    **
     *******************************************************************************/
    static openInNewWindow = (url: string, filename: string) =>
    {
       if(url.startsWith("data:"))
       {
          /////////////////////////////////////////////////////////////////////////////////////////////
-         // todo#authHeader - remove the Authorization input after comfortable with sessionUUID     //
-         // todo - this could be simplified (i think?)                                              //
-         // it was originally built like this when we had to submit full access token to backend... //
          /////////////////////////////////////////////////////////////////////////////////////////////
          const openInWindow = window.open("", "_blank");
          openInWindow.document.write(`<html lang="en">
@@ -141,7 +134,7 @@ export default class HtmlUtils
       openInWindow.document.write(`<html lang="en">
             <head>
                <style>
-                  * { font-family: "Roboto","Helvetica","Arial",sans-serif; }
+                  * { font-family: "SF Pro Display","Roboto","Helvetica","Arial",sans-serif; }
                </style>
                <title>${filename}</title>
                <script>
@@ -154,7 +147,6 @@ export default class HtmlUtils
             <body>
                Opening ${filename}...
                <form id="exportForm" method="post" action="${url}" >
-                  <input type="hidden" name="Authorization" value="${Client.getInstance().getAuthorizationHeaderValue()}">
                </form>
             </body>
          </html>`);

src/qqq/utils/qqq/Client.ts

@@ -29,11 +29,18 @@ import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException
 class Client
 {
    private static qController: QController;
+   private static unauthorizedCallback: () => void;
 
    private static handleException(exception: QException)
    {
-      // todo - check for 401 and clear cookie et al & logout?
       console.log(`Caught Exception: ${JSON.stringify(exception)}`);
+
+      if(exception && exception.status == "401" && Client.unauthorizedCallback)
+      {
+         console.log("This is a 401 - calling the unauthorized callback.");
+         Client.unauthorizedCallback();
+      }
+
       throw (exception);
    }
 
@@ -46,6 +53,11 @@ class Client
 
       return this.qController;
    }
+
+   static setUnauthorizedCallback(unauthorizedCallback: () => void)
+   {
+      Client.unauthorizedCallback = unauthorizedCallback;
+   }
 }
 
 export default Client;

src/qqq/utils/qqq/FilterUtils.ts

@@ -1,752 +0,0 @@
-/*
- * 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 {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
-import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
-import {NowWithOffsetExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
-import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
-import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
-import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
-import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-import {ThisOrLastPeriodExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
-import {GridFilterItem, GridFilterModel, GridLinkOperator, GridSortItem} from "@mui/x-data-grid-pro";
-import TableUtils from "qqq/utils/qqq/TableUtils";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-
-const CURRENT_SAVED_FILTER_ID_LOCAL_STORAGE_KEY_ROOT = "qqq.currentSavedFilterId";
-
-/*******************************************************************************
- ** Utility class for working with QQQ Filters
- **
- *******************************************************************************/
-class FilterUtils
-{
-   /*******************************************************************************
-    ** Convert a grid operator to a QQQ Criteria Operator.
-    *******************************************************************************/
-   public static gridCriteriaOperatorToQQQ = (operator: string): QCriteriaOperator =>
-   {
-      switch (operator)
-      {
-         case "contains":
-            return QCriteriaOperator.CONTAINS;
-         case "notContains":
-            return QCriteriaOperator.NOT_CONTAINS;
-         case "startsWith":
-            return QCriteriaOperator.STARTS_WITH;
-         case "notStartsWith":
-            return QCriteriaOperator.NOT_STARTS_WITH;
-         case "endsWith":
-            return QCriteriaOperator.ENDS_WITH;
-         case "notEndsWith":
-            return QCriteriaOperator.NOT_ENDS_WITH;
-         case "is":
-         case "equals":
-         case "=":
-         case "isTrue":
-         case "isFalse":
-            return QCriteriaOperator.EQUALS;
-         case "isNot":
-         case "!=":
-            return QCriteriaOperator.NOT_EQUALS_OR_IS_NULL;
-         case "after":
-         case ">":
-            return QCriteriaOperator.GREATER_THAN;
-         case "onOrAfter":
-         case ">=":
-            return QCriteriaOperator.GREATER_THAN_OR_EQUALS;
-         case "before":
-         case "<":
-            return QCriteriaOperator.LESS_THAN;
-         case "onOrBefore":
-         case "<=":
-            return QCriteriaOperator.LESS_THAN_OR_EQUALS;
-         case "isEmpty":
-            return QCriteriaOperator.IS_BLANK;
-         case "isNotEmpty":
-            return QCriteriaOperator.IS_NOT_BLANK;
-         case "isAnyOf":
-            return QCriteriaOperator.IN;
-         case "isNone":
-            return QCriteriaOperator.NOT_IN;
-         case "between":
-            return QCriteriaOperator.BETWEEN;
-         case "notBetween":
-            return QCriteriaOperator.NOT_BETWEEN;
-         default:
-            return QCriteriaOperator.EQUALS;
-      }
-   };
-
-   /*******************************************************************************
-    ** Convert a qqq criteria operator to one expected by the grid.
-    *******************************************************************************/
-   public static qqqCriteriaOperatorToGrid = (operator: QCriteriaOperator, field: QFieldMetaData, criteriaValues: any[]): string =>
-   {
-      const fieldType = field.type;
-      switch (operator)
-      {
-         case QCriteriaOperator.EQUALS:
-
-            if (field.possibleValueSourceName)
-            {
-               return ("is");
-            }
-
-            switch (fieldType)
-            {
-               case QFieldType.INTEGER:
-               case QFieldType.DECIMAL:
-                  return ("=");
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-               case QFieldType.STRING:
-               case QFieldType.TEXT:
-               case QFieldType.HTML:
-               case QFieldType.PASSWORD:
-               case QFieldType.BLOB:
-                  return ("equals");
-               case QFieldType.BOOLEAN:
-                  if (criteriaValues && criteriaValues[0] === true)
-                  {
-                     return ("isTrue");
-                  }
-                  else if (criteriaValues && criteriaValues[0] === false)
-                  {
-                     return ("isFalse");
-                  }
-                  return ("is");
-               default:
-                  return ("is");
-            }
-         case QCriteriaOperator.NOT_EQUALS:
-         case QCriteriaOperator.NOT_EQUALS_OR_IS_NULL:
-
-            if (field.possibleValueSourceName)
-            {
-               return ("isNot");
-            }
-
-            switch (fieldType)
-            {
-               case QFieldType.INTEGER:
-               case QFieldType.DECIMAL:
-                  return ("!=");
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-               case QFieldType.BOOLEAN:
-               case QFieldType.STRING:
-               case QFieldType.TEXT:
-               case QFieldType.HTML:
-               case QFieldType.PASSWORD:
-               case QFieldType.BLOB:
-               default:
-                  return ("isNot");
-            }
-         case QCriteriaOperator.IN:
-            return ("isAnyOf");
-         case QCriteriaOperator.NOT_IN:
-            return ("isNone");
-         case QCriteriaOperator.STARTS_WITH:
-            return ("startsWith");
-         case QCriteriaOperator.ENDS_WITH:
-            return ("endsWith");
-         case QCriteriaOperator.CONTAINS:
-            return ("contains");
-         case QCriteriaOperator.NOT_STARTS_WITH:
-            return ("notStartsWith");
-         case QCriteriaOperator.NOT_ENDS_WITH:
-            return ("notEndsWith");
-         case QCriteriaOperator.NOT_CONTAINS:
-            return ("notContains");
-         case QCriteriaOperator.LESS_THAN:
-            switch (fieldType)
-            {
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-                  return ("before");
-               default:
-                  return ("<");
-            }
-         case QCriteriaOperator.LESS_THAN_OR_EQUALS:
-            switch (fieldType)
-            {
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-                  return ("onOrBefore");
-               default:
-                  return ("<=");
-            }
-         case QCriteriaOperator.GREATER_THAN:
-            switch (fieldType)
-            {
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-                  return ("after");
-               default:
-                  return (">");
-            }
-         case QCriteriaOperator.GREATER_THAN_OR_EQUALS:
-            switch (fieldType)
-            {
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-                  return ("onOrAfter");
-               default:
-                  return (">=");
-            }
-         case QCriteriaOperator.IS_BLANK:
-            return ("isEmpty");
-         case QCriteriaOperator.IS_NOT_BLANK:
-            return ("isNotEmpty");
-         case QCriteriaOperator.BETWEEN:
-            return ("between");
-         case QCriteriaOperator.NOT_BETWEEN:
-            return ("notBetween");
-         default:
-            console.warn(`Unhandled criteria operator: ${operator}`);
-            return ("=");
-      }
-   };
-
-   /*******************************************************************************
-    ** the values object needs handled differently based on cardinality of the operator.
-    ** that is - qqq always wants a list, but the grid provides it differently per-operator.
-    ** for single-values (the default), we must wrap it in an array.
-    ** for non-values (e.g., blank), set it to null.
-    ** for list-values, it's already in an array, so don't wrap it.
-    *******************************************************************************/
-   public static gridCriteriaValueToQQQ = (operator: QCriteriaOperator, value: any, gridOperatorValue: string, fieldMetaData: QFieldMetaData): any[] =>
-   {
-      if (gridOperatorValue === "isTrue")
-      {
-         return [true];
-      }
-      else if (gridOperatorValue === "isFalse")
-      {
-         return [false];
-      }
-
-      if (operator === QCriteriaOperator.IS_BLANK || operator === QCriteriaOperator.IS_NOT_BLANK)
-      {
-         return (null);
-      }
-      else if (operator === QCriteriaOperator.IN || operator === QCriteriaOperator.NOT_IN || operator === QCriteriaOperator.BETWEEN || operator === QCriteriaOperator.NOT_BETWEEN)
-      {
-         if ((value == null || value.length < 2) && (operator === QCriteriaOperator.BETWEEN || operator === QCriteriaOperator.NOT_BETWEEN))
-         {
-            /////////////////////////////////////////////////////////////////////////////////////////////////
-            // if we send back null, we get a 500 - bad look every time you try to set up a BETWEEN filter //
-            // but array of 2 nulls?  comes up sunshine.                                                   //
-            /////////////////////////////////////////////////////////////////////////////////////////////////
-            return ([null, null]);
-         }
-         return (FilterUtils.cleanseCriteriaValueForQQQ(value, fieldMetaData));
-      }
-
-      return (FilterUtils.cleanseCriteriaValueForQQQ([value], fieldMetaData));
-   };
-
-
-   /*******************************************************************************
-    ** Helper method - take a list of values, which may be possible values, and
-    ** either return the original list, or a new list that is just the ids of the
-    ** possible values (if it was a list of possible values).
-    **
-    ** Or, if the values are date-times, convert them to UTC.
-    *******************************************************************************/
-   private static cleanseCriteriaValueForQQQ = (param: any[], fieldMetaData: QFieldMetaData): number[] | string[] =>
-   {
-      if (param === null || param === undefined)
-      {
-         return (param);
-      }
-
-      if (FilterUtils.gridCriteriaValueToExpression(param))
-      {
-         return (param);
-      }
-
-      let rs = [];
-      for (let i = 0; i < param.length; i++)
-      {
-         console.log(param[i]);
-         if (param[i] && param[i].id && param[i].label)
-         {
-            //////////////////////////////////////////////////////////////////////////////////////////
-            // if the param looks like a possible value, return its id                              //
-            // during build of new custom filter panel, this ended up causing us                    //
-            // problems (because we wanted the full PV object in the filter model for the frontend) //
-            // so, we can keep the PV as-is here, and see calls to convertFilterPossibleValuesToIds //
-            // to do what this used to do.                                                          //
-            //////////////////////////////////////////////////////////////////////////////////////////
-            // rs.push(param[i].id);
-            rs.push(param[i]);
-         }
-         else
-         {
-            if (fieldMetaData?.type == QFieldType.DATE_TIME)
-            {
-               try
-               {
-                  let toPush = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(param[i]);
-                  rs.push(toPush);
-               }
-               catch (e)
-               {
-                  console.log("Error converting date-time to UTC: ", e);
-                  rs.push(param[i]);
-               }
-            }
-            else
-            {
-               rs.push(param[i]);
-            }
-         }
-      }
-      return (rs);
-   };
-
-
-   /*******************************************************************************
-    ** Convert a filter field's value from the style that qqq uses, to the style that
-    ** the grid uses.
-    *******************************************************************************/
-   public static qqqCriteriaValuesToGrid = (operator: QCriteriaOperator, values: any[], field: QFieldMetaData): any | any[] =>
-   {
-      const fieldType = field.type;
-      if (operator === QCriteriaOperator.IS_BLANK || operator === QCriteriaOperator.IS_NOT_BLANK)
-      {
-         return null;
-      }
-      else if (operator === QCriteriaOperator.IN || operator === QCriteriaOperator.NOT_IN || operator === QCriteriaOperator.BETWEEN || operator === QCriteriaOperator.NOT_BETWEEN)
-      {
-         return (values);
-      }
-
-      if (values && values.length > 0)
-      {
-         ////////////////////////////////////////////////////////////////////////////////////////////////
-         // make sure dates are formatted for the grid the way it expects - not the way we pass it in. //
-         ////////////////////////////////////////////////////////////////////////////////////////////////
-         if (fieldType === QFieldType.DATE_TIME)
-         {
-            for(let i = 0; i<values.length; i++)
-            {
-               if(!values[i].type)
-               {
-                  values[i] = ValueUtils.formatDateTimeValueForForm(values[i]);
-               }
-            }
-         }
-      }
-
-      return (values ? values[0] : "");
-   };
-
-
-   /*******************************************************************************
-    ** Get the default filter to use on the page - either from given filter string, query string param, or
-    ** local storage, or a default (empty).
-    *******************************************************************************/
-   public static async determineFilterAndSortModels(qController: QController, tableMetaData: QTableMetaData, filterString: string, searchParams: URLSearchParams, filterLocalStorageKey: string, sortLocalStorageKey: string): Promise<{ filter: GridFilterModel, sort: GridSortItem[], warning: string }>
-   {
-      let defaultFilter = {items: []} as GridFilterModel;
-      let defaultSort = [] as GridSortItem[];
-      let warningParts = [] as string[];
-
-      if (tableMetaData && tableMetaData.fields !== undefined)
-      {
-         if (filterString != null || (searchParams && searchParams.has("filter")))
-         {
-            try
-            {
-               const filterJSON = (filterString !== null) ? JSON.parse(filterString) : JSON.parse(searchParams.get("filter"));
-               const qQueryFilter = filterJSON as QQueryFilter;
-
-               //////////////////////////////////////////////////////////////////
-               // translate from a qqq-style filter to one that the grid wants //
-               //////////////////////////////////////////////////////////////////
-               let id = 1;
-               for (let i = 0; i < qQueryFilter?.criteria?.length; i++)
-               {
-                  const criteria = qQueryFilter.criteria[i];
-                  let [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, criteria.fieldName);
-                  if (field == null)
-                  {
-                     console.log("Couldn't find field for filter: " + criteria.fieldName);
-                     warningParts.push("Your filter contained an unrecognized field name: " + criteria.fieldName)
-                     continue;
-                  }
-
-                  let values = criteria.values;
-                  if (field.possibleValueSourceName)
-                  {
-                     //////////////////////////////////////////////////////////////////////////////////
-                     // possible-values in query-string are expected to only be their id values.     //
-                     // e.g., ...values=[1]...                                                       //
-                     // but we need them to be possibleValue objects (w/ id & label) so the label    //
-                     // can be shown in the filter dropdown.  So, make backend call to look them up. //
-                     //////////////////////////////////////////////////////////////////////////////////
-                     if (values && values.length > 0)
-                     {
-                        values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
-                     }
-
-                     ////////////////////////////////////////////
-                     // log message if no values were returned //
-                     ////////////////////////////////////////////
-                     if (!values || values.length === 0)
-                     {
-                        console.warn("WARNING: No possible values were returned for [" + field.possibleValueSourceName + "] for values [" + criteria.values + "].");
-                     }
-                  }
-
-                  //////////////////////////////////////////////////////////////////////////
-                  // replace objects that look like expressions with expression instances //
-                  //////////////////////////////////////////////////////////////////////////
-                  if(values && values.length)
-                  {
-                     for (let i = 0; i < values.length; i++)
-                     {
-                        const expression = this.gridCriteriaValueToExpression(values[i])
-                        if (expression)
-                        {
-                           values[i] = expression;
-                        }
-                     }
-                  }
-
-                  defaultFilter.items.push({
-                     columnField: criteria.fieldName,
-                     operatorValue: FilterUtils.qqqCriteriaOperatorToGrid(criteria.operator, field, values),
-                     value: FilterUtils.qqqCriteriaValuesToGrid(criteria.operator, values, field),
-                     id: id++
-                  });
-               }
-
-               defaultFilter.linkOperator = GridLinkOperator.And;
-               if (qQueryFilter.booleanOperator === "OR")
-               {
-                  defaultFilter.linkOperator = GridLinkOperator.Or;
-               }
-
-               /////////////////////////////////////////////////////////////////
-               // translate from qqq-style orderBy to one that the grid wants //
-               /////////////////////////////////////////////////////////////////
-               if (qQueryFilter.orderBys && qQueryFilter.orderBys.length > 0)
-               {
-                  for (let i = 0; i < qQueryFilter.orderBys.length; i++)
-                  {
-                     const orderBy = qQueryFilter.orderBys[i];
-                     defaultSort.push({
-                        field: orderBy.fieldName,
-                        sort: orderBy.isAscending ? "asc" : "desc"
-                     });
-                  }
-               }
-
-               if (searchParams && searchParams.has("filter"))
-               {
-                  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  // if we're setting the filter based on a filter query-string param, then make sure we don't have a currentSavedFilter in local storage. //
-                  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  localStorage.removeItem(`${CURRENT_SAVED_FILTER_ID_LOCAL_STORAGE_KEY_ROOT}.${tableMetaData.name}`);
-                  localStorage.setItem(filterLocalStorageKey, JSON.stringify(defaultFilter));
-                  localStorage.setItem(sortLocalStorageKey, JSON.stringify(defaultSort));
-               }
-
-               return ({filter: defaultFilter, sort: defaultSort, warning: warningParts.length > 0 ? "Warning: " + warningParts.join("; ") : ""});
-            }
-            catch (e)
-            {
-               console.warn("Error parsing filter from query string", e);
-            }
-         }
-
-         if (localStorage.getItem(filterLocalStorageKey))
-         {
-            defaultFilter = JSON.parse(localStorage.getItem(filterLocalStorageKey));
-            console.log(`Got default from LS: ${JSON.stringify(defaultFilter)}`);
-         }
-
-         if (localStorage.getItem(sortLocalStorageKey))
-         {
-            defaultSort = JSON.parse(localStorage.getItem(sortLocalStorageKey));
-            console.log(`Got default from LS: ${JSON.stringify(defaultSort)}`);
-         }
-      }
-
-      /////////////////////////////////////////////////////////////////////////////////
-      // if any values in the items are objects, but should be expression instances, //
-      // then convert & replace them.                                               //
-      /////////////////////////////////////////////////////////////////////////////////
-      if(defaultFilter && defaultFilter.items && defaultFilter.items.length)
-      {
-         defaultFilter.items.forEach((item) =>
-         {
-            if(item.value && item.value.length)
-            {
-               for (let i = 0; i < item.value.length; i++)
-               {
-                  const expression = this.gridCriteriaValueToExpression(item.value[i])
-                  if(expression)
-                  {
-                     item.value[i] = expression;
-                  }
-               }
-            }
-            else
-            {
-               const expression = this.gridCriteriaValueToExpression(item.value)
-               if(expression)
-               {
-                  item.value = expression;
-               }
-            }
-         });
-      }
-
-      return ({filter: defaultFilter, sort: defaultSort, warning: warningParts.length > 0 ? "Warning: " + warningParts.join("; ") : ""});
-   }
-
-
-   /*******************************************************************************
-    ** build a grid filter from a qqq filter
-    *******************************************************************************/
-   public static buildGridFilterFromQFilter(tableMetaData: QTableMetaData, queryFilter: QQueryFilter): GridFilterModel
-   {
-      const gridItems: GridFilterItem[] = [];
-
-      for (let i = 0; i < queryFilter.criteria.length; i++)
-      {
-         const criteria = queryFilter.criteria[i];
-         const [field, fieldTable] = FilterUtils.getField(tableMetaData, criteria.fieldName);
-         if (field)
-         {
-            gridItems.push({columnField: criteria.fieldName, id: i, operatorValue: FilterUtils.qqqCriteriaOperatorToGrid(criteria.operator, field, criteria.values), value: FilterUtils.qqqCriteriaValuesToGrid(criteria.operator, criteria.values, field)});
-         }
-      }
-
-      const gridFilter: GridFilterModel = {items: gridItems, linkOperator: queryFilter.booleanOperator == "AND" ? GridLinkOperator.And : GridLinkOperator.Or};
-      return (gridFilter);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static getField(tableMetaData: QTableMetaData, fieldName: string): [QFieldMetaData, QTableMetaData]
-   {
-      if (fieldName == null)
-      {
-         return ([null, null]);
-      }
-
-      if (fieldName.indexOf(".") > -1)
-      {
-         let parts = fieldName.split(".", 2);
-         if (tableMetaData.exposedJoins && tableMetaData.exposedJoins.length)
-         {
-            for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
-            {
-               const joinTable = tableMetaData.exposedJoins[i].joinTable;
-               if (joinTable.name == parts[0])
-               {
-                  return ([joinTable.fields.get(parts[1]), joinTable]);
-               }
-            }
-         }
-
-         console.log(`Failed to find join field: ${fieldName}`);
-         return ([null, null]);
-      }
-      else
-      {
-         return ([tableMetaData.fields.get(fieldName), tableMetaData]);
-      }
-   }
-
-
-   /*******************************************************************************
-    ** build a qqq filter from a grid and column sort model
-    *******************************************************************************/
-   public static buildQFilterFromGridFilter(tableMetaData: QTableMetaData, filterModel: GridFilterModel, columnSortModel: GridSortItem[], limit?: number, allowIncompleteCriteria = false): QQueryFilter
-   {
-      console.log("Building q filter with model:");
-      console.log(filterModel);
-
-      const qFilter = new QQueryFilter();
-      if (columnSortModel)
-      {
-         columnSortModel.forEach((gridSortItem) =>
-         {
-            qFilter.addOrderBy(new QFilterOrderBy(gridSortItem.field, gridSortItem.sort === "asc"));
-         });
-      }
-
-      if (limit)
-      {
-         console.log("Setting limit to: " + limit);
-         qFilter.limit = limit;
-      }
-
-      if (filterModel)
-      {
-         let foundFilter = false;
-         filterModel.items.forEach((item) =>
-         {
-            /////////////////////////////////////////////////////////////////////////
-            // set the values for these operators that otherwise don't have values //
-            /////////////////////////////////////////////////////////////////////////
-            if (item.operatorValue === "isTrue")
-            {
-               item.value = [true];
-            }
-            else if (item.operatorValue === "isFalse")
-            {
-               item.value = [false];
-            }
-
-            ////////////////////////////////////////////////////////////////////////////////
-            // if no value set and not 'empty' or 'not empty' operators, skip this filter //
-            ////////////////////////////////////////////////////////////////////////////////
-            let incomplete = false;
-            if (item.operatorValue === "between" || item.operatorValue === "notBetween")
-            {
-               if(!item.value || !item.value.length || item.value.length < 2 || this.isUnset(item.value[0]) || this.isUnset(item.value[1]))
-               {
-                  incomplete = true;
-               }
-            }
-            else if ((!item.value || item.value.length == 0 || (item.value.length == 1 && this.isUnset(item.value[0]))) && item.operatorValue !== "isEmpty" && item.operatorValue !== "isNotEmpty")
-            {
-               incomplete = true;
-            }
-
-            if (incomplete && !allowIncompleteCriteria)
-            {
-               console.log(`Discarding incomplete filter criteria: ${JSON.stringify(item)}`);
-               return;
-            }
-
-            const fieldMetadata = tableMetaData?.fields.get(item.columnField);
-            const operator = FilterUtils.gridCriteriaOperatorToQQQ(item.operatorValue);
-            const values = FilterUtils.gridCriteriaValueToQQQ(operator, item.value, item.operatorValue, fieldMetadata);
-            let criteria = new QFilterCriteria(item.columnField, operator, values);
-            qFilter.addCriteria(criteria);
-            foundFilter = true;
-         });
-
-         qFilter.booleanOperator = "AND";
-         if (filterModel.linkOperator == "or")
-         {
-            ///////////////////////////////////////////////////////////////////////////////////////////
-            // by default qFilter uses AND - so only  if we see linkOperator=or do we need to set it //
-            ///////////////////////////////////////////////////////////////////////////////////////////
-            qFilter.booleanOperator = "OR";
-         }
-      }
-
-      return qFilter;
-   };
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private static isUnset(value: any)
-   {
-      return value === "" || value === undefined;
-   }
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private static gridCriteriaValueToExpression(value: any)
-   {
-      if (value && value.length)
-      {
-         value = value[0];
-      }
-
-      if (value && value.type)
-      {
-         if (value.type == "NowWithOffset")
-         {
-            return (new NowWithOffsetExpression(value));
-         }
-         else if (value.type == "Now")
-         {
-            return (new NowExpression(value));
-         }
-         else if (value.type == "ThisOrLastPeriod")
-         {
-            return (new ThisOrLastPeriodExpression(value));
-         }
-      }
-
-      return (null);
-   }
-
-
-   /*******************************************************************************
-    ** edit the input filter object, replacing any values which have {id,label} attributes
-    ** to instead just have the id part.
-    *******************************************************************************/
-   public static convertFilterPossibleValuesToIds(inputFilter: QQueryFilter): QQueryFilter
-   {
-      const filter = Object.assign({}, inputFilter);
-
-      if (filter.criteria)
-      {
-         for (let i = 0; i < filter.criteria.length; i++)
-         {
-            const criteria = filter.criteria[i];
-            if (criteria.values)
-            {
-               for (let j = 0; j < criteria.values.length; j++)
-               {
-                  let value = criteria.values[j];
-                  if (value && value.id && value.label)
-                  {
-                     criteria.values[j] = value.id;
-                  }
-               }
-            }
-         }
-      }
-
-      return (filter);
-   }
-
-}
-
-export default FilterUtils;

src/qqq/utils/qqq/FilterUtils.tsx

@@ -0,0 +1,577 @@
+/*
+ * 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 {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
+import {NowWithOffsetExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
+import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
+import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
+import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {ThisOrLastPeriodExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
+import Box from "@mui/material/Box";
+import {GridSortModel} from "@mui/x-data-grid-pro";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+/*******************************************************************************
+ ** Utility class for working with QQQ Filters
+ **
+ *******************************************************************************/
+class FilterUtils
+{
+
+   /*******************************************************************************
+    ** Helper method - take a list of values, which may be possible values, and
+    ** either return the original list, or a new list that is just the ids of the
+    ** possible values (if it was a list of possible values).
+    **
+    ** Or, if the values are date-times, convert them to UTC.
+    *******************************************************************************/
+   public static cleanseCriteriaValueForQQQ = (param: any[], fieldMetaData: QFieldMetaData): number[] | string[] =>
+   {
+      if (param === null || param === undefined)
+      {
+         return (param);
+      }
+
+      if (FilterUtils.gridCriteriaValueToExpression(param))
+      {
+         return (param);
+      }
+
+      let rs = [];
+      for (let i = 0; i < param.length; i++)
+      {
+         if (param[i] && param[i].id && param[i].label)
+         {
+            /////////////////////////////////////////////////////////////
+            // if the param looks like a possible value, return its id //
+            /////////////////////////////////////////////////////////////
+            rs.push(param[i].id);
+         }
+         else
+         {
+            if (fieldMetaData?.type == QFieldType.DATE_TIME)
+            {
+               try
+               {
+                  let toPush = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(param[i]);
+                  rs.push(toPush);
+               }
+               catch (e)
+               {
+                  console.log("Error converting date-time to UTC: ", e);
+                  rs.push(param[i]);
+               }
+            }
+            else
+            {
+               rs.push(param[i]);
+            }
+         }
+      }
+      return (rs);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static async cleanupValuesInFilerFromQueryString(qController: QController, tableMetaData: QTableMetaData, queryFilter: QQueryFilter)
+   {
+      for (let i = 0; i < queryFilter?.criteria?.length; i++)
+      {
+         const criteria = queryFilter.criteria[i];
+         let [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, criteria.fieldName);
+
+         let values = criteria.values;
+         if (field.possibleValueSourceName)
+         {
+            //////////////////////////////////////////////////////////////////////////////////
+            // possible-values in query-string are expected to only be their id values.     //
+            // e.g., ...values=[1]...                                                       //
+            // but we need them to be possibleValue objects (w/ id & label) so the label    //
+            // can be shown in the filter dropdown.  So, make backend call to look them up. //
+            //////////////////////////////////////////////////////////////////////////////////
+            if (values && values.length > 0)
+            {
+               values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
+            }
+
+            ////////////////////////////////////////////
+            // log message if no values were returned //
+            ////////////////////////////////////////////
+            if (!values || values.length === 0)
+            {
+               console.warn("WARNING: No possible values were returned for [" + field.possibleValueSourceName + "] for values [" + criteria.values + "].");
+            }
+         }
+
+         if (values && values.length)
+         {
+            for (let i = 0; i < values.length; i++)
+            {
+               //////////////////////////////////////////////////////////////////////////
+               // replace objects that look like expressions with expression instances //
+               //////////////////////////////////////////////////////////////////////////
+               const expression = this.gridCriteriaValueToExpression(values[i]);
+               if (expression)
+               {
+                  values[i] = expression;
+               }
+               else
+               {
+                  ///////////////////////////////////////////
+                  // make date-times work for the frontend //
+                  ///////////////////////////////////////////
+                  if (field.type == QFieldType.DATE_TIME)
+                  {
+                     values[i] = ValueUtils.formatDateTimeValueForForm(values[i]);
+                  }
+               }
+            }
+         }
+
+         criteria.values = values;
+      }
+   }
+
+
+   /*******************************************************************************
+    ** given a table, and a field name (which may be prefixed with an exposed-join
+    ** table name (from the table) - return the corresponding field-meta-data, and
+    ** the table that the field is from (e.g., may be a join table!)
+    *******************************************************************************/
+   public static getField(tableMetaData: QTableMetaData, fieldName: string): [QFieldMetaData, QTableMetaData]
+   {
+      if (fieldName == null)
+      {
+         return ([null, null]);
+      }
+
+      if (fieldName.indexOf(".") > -1)
+      {
+         let parts = fieldName.split(".", 2);
+         if (tableMetaData.exposedJoins && tableMetaData.exposedJoins.length)
+         {
+            for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
+            {
+               const joinTable = tableMetaData.exposedJoins[i].joinTable;
+               if (joinTable.name == parts[0])
+               {
+                  return ([joinTable.fields.get(parts[1]), joinTable]);
+               }
+            }
+         }
+
+         console.log(`Failed to find join field: ${fieldName}`);
+         return ([null, null]);
+      }
+      else
+      {
+         return ([tableMetaData.fields.get(fieldName), tableMetaData]);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static gridCriteriaValueToExpression(value: any)
+   {
+      if (value && value.length)
+      {
+         value = value[0];
+      }
+
+      if (value && value.type)
+      {
+         if (value.type == "NowWithOffset")
+         {
+            return (new NowWithOffsetExpression(value));
+         }
+         else if (value.type == "Now")
+         {
+            return (new NowExpression(value));
+         }
+         else if (value.type == "ThisOrLastPeriod")
+         {
+            return (new ThisOrLastPeriodExpression(value));
+         }
+      }
+
+      return (null);
+   }
+
+
+   /*******************************************************************************
+    ** edit the input filter object, replacing any values which have {id,label} attributes
+    ** to instead just have the id part.
+    *******************************************************************************/
+   public static convertFilterPossibleValuesToIds(inputFilter: QQueryFilter): QQueryFilter
+   {
+      const filter = Object.assign({}, inputFilter);
+
+      if (filter.criteria)
+      {
+         for (let i = 0; i < filter.criteria.length; i++)
+         {
+            const criteria = filter.criteria[i];
+            if (criteria.values)
+            {
+               for (let j = 0; j < criteria.values.length; j++)
+               {
+                  let value = criteria.values[j];
+                  if (value && value.id && value.label)
+                  {
+                     criteria.values[j] = value.id;
+                  }
+               }
+            }
+         }
+      }
+
+      return (filter);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; reasonsWhyItCannot?: string[] }
+   {
+      const reasonsWhyItCannot: string[] = [];
+
+      if(filter == null)
+      {
+         return ({canFilterWorkAsBasic: true});
+      }
+
+      if(filter.booleanOperator == "OR")
+      {
+         reasonsWhyItCannot.push("Filter uses the 'OR' operator.")
+      }
+
+      if(filter.criteria)
+      {
+         const usedFields: {[name: string]: boolean} = {};
+         const warnedFields: {[name: string]: boolean} = {};
+         for (let i = 0; i < filter.criteria.length; i++)
+         {
+            const criteriaName = filter.criteria[i].fieldName;
+            if(!criteriaName)
+            {
+               continue;
+            }
+
+            if(usedFields[criteriaName])
+            {
+               if(!warnedFields[criteriaName])
+               {
+                  const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, criteriaName);
+                  let fieldLabel = field.label;
+                  if(tableForField.name != tableMetaData.name)
+                  {
+                     let fieldLabel = `${tableForField.label}: ${field.label}`;
+                  }
+                  reasonsWhyItCannot.push(`Filter contains more than 1 condition for the field: ${fieldLabel}`);
+                  warnedFields[criteriaName] = true;
+               }
+            }
+            usedFields[criteriaName] = true;
+         }
+      }
+
+      if(reasonsWhyItCannot.length == 0)
+      {
+         return ({canFilterWorkAsBasic: true});
+      }
+      else
+      {
+         return ({canFilterWorkAsBasic: false, reasonsWhyItCannot: reasonsWhyItCannot});
+      }
+   }
+
+   /*******************************************************************************
+    ** get the values associated with a criteria as a string, e.g., for showing
+    ** in a tooltip.
+    *******************************************************************************/
+   public static getValuesString(fieldMetaData: QFieldMetaData, criteria: QFilterCriteria, maxValuesToShow: number = 3, andMoreFormat: "andNOther" | "+N" = "andNOther"): string
+   {
+      let valuesString = "";
+
+      if(criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
+      {
+         ///////////////////////////////////////////////
+         // we don't want values for these operators. //
+         ///////////////////////////////////////////////
+         return valuesString;
+      }
+
+      if (criteria.values && criteria.values.length)
+      {
+         let labels = [] as string[];
+
+         let maxLoops = criteria.values.length;
+         if (maxLoops > (maxValuesToShow + 2))
+         {
+            maxLoops = maxValuesToShow;
+         }
+         else if(maxValuesToShow == 1 && criteria.values.length > 1)
+         {
+            maxLoops = 1;
+         }
+
+         for (let i = 0; i < maxLoops; i++)
+         {
+            const value = criteria.values[i];
+            if (value.type == "NowWithOffset")
+            {
+               const expression = new NowWithOffsetExpression(value);
+               labels.push(expression.toString());
+            }
+            else if (value.type == "Now")
+            {
+               const expression = new NowExpression(value);
+               labels.push(expression.toString());
+            }
+            else if (value.type == "ThisOrLastPeriod")
+            {
+               const expression = new ThisOrLastPeriodExpression(value);
+               let startOfPrefix = "";
+               if(fieldMetaData.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
+               {
+                  startOfPrefix = "start of ";
+               }
+               labels.push(`${startOfPrefix}${expression.toString()}`);
+            }
+            else if(fieldMetaData.type == QFieldType.BOOLEAN)
+            {
+               labels.push(value == true ? "yes" : "no")
+            }
+            else if(fieldMetaData.type == QFieldType.DATE_TIME)
+            {
+               labels.push(ValueUtils.formatDateTime(value));
+            }
+            else if(fieldMetaData.type == QFieldType.DATE)
+            {
+               labels.push(ValueUtils.formatDate(value));
+            }
+            else if (value && value.label)
+            {
+               labels.push(value.label);
+            }
+            else
+            {
+               labels.push(value);
+            }
+         }
+
+         if (maxLoops < criteria.values.length)
+         {
+            const n = criteria.values.length - maxLoops;
+            switch (andMoreFormat)
+            {
+               case "andNOther":
+                  labels.push(` and ${n.toLocaleString()} other value${n == 1 ? "" : "s"}.`);
+                  break;
+               case "+N":
+                  labels[labels.length-1] += ` +${n.toLocaleString()}`;
+                  break;
+            }
+         }
+
+         valuesString = (labels.join(", "));
+      }
+      return valuesString;
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static buildQFilterFromJSONObject(object: any): QQueryFilter
+   {
+      const queryFilter = new QQueryFilter();
+
+      queryFilter.criteria = [];
+      for (let i = 0; i < object.criteria?.length; i++)
+      {
+         const criteriaObject = object.criteria[i];
+         queryFilter.criteria.push(new QFilterCriteria(criteriaObject.fieldName, criteriaObject.operator, criteriaObject.values));
+      }
+
+      queryFilter.orderBys = [];
+      for (let i = 0; i < object.orderBys?.length; i++)
+      {
+         const orderByObject = object.orderBys[i];
+         queryFilter.orderBys.push(new QFilterOrderBy(orderByObject.fieldName, orderByObject.isAscending));
+      }
+
+      queryFilter.booleanOperator = object.booleanOperator;
+      queryFilter.skip = object.skip;
+      queryFilter.limit = object.limit;
+
+      return (queryFilter);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getGridSortFromQueryFilter(queryFilter: QQueryFilter): GridSortModel
+   {
+      const gridSortModel: GridSortModel = [];
+      for (let i = 0; i < queryFilter?.orderBys?.length; i++)
+      {
+         const orderBy = queryFilter.orderBys[i];
+         gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"})
+      }
+      return (gridSortModel);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static operatorToHumanString(criteria: QFilterCriteria, field: QFieldMetaData): string
+   {
+      if(criteria == null || criteria.operator == null)
+      {
+         return (null);
+      }
+
+      const isDate = field.type == QFieldType.DATE;
+      const isDateTime = field.type == QFieldType.DATE_TIME;
+
+      try
+      {
+         switch(criteria.operator)
+         {
+            case QCriteriaOperator.EQUALS:
+               return ("equals");
+            case QCriteriaOperator.NOT_EQUALS:
+            case QCriteriaOperator.NOT_EQUALS_OR_IS_NULL:
+               return ("does not equal");
+            case QCriteriaOperator.IN:
+               return ("is any of");
+            case QCriteriaOperator.NOT_IN:
+               return ("is none of");
+            case QCriteriaOperator.STARTS_WITH:
+               return ("starts with");
+            case QCriteriaOperator.ENDS_WITH:
+               return ("ends with");
+            case QCriteriaOperator.CONTAINS:
+               return ("contains");
+            case QCriteriaOperator.NOT_STARTS_WITH:
+               return ("does not start with");
+            case QCriteriaOperator.NOT_ENDS_WITH:
+               return ("does not end with");
+            case QCriteriaOperator.NOT_CONTAINS:
+               return ("does not contain");
+            case QCriteriaOperator.LESS_THAN:
+               if(isDate || isDateTime)
+               {
+                  return ("is before")
+               }
+               return ("less than");
+            case QCriteriaOperator.LESS_THAN_OR_EQUALS:
+               if(isDate)
+               {
+                  return ("is on or before")
+               }
+               if(isDateTime)
+               {
+                  return ("is at or before")
+               }
+               return ("less than or equals");
+            case QCriteriaOperator.GREATER_THAN:
+               if(isDate || isDateTime)
+               {
+                  return ("is after")
+               }
+               return ("greater than or equals");
+            case QCriteriaOperator.GREATER_THAN_OR_EQUALS:
+               if(isDate)
+               {
+                  return ("is on or after")
+               }
+               if(isDateTime)
+               {
+                  return ("is at or after")
+               }
+               return ("greater than or equals");
+            case QCriteriaOperator.IS_BLANK:
+               return ("is empty");
+            case QCriteriaOperator.IS_NOT_BLANK:
+               return ("is not empty");
+            case QCriteriaOperator.BETWEEN:
+               return ("is between");
+            case QCriteriaOperator.NOT_BETWEEN:
+               return ("is not between");
+         }
+      }
+      catch(e)
+      {
+         console.log(`Error getting operator human string for ${JSON.stringify(criteria)}: ${e}`);
+         return criteria?.operator
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static criteriaToHumanString(table: QTableMetaData, criteria: QFilterCriteria, styled = false): string | JSX.Element
+   {
+      if(criteria == null)
+      {
+         return (null);
+      }
+
+      const [field, fieldTable] = TableUtils.getFieldAndTable(table, criteria.fieldName);
+      const fieldLabel = TableUtils.getFieldFullLabel(table, criteria.fieldName);
+      const valuesString = FilterUtils.getValuesString(field, criteria);
+
+      if(styled)
+      {
+         return (
+            <Box display="inline" whiteSpace="nowrap" color="#FFFFFF" mb={"0.5rem"}>
+               <Box display="inline" p="0.125rem" pl="0.5rem" sx={{background: "#0062FF"}} borderRadius="0.5rem 0 0 0.5rem">{fieldLabel} </Box>
+               <Box display="inline" p="0.125rem" sx={{background: "#757575"}} borderRadius={valuesString ? "0" : "0 0.5rem 0.5rem 0"}> {FilterUtils.operatorToHumanString(criteria, field)} </Box>
+               {valuesString && <Box display="inline" p="0.125rem" pr="0.5rem" sx={{background: "#009971"}} borderRadius="0 0.5rem 0.5rem 0"> {valuesString}</Box>}
+               &nbsp;
+            </Box>
+         )
+      }
+      else
+      {
+         return (`${fieldLabel} ${FilterUtils.operatorToHumanString(criteria, field)} ${valuesString}`);
+      }
+   }
+
+}
+
+export default FilterUtils;

src/qqq/utils/qqq/SavedViewUtils.ts

@@ -0,0 +1,418 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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 {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
+import QQueryColumns from "qqq/models/query/QQueryColumns";
+import RecordQueryView from "qqq/models/query/RecordQueryView";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+
+/*******************************************************************************
+ ** Utility class for working with QQQ Saved Views
+ **
+ *******************************************************************************/
+export class SavedViewUtils
+{
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static fieldNameToLabel = (tableMetaData: QTableMetaData, fieldName: string): string =>
+   {
+      try
+      {
+         const [fieldMetaData, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+         if (fieldTable.name != tableMetaData.name)
+         {
+            return (fieldTable.label + ": " + fieldMetaData.label);
+         }
+
+         return (fieldMetaData.label);
+      }
+      catch (e)
+      {
+         return (fieldName);
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static diffFilters = (tableMetaData: QTableMetaData, savedView: RecordQueryView, activeView: RecordQueryView, viewDiffs: string[]): void =>
+   {
+      try
+      {
+         ////////////////////////////////////////////////////////////////////////////////
+         // inner helper function for reporting on the number of criteria for a field. //
+         // e.g., will tell us "added criteria X" or "removed 2 criteria on Y"         //
+         ////////////////////////////////////////////////////////////////////////////////
+         const diffCriteriaFunction = (base: QQueryFilter, compare: QQueryFilter, messagePrefix: string, isCheckForChanged = false) =>
+         {
+            const baseCriteriaMap: { [name: string]: QFilterCriteria[] } = {};
+            base?.criteria?.forEach((criteria) =>
+            {
+               if (validateCriteria(criteria).criteriaIsValid)
+               {
+                  if (!baseCriteriaMap[criteria.fieldName])
+                  {
+                     baseCriteriaMap[criteria.fieldName] = [];
+                  }
+                  baseCriteriaMap[criteria.fieldName].push(criteria);
+               }
+            });
+
+            const compareCriteriaMap: { [name: string]: QFilterCriteria[] } = {};
+            compare?.criteria?.forEach((criteria) =>
+            {
+               if (validateCriteria(criteria).criteriaIsValid)
+               {
+                  if (!compareCriteriaMap[criteria.fieldName])
+                  {
+                     compareCriteriaMap[criteria.fieldName] = [];
+                  }
+                  compareCriteriaMap[criteria.fieldName].push(criteria);
+               }
+            });
+
+            for (let fieldName of Object.keys(compareCriteriaMap))
+            {
+               const noBaseCriteria = baseCriteriaMap[fieldName]?.length ?? 0;
+               const noCompareCriteria = compareCriteriaMap[fieldName]?.length ?? 0;
+
+               if (isCheckForChanged)
+               {
+                  /////////////////////////////////////////////////////////////////////////////////////////////
+                  // first - if we're checking for changes to specific criteria (e.g., change id=5 to id<>5, //
+                  // or change id=5 to id=6, or change id=5 to id<>7)                                        //
+                  // our "sweet spot" is if there's a single criteria on each side of the check              //
+                  /////////////////////////////////////////////////////////////////////////////////////////////
+                  if (noBaseCriteria == 1 && noCompareCriteria == 1)
+                  {
+                     const baseCriteria = baseCriteriaMap[fieldName][0];
+                     const compareCriteria = compareCriteriaMap[fieldName][0];
+                     const baseValuesJSON = JSON.stringify(baseCriteria.values ?? []);
+                     const compareValuesJSON = JSON.stringify(compareCriteria.values ?? []);
+                     if (baseCriteria.operator != compareCriteria.operator || baseValuesJSON != compareValuesJSON)
+                     {
+                        viewDiffs.push(`Changed a filter from ${FilterUtils.criteriaToHumanString(tableMetaData, baseCriteria)} to ${FilterUtils.criteriaToHumanString(tableMetaData, compareCriteria)}`);
+                     }
+                  }
+                  else if (noBaseCriteria == noCompareCriteria)
+                  {
+                     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                     // else - if the number of criteria on this field differs, that'll get caught in a non-isCheckForChanged call, so                                     //
+                     // todo, i guess - this is kinda weak - but if there's the same number of criteria on a field, then just ... do a shitty JSON compare between them... //
+                     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                     const baseJSON = JSON.stringify(baseCriteriaMap[fieldName]);
+                     const compareJSON = JSON.stringify(compareCriteriaMap[fieldName]);
+                     if (baseJSON != compareJSON)
+                     {
+                        viewDiffs.push(`${messagePrefix} 1 or more filters on ${SavedViewUtils.fieldNameToLabel(tableMetaData, fieldName)}`);
+                     }
+                  }
+               }
+               else
+               {
+                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  // else - we're not checking for changes to individual criteria - rather - we're just checking if criteria were added or removed. //
+                  // we'll do that by starting to see if the nubmer of criteria is different.                                                       //
+                  // and, only do it in only 1 direction, assuming we'll get called twice, with the base & compare sides flipped                    //
+                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  if (noBaseCriteria < noCompareCriteria)
+                  {
+                     if (noBaseCriteria == 0 && noCompareCriteria == 1)
+                     {
+                        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                        // if the difference is 0 to 1 (1 to 0 when called in reverse), then we can report the full criteria that was added/removed //
+                        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                        viewDiffs.push(`${messagePrefix} filter: ${FilterUtils.criteriaToHumanString(tableMetaData, compareCriteriaMap[fieldName][0])}`);
+                     }
+                     else
+                     {
+                        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                        // else, say 0 to 2, or 2 to 1 - just report on how many were changed...                                                //
+                        // todo this isn't great, as you might have had, say, (A,B), and now you have (C) - but all we'll say is "removed 1"... //
+                        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                        const noDiffs = noCompareCriteria - noBaseCriteria;
+                        viewDiffs.push(`${messagePrefix} ${noDiffs} filters on ${SavedViewUtils.fieldNameToLabel(tableMetaData, fieldName)}`);
+                     }
+                  }
+               }
+            }
+         };
+
+         diffCriteriaFunction(savedView.queryFilter, activeView.queryFilter, "Added");
+         diffCriteriaFunction(activeView.queryFilter, savedView.queryFilter, "Removed");
+         diffCriteriaFunction(savedView.queryFilter, activeView.queryFilter, "Changed", true);
+
+         //////////////////////
+         // boolean operator //
+         //////////////////////
+         if (savedView.queryFilter.booleanOperator != activeView.queryFilter.booleanOperator)
+         {
+            viewDiffs.push("Changed filter from 'And' to 'Or'");
+         }
+
+         ///////////////
+         // order-bys //
+         ///////////////
+         const savedOrderBys = savedView.queryFilter.orderBys;
+         const activeOrderBys = activeView.queryFilter.orderBys;
+         if (savedOrderBys.length != activeOrderBys.length)
+         {
+            viewDiffs.push("Changed sort");
+         }
+         else if (savedOrderBys.length > 0)
+         {
+            const toWord = ((b: boolean) => b ? "ascending" : "descending");
+            if (savedOrderBys[0].fieldName != activeOrderBys[0].fieldName && savedOrderBys[0].isAscending != activeOrderBys[0].isAscending)
+            {
+               viewDiffs.push(`Changed sort from ${SavedViewUtils.fieldNameToLabel(tableMetaData, savedOrderBys[0].fieldName)} ${toWord(savedOrderBys[0].isAscending)} to ${SavedViewUtils.fieldNameToLabel(tableMetaData, activeOrderBys[0].fieldName)} ${toWord(activeOrderBys[0].isAscending)}`);
+            }
+            else if (savedOrderBys[0].fieldName != activeOrderBys[0].fieldName)
+            {
+               viewDiffs.push(`Changed sort field from ${SavedViewUtils.fieldNameToLabel(tableMetaData, savedOrderBys[0].fieldName)} to ${SavedViewUtils.fieldNameToLabel(tableMetaData, activeOrderBys[0].fieldName)}`);
+            }
+            else if (savedOrderBys[0].isAscending != activeOrderBys[0].isAscending)
+            {
+               viewDiffs.push(`Changed sort direction from ${toWord(savedOrderBys[0].isAscending)} to ${toWord(activeOrderBys[0].isAscending)}`);
+            }
+         }
+      }
+      catch (e)
+      {
+         console.log(`Error looking for differences in filters ${e}`);
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static diffColumns = (tableMetaData: QTableMetaData, savedView: RecordQueryView, activeView: RecordQueryView, viewDiffs: string[]): void =>
+   {
+      try
+      {
+         if (!savedView.queryColumns || !savedView.queryColumns.columns || savedView.queryColumns.columns.length == 0)
+         {
+            viewDiffs.push("This view did not previously have columns saved with it, so the next time you save it they will be initialized.");
+            return;
+         }
+
+         ////////////////////////////////////////////////////////////
+         // nested function to help diff visible status of columns //
+         ////////////////////////////////////////////////////////////
+         const diffVisibilityFunction = (base: QQueryColumns, compare: QQueryColumns, messagePrefix: string) =>
+         {
+            const baseColumnsMap: { [name: string]: boolean } = {};
+            base.columns.forEach((column) =>
+            {
+               if (column.isVisible)
+               {
+                  baseColumnsMap[column.name] = true;
+               }
+            });
+
+            const diffFields: string[] = [];
+            for (let i = 0; i < compare.columns.length; i++)
+            {
+               const column = compare.columns[i];
+               if (column.isVisible)
+               {
+                  if (!baseColumnsMap[column.name])
+                  {
+                     diffFields.push(SavedViewUtils.fieldNameToLabel(tableMetaData, column.name));
+                  }
+               }
+            }
+
+            if (diffFields.length > 0)
+            {
+               if (diffFields.length > 5)
+               {
+                  viewDiffs.push(`${messagePrefix} ${diffFields.length} columns.`);
+               }
+               else
+               {
+                  viewDiffs.push(`${messagePrefix} column${diffFields.length == 1 ? "" : "s"}: ${diffFields.join(", ")}`);
+               }
+            }
+         };
+
+         ///////////////////////////////////////////////////////////
+         // nested function to help diff pinned status of columns //
+         ///////////////////////////////////////////////////////////
+         const diffPinsFunction = (base: QQueryColumns, compare: QQueryColumns, messagePrefix: string) =>
+         {
+            const baseColumnsMap: { [name: string]: string } = {};
+            base.columns.forEach((column) => baseColumnsMap[column.name] = column.pinned);
+
+            const diffFields: string[] = [];
+            for (let i = 0; i < compare.columns.length; i++)
+            {
+               const column = compare.columns[i];
+               if (baseColumnsMap[column.name] != column.pinned)
+               {
+                  diffFields.push(SavedViewUtils.fieldNameToLabel(tableMetaData, column.name));
+               }
+            }
+
+            if (diffFields.length > 0)
+            {
+               if (diffFields.length > 5)
+               {
+                  viewDiffs.push(`${messagePrefix} ${diffFields.length} columns.`);
+               }
+               else
+               {
+                  viewDiffs.push(`${messagePrefix} column${diffFields.length == 1 ? "" : "s"}: ${diffFields.join(", ")}`);
+               }
+            }
+         };
+
+         ///////////////////////////////////////////////////
+         // nested function to help diff width of columns //
+         ///////////////////////////////////////////////////
+         const diffWidthsFunction = (base: QQueryColumns, compare: QQueryColumns, messagePrefix: string) =>
+         {
+            const baseColumnsMap: { [name: string]: number } = {};
+            base.columns.forEach((column) => baseColumnsMap[column.name] = column.width);
+
+            const diffFields: string[] = [];
+            for (let i = 0; i < compare.columns.length; i++)
+            {
+               const column = compare.columns[i];
+               if (baseColumnsMap[column.name] != column.width)
+               {
+                  diffFields.push(SavedViewUtils.fieldNameToLabel(tableMetaData, column.name));
+               }
+            }
+
+            if (diffFields.length > 0)
+            {
+               if (diffFields.length > 5)
+               {
+                  viewDiffs.push(`${messagePrefix} ${diffFields.length} columns.`);
+               }
+               else
+               {
+                  viewDiffs.push(`${messagePrefix} column${diffFields.length == 1 ? "" : "s"}: ${diffFields.join(", ")}`);
+               }
+            }
+         };
+
+         diffVisibilityFunction(savedView.queryColumns, activeView.queryColumns, "Turned on ");
+         diffVisibilityFunction(activeView.queryColumns, savedView.queryColumns, "Turned off ");
+         diffPinsFunction(savedView.queryColumns, activeView.queryColumns, "Changed pinned state for ");
+
+         if (savedView.queryColumns.columns.map(c => c.name).join(",") != activeView.queryColumns.columns.map(c => c.name).join(","))
+         {
+            viewDiffs.push("Changed the order of columns.");
+         }
+
+         diffWidthsFunction(savedView.queryColumns, activeView.queryColumns, "Changed width for ");
+      }
+      catch (e)
+      {
+         console.log(`Error looking for differences in columns: ${e}`);
+      }
+   };
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static diffQuickFilterFieldNames = (tableMetaData: QTableMetaData, savedView: RecordQueryView, activeView: RecordQueryView, viewDiffs: string[]): void =>
+   {
+      try
+      {
+         const diffFunction = (base: string[], compare: string[], messagePrefix: string) =>
+         {
+            const baseFieldNameMap: { [name: string]: boolean } = {};
+            base.forEach((name) => baseFieldNameMap[name] = true);
+            const diffFields: string[] = [];
+            for (let i = 0; i < compare.length; i++)
+            {
+               const name = compare[i];
+               if (!baseFieldNameMap[name])
+               {
+                  diffFields.push(SavedViewUtils.fieldNameToLabel(tableMetaData, name));
+               }
+            }
+
+            if (diffFields.length > 0)
+            {
+               viewDiffs.push(`${messagePrefix} basic filter${diffFields.length == 1 ? "" : "s"}: ${diffFields.join(", ")}`);
+            }
+         };
+
+         diffFunction(savedView.quickFilterFieldNames, activeView.quickFilterFieldNames, "Turned on");
+         diffFunction(activeView.quickFilterFieldNames, savedView.quickFilterFieldNames, "Turned off");
+      }
+      catch (e)
+      {
+         console.log(`Error looking for differences in quick filter field names: ${e}`);
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static diffViews = (tableMetaData: QTableMetaData, baseView: RecordQueryView, activeView: RecordQueryView): string[] =>
+   {
+      const viewDiffs: string[] = [];
+
+      SavedViewUtils.diffFilters(tableMetaData, baseView, activeView, viewDiffs);
+      SavedViewUtils.diffColumns(tableMetaData, baseView, activeView, viewDiffs);
+      SavedViewUtils.diffQuickFilterFieldNames(tableMetaData, baseView, activeView, viewDiffs);
+
+      if (baseView.mode != activeView.mode)
+      {
+         if (baseView.mode)
+         {
+            viewDiffs.push(`Mode changed from ${baseView.mode} to ${activeView.mode}`);
+         }
+         else
+         {
+            viewDiffs.push(`Mode set to ${activeView.mode}`);
+         }
+      }
+
+      if (baseView.rowsPerPage != activeView.rowsPerPage)
+      {
+         if (baseView.rowsPerPage)
+         {
+            viewDiffs.push(`Rows per page changed from ${baseView.rowsPerPage} to ${activeView.rowsPerPage}`);
+         }
+         else
+         {
+            viewDiffs.push(`Rows per page set to ${activeView.rowsPerPage}`);
+         }
+      }
+      return viewDiffs;
+   };
+
+}

src/qqq/utils/qqq/TableUtils.ts

@@ -93,6 +93,11 @@ class TableUtils
     *******************************************************************************/
    public static getFieldAndTable(tableMetaData: QTableMetaData, fieldName: string): [QFieldMetaData, QTableMetaData]
    {
+      if(fieldName == null || tableMetaData == null)
+      {
+         return ([null, null]);
+      }
+
       if (fieldName.indexOf(".") > -1)
       {
          const nameParts = fieldName.split(".", 2);
@@ -110,9 +115,34 @@ class TableUtils
          return ([tableMetaData.fields.get(fieldName), tableMetaData]);
       }
 
-      return (null);
+      return ([null, null]);
    }
 
+
+   /*******************************************************************************
+    ** for a field that might be from a join table, get its label - either the field's
+    ** label, if it's from "this" table - or the table's label: field's label, if it's
+    ** from a join table.
+    *******************************************************************************/
+   public static getFieldFullLabel(tableMetaData: QTableMetaData, fieldName: string): string
+   {
+      try
+      {
+         const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+         if (fieldTable.name == tableMetaData.name)
+         {
+            return (field.label);
+         }
+         return `${fieldTable.label}: ${field.label}`;
+      }
+      catch (e)
+      {
+         console.log(`Error getting full field label for ${fieldName} in table ${tableMetaData?.name}: ${e}`);
+         return fieldName
+      }
+   }
+
+
    /*******************************************************************************
     **
     *******************************************************************************/

src/qqq/utils/qqq/ValueUtils.tsx

@@ -462,6 +462,19 @@ class ValueUtils
 
       return (String(param).replaceAll(/"/g, "\"\""));
    }
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static safeToLocaleString(n: Number): string
+   {
+      if (n != null && n != undefined)
+      {
+         return (n.toLocaleString());
+      }
+      return ("");
+   }
+
 }
 
 ////////////////////////////////////////////////////////////////////////////////////////////////

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/junit/BaseTest.java

@@ -0,0 +1,75 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.junit;
+
+
+import com.kingsrook.qqq.backend.core.context.QContext;
+import com.kingsrook.qqq.backend.core.logging.QLogger;
+import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
+import com.kingsrook.qqq.backend.core.model.session.QSession;
+import org.junit.jupiter.api.AfterEach;
+import org.junit.jupiter.api.BeforeEach;
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+public class BaseTest
+{
+   private static final QLogger LOG = QLogger.getLogger(BaseTest.class);
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @BeforeEach
+   void baseBeforeEach()
+   {
+      QContext.init(TestUtils.defineInstance(), new QSession());
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @AfterEach
+   void baseAfterEach()
+   {
+      QContext.clear();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   protected static void reInitInstanceInContext(QInstance qInstance)
+   {
+      if(qInstance.equals(QContext.getQInstance()))
+      {
+         LOG.warn("Unexpected condition - the same qInstance that is already in the QContext was passed into reInit.  You probably want a new QInstance object instance.");
+      }
+      QContext.init(qInstance, new QSession());
+   }
+}

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/junit/TestUtils.java

@@ -0,0 +1,101 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.junit;
+
+
+import com.kingsrook.qqq.backend.core.model.metadata.QAuthenticationType;
+import com.kingsrook.qqq.backend.core.model.metadata.QBackendMetaData;
+import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
+import com.kingsrook.qqq.backend.core.model.metadata.authentication.QAuthenticationMetaData;
+import com.kingsrook.qqq.backend.core.model.metadata.fields.QFieldMetaData;
+import com.kingsrook.qqq.backend.core.model.metadata.fields.QFieldType;
+import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+public class TestUtils
+{
+   public static final String DEFAULT_BACKEND_NAME = "memoryBackend";
+   public static final String TABLE_NAME_PERSON    = "person";
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static QInstance defineInstance()
+   {
+      QInstance qInstance = new QInstance();
+      qInstance.addBackend(defineBackend());
+      qInstance.addTable(defineTablePerson());
+      qInstance.setAuthentication(defineAuthentication());
+      return (qInstance);
+   }
+
+
+
+   /*******************************************************************************
+    ** Define the authentication used in standard tests - using 'mock' type.
+    **
+    *******************************************************************************/
+   public static QAuthenticationMetaData defineAuthentication()
+   {
+      return new QAuthenticationMetaData()
+         .withName("mock")
+         .withType(QAuthenticationType.MOCK);
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static QBackendMetaData defineBackend()
+   {
+      return (new QBackendMetaData()
+         .withName(DEFAULT_BACKEND_NAME)
+         .withBackendType("memory"));
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private static QTableMetaData defineTablePerson()
+   {
+      return new QTableMetaData()
+         .withName(TABLE_NAME_PERSON)
+         .withLabel("Person")
+         .withBackendName(DEFAULT_BACKEND_NAME)
+         .withPrimaryKeyField("id")
+         .withField(new QFieldMetaData("id", QFieldType.INTEGER).withIsEditable(false))
+         .withField(new QFieldMetaData("createDate", QFieldType.DATE_TIME).withIsEditable(false))
+         .withField(new QFieldMetaData("modifyDate", QFieldType.DATE_TIME).withIsEditable(false))
+         .withField(new QFieldMetaData("firstName", QFieldType.STRING))
+         .withField(new QFieldMetaData("lastName", QFieldType.STRING))
+         .withField(new QFieldMetaData("birthDate", QFieldType.DATE))
+         .withField(new QFieldMetaData("email", QFieldType.STRING));
+   }
+}

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardTableMetaDataTest.java

@@ -0,0 +1,178 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
+
+
+import java.util.List;
+import java.util.function.Consumer;
+import com.kingsrook.qqq.backend.core.exceptions.QInstanceValidationException;
+import com.kingsrook.qqq.backend.core.instances.QInstanceValidator;
+import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
+import com.kingsrook.qqq.frontend.materialdashboard.junit.BaseTest;
+import com.kingsrook.qqq.frontend.materialdashboard.junit.TestUtils;
+import org.junit.jupiter.api.Test;
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNotNull;
+import static org.junit.jupiter.api.Assertions.fail;
+
+
+/*******************************************************************************
+ ** Unit test for MaterialDashboardTableMetaData 
+ *******************************************************************************/
+class MaterialDashboardTableMetaDataTest extends BaseTest
+{
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Test
+   void testValidateGoToFieldNames()
+   {
+      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withGotoFieldNames(List.of(List.of()))),
+         "empty gotoFieldNames list");
+
+      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withGotoFieldNames(List.of(List.of("foo")))),
+         "unrecognized field name: foo");
+
+      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withGotoFieldNames(List.of(List.of("foo"), List.of("bar", "baz")))),
+         "unrecognized field name: foo",
+         "unrecognized field name: bar",
+         "unrecognized field name: baz");
+
+      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withGotoFieldNames(List.of(List.of("firstName", "firstName")))),
+         "duplicated field name: firstName");
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Test
+   void testValidateQuickFilterFieldNames()
+   {
+      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withDefaultQuickFilterFieldNames(List.of("foo"))),
+         "unrecognized field name: foo");
+
+      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withDefaultQuickFilterFieldNames(List.of("firstName", "lastName", "firstName"))),
+         "duplicated field name: firstName");
+
+   }
+
+   //////////////////////////////////////////////////////////////////////////
+   // todo - methods below here were copied from QInstanceValidatorTest... //
+   // how to share those...                                                //
+   //////////////////////////////////////////////////////////////////////////
+
+
+
+   /*******************************************************************************
+    ** Run a little setup code on a qInstance; then validate it, and assert that it
+    ** failed validation with reasons that match the supplied vararg-reasons (but allow
+    ** more reasons - e.g., helpful when one thing we're testing causes other errors).
+    *******************************************************************************/
+   private void assertValidationFailureReasonsAllowingExtraReasons(Consumer<QInstance> setup, String... reasons)
+   {
+      assertValidationFailureReasons(setup, true, reasons);
+   }
+
+
+
+   /*******************************************************************************
+    ** Run a little setup code on a qInstance; then validate it, and assert that it
+    ** failed validation with reasons that match the supplied vararg-reasons (and
+    ** require that exact # of reasons).
+    *******************************************************************************/
+   private void assertValidationFailureReasons(Consumer<QInstance> setup, String... reasons)
+   {
+      assertValidationFailureReasons(setup, false, reasons);
+   }
+
+
+
+   /*******************************************************************************
+    ** Implementation for the overloads of this name.
+    *******************************************************************************/
+   private void assertValidationFailureReasons(Consumer<QInstance> setup, boolean allowExtraReasons, String... reasons)
+   {
+      try
+      {
+         QInstance qInstance = TestUtils.defineInstance();
+         setup.accept(qInstance);
+         new QInstanceValidator().validate(qInstance);
+         fail("Should have thrown validationException");
+      }
+      catch(QInstanceValidationException e)
+      {
+         if(!allowExtraReasons)
+         {
+            int noOfReasons = e.getReasons() == null ? 0 : e.getReasons().size();
+            assertEquals(reasons.length, noOfReasons, "Expected number of validation failure reasons.\nExpected reasons: " + String.join(",", reasons)
+               + "\nActual reasons: " + (noOfReasons > 0 ? String.join("\n", e.getReasons()) : "--"));
+         }
+
+         for(String reason : reasons)
+         {
+            assertReason(reason, e);
+         }
+      }
+   }
+
+
+
+   /*******************************************************************************
+    ** Assert that an instance is valid!
+    *******************************************************************************/
+   private void assertValidationSuccess(Consumer<QInstance> setup)
+   {
+      try
+      {
+         QInstance qInstance = TestUtils.defineInstance();
+         setup.accept(qInstance);
+         new QInstanceValidator().validate(qInstance);
+      }
+      catch(QInstanceValidationException e)
+      {
+         fail("Expected no validation errors, but received: " + e.getMessage());
+      }
+   }
+
+
+
+   /*******************************************************************************
+    ** utility method for asserting that a specific reason string is found within
+    ** the list of reasons in the QInstanceValidationException.
+    **
+    *******************************************************************************/
+   private void assertReason(String reason, QInstanceValidationException e)
+   {
+      assertNotNull(e.getReasons(), "Expected there to be a reason for the failure (but there was not)");
+      assertThat(e.getReasons())
+         .withFailMessage("Expected any of:\n%s\nTo match: [%s]", e.getReasons(), reason)
+         .anyMatch(s -> s.contains(reason));
+   }
+
+   /////////////////////////////////////////////////////////////////
+   // todo - end of methods copied from QInstanceValidatorTest... //
+   /////////////////////////////////////////////////////////////////
+}

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QBaseSeleniumTest.java

@@ -1,7 +1,33 @@
-package com.kingsrook.qqq.materialdashboard.lib;
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
 
 
-import com.kingsrook.qqq.materialdashboard.lib.javalin.QSeleniumJavalin;
+import java.io.File;
+import java.util.Arrays;
+import java.util.HashMap;
+import java.util.List;
+import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
 import io.github.bonigarcia.wdm.WebDriverManager;
 import org.junit.jupiter.api.AfterEach;
 import org.junit.jupiter.api.BeforeAll;
@@ -11,6 +37,7 @@ import org.openqa.selenium.Dimension;
 import org.openqa.selenium.WebDriver;
 import org.openqa.selenium.chrome.ChromeDriver;
 import org.openqa.selenium.chrome.ChromeOptions;
+import static org.junit.jupiter.api.Assertions.fail;
 
 
 /*******************************************************************************
@@ -40,7 +67,7 @@ public class QBaseSeleniumTest
       String headless = System.getenv("QQQ_SELENIUM_HEADLESS");
       if("true".equals(headless))
       {
-         chromeOptions.setHeadless(true);
+         chromeOptions.addArguments("--headless=new");
       }
 
       WebDriverManager.chromiumdriver().setup();
@@ -54,7 +81,15 @@ public class QBaseSeleniumTest
    @BeforeEach
    public void beforeEach()
    {
+      manageDownloadsDirectory();
+
+      HashMap<String, Object> chromePrefs = new HashMap<>();
+      chromePrefs.put("profile.default_content_settings.popups", 0);
+      chromePrefs.put("download.default_directory", getDownloadsDirectory());
+      chromeOptions.setExperimentalOption("prefs", chromePrefs);
+
       driver = new ChromeDriver(chromeOptions);
+
       driver.manage().window().setSize(new Dimension(1700, 1300));
       qSeleniumLib = new QSeleniumLib(driver);
 
@@ -68,6 +103,57 @@ public class QBaseSeleniumTest
 
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private void manageDownloadsDirectory()
+   {
+      File downloadsDirectory = new File(getDownloadsDirectory());
+      if(!downloadsDirectory.exists())
+      {
+         if(!downloadsDirectory.mkdir())
+         {
+            fail("Could not create downloads directory: " + downloadsDirectory);
+         }
+      }
+
+      if(!downloadsDirectory.isDirectory())
+      {
+         fail("Downloads directory: " + downloadsDirectory + " is not a directory.");
+      }
+
+      for(File file : CollectionUtils.nonNullArray(downloadsDirectory.listFiles()))
+      {
+         if(!file.delete())
+         {
+            fail("Could not remove a file from the downloads directory: " + file.getAbsolutePath());
+         }
+      }
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   protected String getDownloadsDirectory()
+   {
+      return ("/tmp/selenium-downloads");
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   protected List<File> getDownloadedFiles()
+   {
+      File[] downloadedFiles = CollectionUtils.nonNullArray((new File(getDownloadsDirectory())).listFiles());
+      return (Arrays.stream(downloadedFiles).toList());
+   }
+
+
+
    /*******************************************************************************
     ** control if the test needs to start its own javalin server, or if we're running
     ** in an environment where an external web server is being used.
@@ -91,7 +177,7 @@ public class QBaseSeleniumTest
          .withRouteToFile("/metaData/table/city", "metaData/table/person.json")
          .withRouteToFile("/metaData/table/script", "metaData/table/script.json")
          .withRouteToFile("/metaData/table/scriptRevision", "metaData/table/scriptRevision.json")
-         .withRouteToFile("/processes/querySavedFilter/init", "processes/querySavedFilter/init.json");
+         .withRouteToFile("/processes/querySavedView/init", "processes/querySavedView/init.json");
    }
 
 

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QQQMaterialDashboardSelectors.java

@@ -0,0 +1,35 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
+
+
+/*******************************************************************************
+ ** constants to define css selectors for common QQQ material dashboard elements.
+ *******************************************************************************/
+public interface QQQMaterialDashboardSelectors
+{
+   String SIDEBAR_ITEM      = ".MuiDrawer-paperAnchorDockedLeft li.MuiListItem-root";
+   String BREADCRUMB_HEADER = "h3";
+
+   String QUERY_GRID_CELL    = ".MuiDataGrid-root .MuiDataGrid-cellContent";
+   String QUERY_FILTER_INPUT = ".customFilterPanel input.MuiInput-input";
+}

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QSeleniumLib.java

@@ -1,4 +1,25 @@
-package com.kingsrook.qqq.materialdashboard.lib;
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  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/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
 
 
 import java.io.File;
@@ -6,11 +27,16 @@ import java.time.Duration;
 import java.util.List;
 import java.util.Objects;
 import java.util.Set;
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.TimeUnit;
+import java.util.function.Function;
+import com.kingsrook.qqq.backend.core.utils.SleepUtils;
 import org.apache.commons.io.FileUtils;
 import org.apache.logging.log4j.LogManager;
 import org.apache.logging.log4j.Logger;
 import org.openqa.selenium.By;
 import org.openqa.selenium.JavascriptExecutor;
+import org.openqa.selenium.NoSuchElementException;
 import org.openqa.selenium.OutputType;
 import org.openqa.selenium.StaleElementReferenceException;
 import org.openqa.selenium.WebDriver;
@@ -18,7 +44,7 @@ import org.openqa.selenium.WebElement;
 import org.openqa.selenium.interactions.Actions;
 import org.openqa.selenium.support.ui.ExpectedConditions;
 import org.openqa.selenium.support.ui.WebDriverWait;
-import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.assertj.core.api.Assertions.assertThat;
 import static org.junit.jupiter.api.Assertions.fail;
 
 
@@ -36,6 +62,13 @@ public class QSeleniumLib
    private boolean SCREENSHOTS_ENABLED = true;
    private String  SCREENSHOTS_PATH    = "/tmp/QSeleniumScreenshots/";
 
+   private boolean autoHighlight = false;
+
+   //////////////////////////////////////////////////////////////////////////////////////
+   // useful to use on a WebElement, in a call like: .findElement(QSeleniumLib.PARENT) //
+   //////////////////////////////////////////////////////////////////////////////////////
+   public static final By PARENT = By.xpath("./..");
+
 
 
    /*******************************************************************************
@@ -169,7 +202,7 @@ public class QSeleniumLib
    /*******************************************************************************
     **
     *******************************************************************************/
-   public void gotoAndWaitForBreadcrumbHeader(String path, String headerText)
+   public void gotoAndWaitForBreadcrumbHeaderToContain(String path, String expectedHeaderText)
    {
       driver.get(BASE_URL + path);
 
@@ -177,7 +210,27 @@ public class QSeleniumLib
          .until(ExpectedConditions.presenceOfElementLocated(By.cssSelector(QQQMaterialDashboardSelectors.BREADCRUMB_HEADER)));
 
       LOG.debug("Navigated to [" + path + "].  Breadcrumb Header: " + header.getText());
-      assertEquals(headerText, header.getText());
+      assertThat(header.getText()).contains(expectedHeaderText);
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void clickBackdrop()
+   {
+      for(WebElement webElement : this.waitForSelectorAll(".MuiBackdrop-root", 0))
+      {
+         try
+         {
+            webElement.click();
+         }
+         catch(Exception e)
+         {
+            // ignore.
+         }
+      }
    }
 
 
@@ -187,7 +240,25 @@ public class QSeleniumLib
     *******************************************************************************/
    public WebElement waitForSelector(String cssSelector)
    {
-      return (waitForSelectorAll(cssSelector, 1).get(0));
+      WebElement element = waitForSelectorAll(cssSelector, 1).get(0);
+
+      Actions actions = new Actions(driver);
+      actions.moveToElement(element);
+
+      conditionallyAutoHighlight(element);
+      return element;
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void moveMouseCursorToElement(WebElement element)
+   {
+      Actions actions = new Actions(driver);
+      actions.moveToElement(element);
+      actions.perform();
    }
 
 
@@ -230,7 +301,7 @@ public class QSeleniumLib
       do
       {
          List<WebElement> elements = driver.findElements(By.cssSelector(cssSelector));
-         if(elements.size() == 0)
+         if(elements.isEmpty())
          {
             LOG.debug("Found non-existence of element(s) matching selector [" + cssSelector + "]");
             return;
@@ -256,7 +327,7 @@ public class QSeleniumLib
       do
       {
          List<WebElement> elements = driver.findElements(By.cssSelector(cssSelector));
-         if(elements.size() == 0)
+         if(elements.isEmpty())
          {
             LOG.debug("Found non-existence of element(s) matching selector [" + cssSelector + "]");
             return;
@@ -330,6 +401,22 @@ public class QSeleniumLib
 
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private void soonUnhighlightElement(WebElement element)
+   {
+      CompletableFuture.supplyAsync(() ->
+      {
+         SleepUtils.sleep(2, TimeUnit.SECONDS);
+         JavascriptExecutor js = (JavascriptExecutor) driver;
+         js.executeScript("arguments[0].setAttribute('style', 'background: unset; border: unset;');", element);
+         return (true);
+      });
+   }
+
+
+
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -380,7 +467,10 @@ public class QSeleniumLib
    @FunctionalInterface
    public interface Code<T>
    {
-      public T run();
+      /*******************************************************************************
+       **
+       *******************************************************************************/
+      T run();
    }
 
 
@@ -415,7 +505,33 @@ public class QSeleniumLib
     *******************************************************************************/
    public WebElement waitForSelectorContaining(String cssSelector, String textContains)
    {
-      LOG.debug("Waiting for element matching selector [" + cssSelector + "] containing text [" + textContains + "].");
+      return (waitForSelectorMatchingPredicate(cssSelector, "containing text [" + textContains + "]", (WebElement element) ->
+      {
+         return (element.getText() != null && element.getText().toLowerCase().contains(textContains.toLowerCase()));
+      }));
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public WebElement waitForSelectorContainingTextMatchingRegex(String cssSelector, String regExp)
+   {
+      return (waitForSelectorMatchingPredicate(cssSelector, "matching regexp [" + regExp + "]", (WebElement element) ->
+      {
+         return (element.getText() != null && element.getText().matches(regExp));
+      }));
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private WebElement waitForSelectorMatchingPredicate(String cssSelector, String description, Function<WebElement, Boolean> predicate)
+   {
+      LOG.debug("Waiting for element matching selector [" + cssSelector + "] " + description);
       long start = System.currentTimeMillis();
 
       do
@@ -425,11 +541,12 @@ public class QSeleniumLib
          {
             try
             {
-               if(element.getText() != null && element.getText().toLowerCase().contains(textContains.toLowerCase()))
+               if(predicate.apply(element))
                {
-                  LOG.debug("Found element matching selector [" + cssSelector + "] containing text [" + textContains + "].");
+                  LOG.debug("Found element matching selector [" + cssSelector + "] " + description);
                   Actions actions = new Actions(driver);
                   actions.moveToElement(element);
+                  conditionallyAutoHighlight(element);
                   return (element);
                }
             }
@@ -437,18 +554,36 @@ public class QSeleniumLib
             {
                LOG.debug("Caught a StaleElementReferenceException - will retry.");
             }
+            catch(NoSuchElementException nsee)
+            {
+               LOG.debug("Caught a NoSuchElementException - will retry.");
+            }
          }
 
          sleepABit();
       }
       while(start + (1000 * WAIT_SECONDS) > System.currentTimeMillis());
 
-      fail("Failed to find element matching selector [" + cssSelector + "] containing text [" + textContains + "] after [" + WAIT_SECONDS + "] seconds.");
+      fail("Failed to find element matching selector [" + cssSelector + "] " + description + " after [" + WAIT_SECONDS + "] seconds.");
       return (null);
    }
 
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private void conditionallyAutoHighlight(WebElement element)
+   {
+      if(autoHighlight && System.getenv("CIRCLECI") == null)
+      {
+         highlightElement(element);
+         soonUnhighlightElement(element);
+      }
+   }
+
+
+
    /*******************************************************************************
     ** Take a screenshot, putting it in the SCREENSHOTS_PATH, with a subdirectory
     ** for the test class simple name, filename = methodName.png.
@@ -478,7 +613,8 @@ public class QSeleniumLib
             destFile.mkdirs();
             if(destFile.exists())
             {
-               destFile.delete();
+               String newFileName = destFile.getAbsolutePath().replaceFirst("\\.png", "-" + System.currentTimeMillis() + ".png");
+               destFile.renameTo(new File(newFileName));
             }
             FileUtils.moveFile(outputFile, destFile);
             LOG.info("Made screenshot at: " + destFile);
@@ -555,4 +691,48 @@ public class QSeleniumLib
       }
    }
 
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public String getLatestChromeDownloadedFileInfo()
+   {
+      driver.get("chrome://downloads/");
+      JavascriptExecutor js      = (JavascriptExecutor) driver;
+      WebElement         element = (WebElement) js.executeScript("return document.querySelector('downloads-manager').shadowRoot.querySelector('#mainContainer > iron-list > downloads-item').shadowRoot.querySelector('#content')");
+      return (element.getText());
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for autoHighlight
+    *******************************************************************************/
+   public boolean getAutoHighlight()
+   {
+      return (this.autoHighlight);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for autoHighlight
+    *******************************************************************************/
+   public void setAutoHighlight(boolean autoHighlight)
+   {
+      this.autoHighlight = autoHighlight;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for autoHighlight
+    *******************************************************************************/
+   public QSeleniumLib withAutoHighlight(boolean autoHighlight)
+   {
+      this.autoHighlight = autoHighlight;
+      return (this);
+   }
+
 }