Turn off postReleaseGoals=install in gitflow-maven-plugin

Feature/ce 1555 ops overview fix accordion

.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:
@@ -115,7 +115,7 @@ workflows:
           context: [ qqq-maven-registry-credentials, kingsrook-slack, build-qqq-sample-app ]
           filters:
             branches:
-              ignore: /main/
+              ignore: /(main|dev|integration.*)/
             tags:
               ignore: /(version|snapshot)-.*/
   deploy:
@@ -124,7 +124,7 @@ workflows:
           context: [ qqq-maven-registry-credentials, kingsrook-slack, build-qqq-sample-app ]
           filters:
             branches:
-              only: /main/
+              only: /(main|dev|integration.*)/
             tags:
               only: /(version|snapshot)-.*/
 

.eslintrc.json

@@ -28,8 +28,7 @@
    },
    "plugins": [
       "react",
-      "@typescript-eslint",
-      "import"
+      "@typescript-eslint"
    ],
    "rules": {
       "brace-style": [
@@ -43,41 +42,6 @@
             "SwitchCase": 1
          }
       ],
-      "import/extensions": [
-         "error",
-         "ignorePackages",
-         {
-            "ts": "never",
-            "tsx": "never",
-            "js": "never"
-         }
-      ],
-      "import/no-extraneous-dependencies": [
-         "error",
-         {
-            "devDependencies": true
-         }
-      ],
-      "import/order": [
-         "error",
-         {
-            "groups": [
-               "builtin", // Built-in imports (come from NodeJS native) go first
-               "external", // <- External imports
-               "internal", // <- Absolute imports
-               ["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
-               "index", // <- index imports
-               "unknown"
-            ],
-            "newlines-between": "never",
-            "alphabetize": {
-               /* sort in ascending order. Options: ["ignore", "asc", "desc"] */
-               "order": "asc",
-               /* ignore case. Options: [true, false] */
-               "caseInsensitive": true
-            }
-         }
-      ],
       "jsx-one-expression-per-line": "off",
       "max-len": "off",
       "no-console": "off",
@@ -114,15 +78,6 @@
       "quotes": [
          "error",
          "double"
-      ],
-      "sort-imports": [
-         "error",
-         {
-            "ignoreCase": false,
-            "ignoreDeclarationSort": true,
-            "ignoreMemberSort": true,
-            "allowSeparatedGroups": false
-         }
       ]
    },
    "settings": {

cypress.config.ts

@@ -1,12 +0,0 @@
-import {defineConfig} from "cypress";
-
-export default defineConfig({
-   e2e: {
-      viewportHeight: 1000,
-      viewportWidth: 1200,
-      setupNodeEvents(on, config)
-      {
-      // implement node event listeners here
-      },
-   },
-});

package.json

@@ -6,13 +6,14 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.83",
+      "@kingsrook/qqq-frontend-core": "1.0.104",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",
       "@mui/system": "5.11.1",
       "@mui/x-data-grid": "5.17.23",
       "@mui/x-data-grid-pro": "5.17.23",
+      "@mui/x-date-pickers": "7.1.1",
       "@mui/x-license-pro": "5.12.3",
       "@react-jvectormap/core": "1.0.1",
       "@react-jvectormap/unitedstates": "1.0.1",
@@ -26,6 +27,7 @@
       "chroma-js": "2.4.2",
       "cmdk": "0.2.0",
       "datejs": "1.0.0-rc3",
+      "dayjs": "1.11.10",
       "downshift": "3.2.10",
       "faker": "5.5.3",
       "form-data": "4.0.0",
@@ -39,9 +41,13 @@
       "react-ace": "10.1.0",
       "react-chartjs-2": "3.0.4",
       "react-cookie": "4.1.1",
+      "react-dnd": "16.0.1",
+      "react-dnd-html5-backend": "16.0.1",
       "react-dom": "18.0.0",
+      "react-ga4": "2.1.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",
@@ -53,7 +59,7 @@
       "build": "react-scripts build",
       "clean": "rm -rf node_modules package-lock.json lib",
       "eject": "react-scripts eject",
-      "clean-and-install": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf lib/ && npm install --legacy-peer-deps",
+      "clean-and-install": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf lib/ && npm install --legacy-peer-deps && npm dedupe --force",
       "npm-install": "npm install --legacy-peer-deps",
       "prepublishOnly": "tsc -p ./ --outDir lib/",
       "start": "BROWSER=none react-scripts --max-http-header-size=65535 start",

pom.xml

@@ -29,7 +29,7 @@
    <packaging>jar</packaging>
 
    <properties>
-      <revision>0.20.0-SNAPSHOT</revision>
+      <revision>0.21.0</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>0.21.0</version>
       </dependency>
       <dependency>
          <groupId>org.slf4j</groupId>
@@ -83,7 +83,7 @@
       <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>
@@ -154,11 +154,11 @@
                   <versionTagPrefix>version-</versionTagPrefix>
                </gitFlowConfig>
                <skipFeatureVersion>true</skipFeatureVersion> <!-- Keep feature names out of versions -->
-               <postReleaseGoals>install</postReleaseGoals>  <!-- Let CI run deploys -->
                <commitDevelopmentVersionAtStart>true</commitDevelopmentVersionAtStart>
                <versionDigitToIncrement>1</versionDigitToIncrement> <!-- In general, we update the minor -->
                <versionProperty>revision</versionProperty>
                <skipUpdateVersion>true</skipUpdateVersion>
+               <skipTestProject>true</skipTestProject> <!-- we allow CI to do the tests -->
             </configuration>
          </plugin>
 

src/App.tsx

@@ -33,12 +33,8 @@ import CssBaseline from "@mui/material/CssBaseline";
 import Icon from "@mui/material/Icon";
 import {ThemeProvider} from "@mui/material/styles";
 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 {Md5} from "ts-md5/dist/md5";
 import CommandMenu from "CommandMenu";
+import jwt_decode from "jwt-decode";
 import QContext from "QContext";
 import Sidenav from "qqq/components/horseshoe/sidenav/SideNav";
 import theme from "qqq/components/legacy/Theme";
@@ -53,8 +49,14 @@ import EntityEdit from "qqq/pages/records/edit/RecordEdit";
 import RecordQuery from "qqq/pages/records/query/RecordQuery";
 import RecordDeveloperView from "qqq/pages/records/view/RecordDeveloperView";
 import RecordView from "qqq/pages/records/view/RecordView";
+import RecordViewByUniqueKey from "qqq/pages/records/view/RecordViewByUniqueKey";
+import GoogleAnalyticsUtils, {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils";
 import Client from "qqq/utils/qqq/Client";
 import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
+import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
+import {useCookies} from "react-cookie";
+import {Navigate, Route, Routes, useLocation, useSearchParams,} from "react-router-dom";
+import {Md5} from "ts-md5/dist/md5";
 
 
 const qController = Client.getInstance();
@@ -79,7 +81,7 @@ export default function App()
    Client.setUnauthorizedCallback(() =>
    {
       logout();
-   })
+   });
 
    const shouldStoreNewToken = (newToken: string, oldToken: string): boolean =>
    {
@@ -104,7 +106,7 @@ export default function App()
          // if the old (local storage) token is expired, then we need to store the new one //
          ////////////////////////////////////////////////////////////////////////////////////
          const oldExp = oldJSON["exp"];
-         if(oldExp * 1000 < (new Date().getTime()))
+         if (oldExp * 1000 < (new Date().getTime()))
          {
             console.log("Access token in local storage was expired - so we should store a new one.");
             return (true);
@@ -114,21 +116,21 @@ export default function App()
          // remove the exp & iat values from what we compare - as they are always different from auth0 //
          // note, this is only deleting them from what we compare, not from what we'd store.           //
          ////////////////////////////////////////////////////////////////////////////////////////////////
-         delete newJSON["exp"]
-         delete newJSON["iat"]
-         delete oldJSON["exp"]
-         delete oldJSON["iat"]
+         delete newJSON["exp"];
+         delete newJSON["iat"];
+         delete oldJSON["exp"];
+         delete oldJSON["iat"];
 
          const different = JSON.stringify(newJSON) !== JSON.stringify(oldJSON);
-         if(different)
+         if (different)
          {
             console.log("Latest access token from auth0 has changed vs localStorage - so we should store a new one.");
          }
          return (different);
       }
-      catch(e)
+      catch (e)
       {
-         console.log("Caught in shouldStoreNewToken: " + e)
+         console.log("Caught in shouldStoreNewToken: " + e);
       }
 
       return (true);
@@ -160,7 +162,7 @@ export default function App()
                if (shouldStoreNewToken(accessToken, lsAccessToken))
                {
                   console.log("Sending accessToken to backend, requesting a sessionUUID...");
-                  const newSessionUuid = await qController.manageSession(accessToken, null);
+                  const {uuid: newSessionUuid, values} = await qController.manageSession(accessToken, null);
 
                   /////////////////////////////////////////////////////////////////////////////////////////////////////////////
                   // the request to the backend should send a header to set the cookie, so we don't need to do it ourselves. //
@@ -168,6 +170,7 @@ export default function App()
                   // setCookie(SESSION_UUID_COOKIE_NAME, newSessionUuid, {path: "/"});
 
                   localStorage.setItem("accessToken", accessToken);
+                  localStorage.setItem("sessionValues", JSON.stringify(values));
                   console.log("Got new sessionUUID from backend, and stored new accessToken");
                }
                else
@@ -185,7 +188,7 @@ export default function App()
             {
                console.log(`Error loading token: ${JSON.stringify(e)}`);
                qController.clearAuthenticationMetaDataLocalStorage();
-               localStorage.removeItem("accessToken")
+               localStorage.removeItem("accessToken");
                removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
                logout();
                return;
@@ -226,6 +229,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([]);
@@ -354,7 +358,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} />,
                });
 
@@ -389,6 +393,13 @@ export default function App()
                   component: <RecordView table={table} />,
                });
 
+               routeList.push({
+                  name: `${app.label} View`,
+                  key: `${app.name}.view`,
+                  route: `${path}/key`,
+                  component: <RecordViewByUniqueKey table={table} />,
+               });
+
                routeList.push({
                   name: `${app.label}`,
                   key: `${app.name}.edit`,
@@ -549,7 +560,7 @@ export default function App()
                });
             }
 
-            const pathToLabelMap: {[path: string]: string} = {}
+            const pathToLabelMap: { [path: string]: string } = {};
             for (let i = 0; i < appRoutesList.length; i++)
             {
                const route = appRoutesList[i];
@@ -574,11 +585,11 @@ export default function App()
             console.error(e);
             if (e instanceof QException)
             {
-               if ((e as QException).status === "401")
+               if ((e as QException).status === 401)
                {
                   console.log("Exception is a QException with status = 401.  Clearing some of localStorage & cookies");
                   qController.clearAuthenticationMetaDataLocalStorage();
-                  localStorage.removeItem("accessToken")
+                  localStorage.removeItem("accessToken");
                   removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
 
                   //////////////////////////////////////////////////////
@@ -655,26 +666,52 @@ 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"));
+   const [userId, setUserId] = useState(user?.email);
+
+   useEffect(() =>
+   {
+      setUserId(user?.email)
+   }, [user]);
+
+   
+   const [googleAnalyticsUtils] = useState(new GoogleAnalyticsUtils());
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function recordAnalytics(model: AnalyticsModel)
+   {
+      googleAnalyticsUtils.recordAnalytics(model)
+   }
+
+
    return (
 
       appRoutes && (
          <QContext.Provider value={{
             pageHeader: pageHeader,
             accentColor: accentColor,
+            accentColorLight: accentColorLight,
             tableMetaData: tableMetaData,
             tableProcesses: tableProcesses,
             dotMenuOpen: dotMenuOpen,
             keyboardHelpOpen: keyboardHelpOpen,
+            helpHelpActive: helpHelpActive,
+            userId: userId,
             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),
             setKeyboardHelpOpen: (keyboardHelpOpen: boolean) => setKeyboardHelpOpen(keyboardHelpOpen),
+            recordAnalytics: recordAnalytics,
             pathToLabelMap: pathToLabelMap,
             branding: branding
          }}>

src/CommandMenu.tsx

@@ -62,16 +62,21 @@ const useStyles = makeStyles((theme: any) => ({
    }
 }));
 
+const A_FIRST = -1;
+const B_FIRST = 1;
+
 const CommandMenu = ({metaData}: Props) =>
 {
+   const [searchString, setSearchString] = useState("");
+
    const navigate = useNavigate();
    const pathParts = location.pathname.replace(/\/+$/, "").split("/");
 
-   const {accentColor, tableMetaData, dotMenuOpen, setDotMenuOpen, keyboardHelpOpen, setKeyboardHelpOpen, setTableMetaData, tableProcesses} = useContext(QContext);
+   const {accentColor, tableMetaData, dotMenuOpen, setDotMenuOpen, keyboardHelpOpen, setKeyboardHelpOpen, setTableMetaData, tableProcesses, recordAnalytics} = useContext(QContext);
 
    const classes = useStyles();
 
-   function evalueKeyPress(e: KeyboardEvent)
+   function evaluateKeyPress(e: KeyboardEvent)
    {
       ///////////////////////////////////////////////////////////////////////////
       // if a dot pressed, not from a "text" element, then toggle command menu //
@@ -82,6 +87,7 @@ const CommandMenu = ({metaData}: Props) =>
          if (e.key === "." && !keyboardHelpOpen)
          {
             e.preventDefault();
+            recordAnalytics({category: "globalEvents", action: "dotMenuKeyboardShortcut"});
             setDotMenuOpen(true);
          }
          else if (e.key === "?" && !dotMenuOpen)
@@ -107,20 +113,20 @@ const CommandMenu = ({metaData}: Props) =>
 
       const down = (e: KeyboardEvent) =>
       {
-         evalueKeyPress(e);
-      }
+         evaluateKeyPress(e);
+      };
 
-      document.addEventListener("keydown", down)
+      document.addEventListener("keydown", down);
       return () =>
       {
-         document.removeEventListener("keydown", down)
-      }
-   }, [tableMetaData, dotMenuOpen, keyboardHelpOpen])
+         document.removeEventListener("keydown", down);
+      };
+   }, [tableMetaData, dotMenuOpen, keyboardHelpOpen]);
 
    useEffect(() =>
    {
       setDotMenuOpen(false);
-   }, [location.pathname])
+   }, [location.pathname]);
 
    function goToItem(path: string)
    {
@@ -162,69 +168,117 @@ const CommandMenu = ({metaData}: Props) =>
       return (null);
    }
 
+
+   /*******************************************************************************
+    ** sort a section (e.g, tables, apps).
+    **
+    ** put labels that start-with the search word first.
+    *******************************************************************************/
+   function comparator(labelA: string, labelB: string)
+   {
+      if (searchString != "")
+      {
+         let aStartsWith = labelA.toLowerCase().startsWith(searchString.toLowerCase());
+         let bStartsWith = labelB.toLowerCase().startsWith(searchString.toLowerCase());
+
+         if (aStartsWith && !bStartsWith)
+         {
+            return A_FIRST;
+         }
+         else if (bStartsWith && !aStartsWith)
+         {
+            return B_FIRST;
+         }
+
+         const indexOfSpace = searchString.indexOf(" ");
+         if (indexOfSpace > 0)
+         {
+            aStartsWith = labelA.toLowerCase().startsWith(searchString.substring(0, indexOfSpace).toLowerCase());
+            bStartsWith = labelB.toLowerCase().startsWith(searchString.substring(0, indexOfSpace).toLowerCase());
+
+            if (aStartsWith && !bStartsWith)
+            {
+               return A_FIRST;
+            }
+            else if (bStartsWith && !aStartsWith)
+            {
+               return B_FIRST;
+            }
+         }
+      }
+
+      return (labelA.localeCompare(labelB));
+   }
+
+
    /*******************************************************************************
     **
     *******************************************************************************/
    function ActionsSection()
    {
-      let tableNames : string[]= [];
+      let tableNames: string[] = [];
       metaData.tables.forEach((value: QTableMetaData, key: string) =>
       {
          tableNames.push(value.name);
-      })
-      tableNames = tableNames.sort((a: string, b:string) =>
+      });
+      tableNames = tableNames.sort((a: string, b: string) =>
       {
-         return (metaData.tables.get(a).label.localeCompare(metaData.tables.get(b).label));
-      })
+         const labelA = metaData.tables.get(a).label ?? "";
+         const labelB = metaData.tables.get(b).label ?? "";
+         return comparator(labelA, labelB);
+      });
 
       const path = location.pathname;
-      return tableMetaData && !path.endsWith("/edit") && !path.endsWith("/create") && !path.endsWith("#audit") && ! path.endsWith("copy") &&
+      return tableMetaData && !path.endsWith("/edit") && !path.endsWith("/create") && !path.endsWith("#audit") && !path.endsWith("copy") &&
          (
             <Command.Group heading={`${tableMetaData.label} Actions`}>
                {
                   tableMetaData.capabilities.has(Capability.TABLE_INSERT) && tableMetaData.insertPermission &&
-               <Command.Item onSelect={() => goToItem(`${pathParts.slice(0, -1).join("/")}/create`)} key={`${tableMetaData.label}-new`} value="New"><Icon sx={{color: accentColor}}>add</Icon>New</Command.Item>
+                  <Command.Item onSelect={() => goToItem(`${pathParts.slice(0, -1).join("/")}/create`)} key={`${tableMetaData.label}-new`} value="New"><Icon sx={{color: accentColor}}>add</Icon>New</Command.Item>
                }
                {
                   tableMetaData.capabilities.has(Capability.TABLE_INSERT) && tableMetaData.insertPermission &&
-               <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/copy`)} key={`${tableMetaData.label}-copy`} value="Copy"><Icon sx={{color: accentColor}}>copy</Icon>Copy</Command.Item>
+                  <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/copy`)} key={`${tableMetaData.label}-copy`} value="Copy"><Icon sx={{color: accentColor}}>copy</Icon>Copy</Command.Item>
                }
                {
                   tableMetaData.capabilities.has(Capability.TABLE_UPDATE) && tableMetaData.editPermission &&
-               <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/edit`)} key={`${tableMetaData.label}-edit`} value="Edit"><Icon sx={{color: accentColor}}>edit</Icon>Edit</Command.Item>
+                  <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/edit`)} key={`${tableMetaData.label}-edit`} value="Edit"><Icon sx={{color: accentColor}}>edit</Icon>Edit</Command.Item>
                }
                {
                   metaData && metaData.tables.has("audit") &&
-               <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}#audit`)} key={`${tableMetaData.label}-audit`} value="Audit"><Icon sx={{color: accentColor}}>checklist</Icon>Audit</Command.Item>
+                  <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}#audit`)} key={`${tableMetaData.label}-audit`} value="Audit"><Icon sx={{color: accentColor}}>checklist</Icon>Audit</Command.Item>
                }
                {
                   tableProcesses && tableProcesses.length > 0 &&
-               (
-                  tableProcesses.map((process) => (
-                     <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/${process.name}`)} key={`${process.name}`} value={`${process.label}`}><Icon sx={{color: accentColor}}>{getIconName(process.iconName, "play_arrow")}</Icon>{process.label}</Command.Item>
-                  ))
-               )
+                  (
+                     tableProcesses.map((process) => (
+                        <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/${process.name}`)} key={`${process.name}`} value={`${process.label}`}><Icon sx={{color: accentColor}}>{getIconName(process.iconName, "play_arrow")}</Icon>{process.label}</Command.Item>
+                     ))
+                  )
                }
                <Command.Separator />
             </Command.Group>
          );
    }
 
+
    /*******************************************************************************
     **
     *******************************************************************************/
    function TablesSection()
    {
-      let tableNames : string[]= [];
+      let tableNames: string[] = [];
       metaData.tables.forEach((value: QTableMetaData, key: string) =>
       {
          tableNames.push(value.name);
-      })
-      tableNames = tableNames.sort((a: string, b:string) =>
+      });
+      tableNames = tableNames.sort((a: string, b: string) =>
       {
-         return (metaData.tables.get(a).label.localeCompare(metaData.tables.get(b).label));
-      })
-      return(
+         const labelA = metaData.tables.get(a).label ?? "";
+         const labelB = metaData.tables.get(b).label ?? "";
+         return comparator(labelA, labelB);
+      });
+      return (
          <Command.Group heading="Tables">
             {
                tableNames.map((tableName: string, index: number) =>
@@ -239,6 +293,7 @@ const CommandMenu = ({metaData}: Props) =>
       );
    }
 
+
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -248,14 +303,16 @@ const CommandMenu = ({metaData}: Props) =>
       metaData.apps.forEach((value: QAppMetaData, key: string) =>
       {
          appNames.push(value.name);
-      })
+      });
 
-      appNames = appNames.sort((a: string, b:string) =>
+      appNames = appNames.sort((a: string, b: string) =>
       {
-         return (getFullAppLabel(metaData.appTree, a, 1, "").localeCompare(getFullAppLabel(metaData.appTree, b, 1, "")));
-      })
+         const labelA = getFullAppLabel(metaData.appTree, a, 1, "") ?? "";
+         const labelB = getFullAppLabel(metaData.appTree, b, 1, "") ?? "";
+         return comparator(labelA, labelB);
+      });
 
-      return(
+      return (
          <Command.Group heading="Apps">
             {
                appNames.map((appName: string, index: number) =>
@@ -270,31 +327,37 @@ const CommandMenu = ({metaData}: Props) =>
       );
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
    function RecentlyViewedSection()
    {
       const history = HistoryUtils.get();
       const options = [] as any;
       history.entries.reverse().forEach((entry, index) =>
          options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
-      )
+      );
 
       let appNames: string[] = [];
       metaData.apps.forEach((value: QAppMetaData, key: string) =>
       {
          appNames.push(value.name);
-      })
+      });
 
-      appNames = appNames.sort((a: string, b:string) =>
+      appNames = appNames.sort((a: string, b: string) =>
       {
-         return (metaData.apps.get(a).label.localeCompare(metaData.apps.get(b).label));
-      })
+         const labelA = metaData.apps.get(a).label ?? "";
+         const labelB = metaData.apps.get(b).label ?? "";
+         return comparator(labelA, labelB);
+      });
 
       const entryMap = new Map<string, boolean>();
-      return(
+      return (
          <Command.Group heading="Recently Viewed Records">
             {
                history.entries.reverse().map((entry: QHistoryEntry, index: number) =>
-                  ! entryMap.has(entry.label) && entryMap.set(entry.label, true) && (
+                  !entryMap.has(entry.label) && entryMap.set(entry.label, true) && (
                      <Command.Item onSelect={() => goToItem(`${entry.path}`)} key={`${entry.label}-${index}`} value={entry.label}><Icon sx={{color: accentColor}}>{entry.iconName}</Icon>{entry.label}</Command.Item>
                   )
                )
@@ -303,29 +366,101 @@ const CommandMenu = ({metaData}: Props) =>
       );
    }
 
-   const containerElement = useRef(null)
+   const containerElement = useRef(null);
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
    function closeKeyboardHelp()
    {
       setKeyboardHelpOpen(false);
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
    function closeDotMenu()
    {
       setDotMenuOpen(false);
    }
 
+
+   /*******************************************************************************
+    ** filter function for cmd-k library
+    **
+    *******************************************************************************/
+   function doFilter(value: string, search: string)
+   {
+      setSearchString(search);
+
+      /////////////////////
+      // split on spaces //
+      /////////////////////
+      const searchParts = search.toLowerCase().split(" ");
+      if (searchParts.length == 1)
+      {
+         //////////////////////////////////////////////
+         // if only 1 word, just do an includes test //
+         //////////////////////////////////////////////
+         return (value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0);
+      }
+      else
+      {
+         ////////////////////////////////////////
+         // else split the value on spaces too //
+         ////////////////////////////////////////
+         const valueParts = value.toLowerCase().split(" ");
+         if (searchParts.length > valueParts.length)
+         {
+            //////////////////////////////////////////////////////////////////////////////////
+            // if there are more words in the search than in the value, then it can't match //
+            // e.g. "order c" can't ever match, say "order"                                 //
+            //////////////////////////////////////////////////////////////////////////////////
+            return (0);
+         }
+
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // iterate over the search parts - if any don't match the corresponding value parts, then it's a non-match //
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         let valueIndex = 0;
+         for (let i = 0; i < searchParts.length; i++)
+         {
+            let foundMatch = false;
+            for (; valueIndex < valueParts.length; valueIndex++)
+            {
+               if (valueParts[valueIndex].includes(searchParts[i]))
+               {
+                  foundMatch = true;
+                  break;
+               }
+            }
+
+            if (!foundMatch)
+            {
+               return (0);
+            }
+         }
+
+         /////////////////////////////////
+         // if no failure, return a hit //
+         /////////////////////////////////
+         return (1);
+      }
+   }
+
    return (
       <React.Fragment>
          <Box ref={containerElement} className="raycast" sx={{position: "relative", zIndex: 10_000}}>
             {
                <Dialog open={dotMenuOpen} onClose={closeDotMenu}>
-                  <Command.Dialog open={dotMenuOpen} onOpenChange={setDotMenuOpen} container={containerElement.current} label="Test Global Command Menu">
+                  <Command.Dialog open={dotMenuOpen} onOpenChange={setDotMenuOpen} container={containerElement.current} filter={(value, search) => doFilter(value, search)}>
                      <Box sx={{display: "flex"}}>
-                        <Command.Input placeholder="Search for Tables, Actions, or Recently Viewed Items..."/>
+                        <Command.Input placeholder="Search for Tables, Actions, or Recently Viewed Items..." />
                         <Button onClick={closeDotMenu}><Icon>close</Icon></Button>
                      </Box>
-                     <Command.Loading  />
+                     <Command.Loading />
                      <Command.Separator />
                      <Command.List>
                         <Command.Empty>No results found.</Command.Empty>
@@ -354,8 +489,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>
@@ -374,6 +508,6 @@ const CommandMenu = ({metaData}: Props) =>
             </Dialog>
          }
       </React.Fragment>
-   )
-}
+   );
+};
 export default CommandMenu;

src/QContext.tsx

@@ -19,11 +19,10 @@
  * 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 {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils";
 import {createContext} from "react";
 
 interface QContext
@@ -32,7 +31,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;
@@ -46,19 +48,28 @@ interface QContext
    tableProcesses?: QProcessMetaData[];
    setTableProcesses?: (tableProcesses: QProcessMetaData[]) => void;
 
+   ///////////////////////////////////////////
+   // function to record an analytics event //
+   ///////////////////////////////////////////
+   recordAnalytics?: (model: AnalyticsModel) => void;
+
    ///////////////////////////////////
    // constants - no setters needed //
    ///////////////////////////////////
    pathToLabelMap?: {[path: string]: string};
    branding?: QBrandingMetaData;
+   helpHelpActive?: boolean;
+   userId?: string;
 }
 
 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/MaterialDashboardAppMetaData.java

@@ -0,0 +1,153 @@
+/*
+ * 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;
+
+
+import com.kingsrook.qqq.backend.core.model.metadata.layout.QAppMetaData;
+import com.kingsrook.qqq.backend.core.model.metadata.layout.QSupplementalAppMetaData;
+import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
+
+
+/*******************************************************************************
+ ** app-level meta-data for this module (handled as QSupplementalTableMetaData)
+ *******************************************************************************/
+public class MaterialDashboardAppMetaData extends QSupplementalAppMetaData
+{
+   public static final String TYPE_NAME = "materialDashboard";
+
+   private Boolean showAppLabelOnHomeScreen = true;
+   private Boolean includeTableCountsOnHomeScreen = true;
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static MaterialDashboardAppMetaData of(QAppMetaData app)
+   {
+      return ((MaterialDashboardAppMetaData) CollectionUtils.nonNullMap(app.getSupplementalMetaData()).get(TYPE_NAME));
+   }
+
+
+
+   /*******************************************************************************
+    ** either get the supplemental meta dat attached to an app - or create a new one
+    ** and attach it to the app, and return that.
+    *******************************************************************************/
+   public static MaterialDashboardAppMetaData ofOrWithNew(QAppMetaData app)
+   {
+      MaterialDashboardAppMetaData materialDashboardAppMetaData = of(app);
+
+      if(materialDashboardAppMetaData == null)
+      {
+         materialDashboardAppMetaData = new MaterialDashboardAppMetaData();
+         app.withSupplementalMetaData(materialDashboardAppMetaData);
+      }
+
+      return (materialDashboardAppMetaData);
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   public boolean includeInFullFrontendMetaData()
+   {
+      return (true);
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   public String getType()
+   {
+      return TYPE_NAME;
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for showAppLabelOnHomeScreen
+    *******************************************************************************/
+   public Boolean getShowAppLabelOnHomeScreen()
+   {
+      return (this.showAppLabelOnHomeScreen);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for showAppLabelOnHomeScreen
+    *******************************************************************************/
+   public void setShowAppLabelOnHomeScreen(Boolean showAppLabelOnHomeScreen)
+   {
+      this.showAppLabelOnHomeScreen = showAppLabelOnHomeScreen;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for showAppLabelOnHomeScreen
+    *******************************************************************************/
+   public MaterialDashboardAppMetaData withShowAppLabelOnHomeScreen(Boolean showAppLabelOnHomeScreen)
+   {
+      this.showAppLabelOnHomeScreen = showAppLabelOnHomeScreen;
+      return (this);
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for includeTableCountsOnHomeScreen
+    *******************************************************************************/
+   public Boolean getIncludeTableCountsOnHomeScreen()
+   {
+      return (this.includeTableCountsOnHomeScreen);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for includeTableCountsOnHomeScreen
+    *******************************************************************************/
+   public void setIncludeTableCountsOnHomeScreen(Boolean includeTableCountsOnHomeScreen)
+   {
+      this.includeTableCountsOnHomeScreen = includeTableCountsOnHomeScreen;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for includeTableCountsOnHomeScreen
+    *******************************************************************************/
+   public MaterialDashboardAppMetaData withIncludeTableCountsOnHomeScreen(Boolean includeTableCountsOnHomeScreen)
+   {
+      this.includeTableCountsOnHomeScreen = includeTableCountsOnHomeScreen;
+      return (this);
+   }
+
+}

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

@@ -28,4 +28,5 @@ package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
 public interface MaterialDashboardIconRoleNames
 {
    String TOP_RIGHT_INSIDE_CARD = "topRightInsideCard";
+   String TOP_LEFT_INSIDE_CARD = "topLeftInsideCard";
 }

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

@@ -22,17 +22,29 @@
 package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
 
 
+import java.util.ArrayList;
+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;
+import com.kingsrook.qqq.backend.core.utils.StringUtils;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
 
 
 /*******************************************************************************
- **
+ ** table-level meta-data for this module (handled as QSupplementalTableMetaData)
  *******************************************************************************/
 public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
 {
-   private List<List<String>> gotoFieldNames;
+   public static final String TYPE = "materialDashboard";
 
+   private List<List<String>> gotoFieldNames;
+   private List<String>       defaultQuickFilterFieldNames;
+   private List<FieldRule>    fieldRules;
 
 
    /*******************************************************************************
@@ -52,10 +64,25 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
    @Override
    public String getType()
    {
-      return ("materialDashboard");
+      return (TYPE);
    }
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static MaterialDashboardTableMetaData ofOrWithNew(QTableMetaData table)
+   {
+      MaterialDashboardTableMetaData supplementalMetaData = (MaterialDashboardTableMetaData) table.getSupplementalMetaData(TYPE);
+      if(supplementalMetaData == null)
+      {
+         supplementalMetaData = new MaterialDashboardTableMetaData();
+         table.withSupplementalMetaData(supplementalMetaData);
+      }
+
+      return (supplementalMetaData);
+   }
+
 
    /*******************************************************************************
     ** Getter for gotoFieldNames
@@ -86,4 +113,155 @@ 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: ");
+
+      for(FieldRule fieldRule : CollectionUtils.nonNullList(fieldRules))
+      {
+         validateFieldRule(qInstance, tableMetaData, qInstanceValidator, fieldRule, prefix);
+      }
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   static void validateFieldRule(QInstance qInstance, QTableMetaData tableMetaData, QInstanceValidator qInstanceValidator, FieldRule fieldRule, String prefix)
+   {
+      qInstanceValidator.assertCondition(fieldRule.getTrigger() != null, prefix + "has a fieldRule without a trigger");
+      qInstanceValidator.assertCondition(fieldRule.getAction() != null, prefix + "has a fieldRule without an action");
+
+      if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getSourceField()), prefix + "has a fieldRule without a sourceField"))
+      {
+         qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getSourceField()), prefix + "has a fieldRule with an unrecognized sourceField: " + fieldRule.getSourceField());
+      }
+
+      if(StringUtils.hasContent(fieldRule.getTargetField()))
+      {
+         qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
+      }
+
+      if(StringUtils.hasContent(fieldRule.getTargetWidget()))
+      {
+         if(qInstanceValidator.assertCondition(qInstance.getWidget(fieldRule.getTargetWidget()) != null, prefix + "has a widgetRule with an unrecognized targetWidget: " + fieldRule.getTargetWidget()))
+         {
+            qInstanceValidator.assertCondition(CollectionUtils.nonNullList(tableMetaData.getSections()).stream().anyMatch(s -> fieldRule.getTargetWidget().equals(s.getWidgetName())),
+               prefix + "has a widgetRule with a targetWidget which is not used in any sections on the table");
+         }
+      }
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   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);
+   }
+
+
+   /*******************************************************************************
+    ** Getter for fieldRules
+    *******************************************************************************/
+   public List<FieldRule> getFieldRules()
+   {
+      return (this.fieldRules);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for fieldRules
+    *******************************************************************************/
+   public void setFieldRules(List<FieldRule> fieldRules)
+   {
+      this.fieldRules = fieldRules;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for fieldRules
+    *******************************************************************************/
+   public MaterialDashboardTableMetaData withFieldRules(List<FieldRule> fieldRules)
+   {
+      this.fieldRules = fieldRules;
+      return (this);
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for fieldRules
+    *******************************************************************************/
+   public MaterialDashboardTableMetaData withFieldRule(FieldRule fieldRule)
+   {
+      if(this.fieldRules == null)
+      {
+         this.fieldRules = new ArrayList<>();
+      }
+
+      this.fieldRules.add(fieldRule);
+
+      return (this);
+   }
+
 }

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

@@ -0,0 +1,198 @@
+/*
+ * 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.fieldrules;
+
+
+import java.io.Serializable;
+
+
+/*******************************************************************************
+ ** definition of rules for how UI fields should behave.
+ **
+ ** e.g., one field being changed causing different things to be needed in another
+ ** field.
+ *******************************************************************************/
+public class FieldRule implements Serializable
+{
+   private FieldRuleTrigger trigger;
+   private String           sourceField;
+   private FieldRuleAction  action;
+   private String           targetField;
+
+   private String targetWidget;
+
+
+
+   /*******************************************************************************
+    ** Getter for trigger
+    *******************************************************************************/
+   public FieldRuleTrigger getTrigger()
+   {
+      return (this.trigger);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for trigger
+    *******************************************************************************/
+   public void setTrigger(FieldRuleTrigger trigger)
+   {
+      this.trigger = trigger;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for trigger
+    *******************************************************************************/
+   public FieldRule withTrigger(FieldRuleTrigger trigger)
+   {
+      this.trigger = trigger;
+      return (this);
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for sourceField
+    *******************************************************************************/
+   public String getSourceField()
+   {
+      return (this.sourceField);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for sourceField
+    *******************************************************************************/
+   public void setSourceField(String sourceField)
+   {
+      this.sourceField = sourceField;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for sourceField
+    *******************************************************************************/
+   public FieldRule withSourceField(String sourceField)
+   {
+      this.sourceField = sourceField;
+      return (this);
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for action
+    *******************************************************************************/
+   public FieldRuleAction getAction()
+   {
+      return (this.action);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for action
+    *******************************************************************************/
+   public void setAction(FieldRuleAction action)
+   {
+      this.action = action;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for action
+    *******************************************************************************/
+   public FieldRule withAction(FieldRuleAction action)
+   {
+      this.action = action;
+      return (this);
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for targetField
+    *******************************************************************************/
+   public String getTargetField()
+   {
+      return (this.targetField);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for targetField
+    *******************************************************************************/
+   public void setTargetField(String targetField)
+   {
+      this.targetField = targetField;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for targetField
+    *******************************************************************************/
+   public FieldRule withTargetField(String targetField)
+   {
+      this.targetField = targetField;
+      return (this);
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for targetWidget
+    *******************************************************************************/
+   public String getTargetWidget()
+   {
+      return (this.targetWidget);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for targetWidget
+    *******************************************************************************/
+   public void setTargetWidget(String targetWidget)
+   {
+      this.targetWidget = targetWidget;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for targetWidget
+    *******************************************************************************/
+   public FieldRule withTargetWidget(String targetWidget)
+   {
+      this.targetWidget = targetWidget;
+      return (this);
+   }
+
+}

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

@@ -0,0 +1,32 @@
+/*
+ * 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.fieldrules;
+
+
+/*******************************************************************************
+ ** possible actions associated with field rules
+ *******************************************************************************/
+public enum FieldRuleAction
+{
+   CLEAR_TARGET_FIELD,
+   RELOAD_WIDGET
+}

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

@@ -0,0 +1,31 @@
+/*
+ * 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.fieldrules;
+
+
+/*******************************************************************************
+ ** possible triggers associated with field rules
+ *******************************************************************************/
+public enum FieldRuleTrigger
+{
+   ON_CHANGE
+}

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/savedreports/SavedReportTableFrontendMaterialDashboardEnricher.java

@@ -0,0 +1,59 @@
+/*
+ * 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.savedreports;
+
+
+import java.util.List;
+import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.MaterialDashboardTableMetaData;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleAction;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleTrigger;
+
+
+/*******************************************************************************
+ ** Add frontend material dashboard enhacements to saved report table
+ *******************************************************************************/
+public class SavedReportTableFrontendMaterialDashboardEnricher
+{
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static void enrich(QTableMetaData tableMetaData)
+   {
+      MaterialDashboardTableMetaData materialDashboardTableMetaData = MaterialDashboardTableMetaData.ofOrWithNew(tableMetaData);
+
+      /////////////////////////////////////////////////////////////////////////
+      // make changes to the tableName field clear the value in these fields //
+      /////////////////////////////////////////////////////////////////////////
+      for(String targetField : List.of("queryFilterJson", "columnsJson", "pivotTableJson"))
+      {
+         materialDashboardTableMetaData.withFieldRule(new FieldRule()
+            .withSourceField("tableName")
+            .withTrigger(FieldRuleTrigger.ON_CHANGE)
+            .withAction(FieldRuleAction.CLEAR_TARGET_FIELD)
+            .withTargetField(targetField));
+      }
+   }
+
+}

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

@@ -48,7 +48,7 @@ const tooltip: Types = {
       borderRadius: borderRadius.md,
       opacity: 0.7,
       padding: "1rem",
-      boxShadow: "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px"
+      boxShadow: "0px 0px 12px rgba(128, 128, 128, 0.40)"
     },
 
     arrow: {

src/qqq/components/audits/AuditBody.tsx

@@ -34,10 +34,10 @@ import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import React, {JSXElementConstructor, useContext, useEffect, useState} from "react";
 import QContext from "QContext";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useState} from "react";
 
 interface Props
 {
@@ -58,19 +58,19 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
    const [limit, setLimit] = useState(1000);
    const [statusString, setStatusString] = useState("Loading audits...");
    const [auditsByDate, setAuditsByDate] = useState([] as QRecord[][]);
-   const [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, JSX.Element[]>)
-   const [fieldChangeMap, setFieldChangeMap] = useState(null as Map<number, JSX.Element>)
+   const [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, JSX.Element[]>);
+   const [fieldChangeMap, setFieldChangeMap] = useState(null as Map<number, JSX.Element>);
    const [sortDirection, setSortDirection] = useState(localStorage.getItem("audit.sortDirection") === "true");
    const {accentColor} = useContext(QContext);
 
    function wrapValue(value: any): JSX.Element
    {
-      return <span style={{fontWeight: "500", color: " rgb(123, 128, 154)"}}>{value}</span>
+      return <span style={{fontWeight: "500", color: " rgb(123, 128, 154)"}}>{value}</span>;
    }
 
    function wasValue(value: any): JSX.Element
    {
-      return <span style={{fontWeight: "100", color: " rgb(123, 128, 154)"}}>{value}</span>
+      return <span style={{fontWeight: "100", color: " rgb(123, 128, 154)"}}>{value}</span>;
    }
 
    function getAuditDetailFieldChangeRow(qRecord: QRecord): JSX.Element | null
@@ -79,10 +79,14 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
       const fieldName = qRecord.values.get("auditDetail.fieldName");
       const oldValue = qRecord.values.get("auditDetail.oldValue");
       const newValue = qRecord.values.get("auditDetail.newValue");
-      if(fieldName && (oldValue !== null || newValue !== null))
+      if (fieldName && (oldValue !== null || newValue !== null))
       {
-         const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName
-         return (<tr><td>{fieldLabel}</td><td>{oldValue}</td><td>{newValue}</td></tr>)
+         const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName;
+         return (<tr>
+            <td>{fieldLabel}</td>
+            <td>{oldValue}</td>
+            <td>{newValue}</td>
+         </tr>);
       }
       return (null);
    }
@@ -93,22 +97,22 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
       const fieldName = qRecord.values.get("auditDetail.fieldName");
       const oldValue = qRecord.values.get("auditDetail.oldValue");
       const newValue = qRecord.values.get("auditDetail.newValue");
-      if(fieldName && (oldValue !== null || newValue !== null))
+      if (fieldName && (oldValue !== null || newValue !== null))
       {
          const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName;
-         if(oldValue !== undefined && newValue !== undefined)
+         if (oldValue !== undefined && newValue !== undefined)
          {
             return (<>{fieldLabel}: Changed from {(oldValue)} to <b>{(newValue)}</b></>);
          }
-         else if(newValue !== undefined)
+         else if (newValue !== undefined)
          {
             return (<>{fieldLabel}: Set to <b>{(newValue)}</b></>);
          }
-         else if(oldValue !== undefined)
+         else if (oldValue !== undefined)
          {
             return (<>{fieldLabel}: Removed value {(oldValue)}</>);
          }
-         else if(message)
+         else if (message)
          {
             return (<>{message}</>);
          }
@@ -177,7 +181,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
          }
          */
       }
-      else if(message)
+      else if (message)
       {
          return (<>{message}</>);
       }
@@ -198,22 +202,22 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
             new QFilterOrderBy("timestamp", sortDirection),
             new QFilterOrderBy("id", sortDirection),
             new QFilterOrderBy("auditDetail.id", true)
-         ], "AND", 0, limit);
+         ], null, "AND", 0, limit);
 
          ///////////////////////////////
          // fetch audits in try-catch //
          ///////////////////////////////
-         let audits = [] as QRecord[]
+         let audits = [] as QRecord[];
          try
          {
             audits = await qController.query("audit", filter, [new QueryJoin("auditDetail", true, "LEFT")]);
             setAudits(audits);
          }
-         catch(e)
+         catch (e)
          {
             if (e instanceof QException)
             {
-               if ((e as QException).status === "403")
+               if ((e as QException).status === 403)
                {
                   setStatusString("You do not have permission to view audits");
                   return;
@@ -233,33 +237,33 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
          //////////////////////////////////////////////////////////////////////////////////////////////////////////
          // group the audits by auditId (e.g., this is a list that joined audit & auditDetail, so un-flatten it) //
          //////////////////////////////////////////////////////////////////////////////////////////////////////////
-         const unflattenedAudits: QRecord[] = []
+         const unflattenedAudits: QRecord[] = [];
          const detailMap: Map<number, JSX.Element[]> = new Map();
          const fieldChangeRowsMap: Map<number, JSX.Element[]> = new Map();
          for (let i = 0; i < audits.length; i++)
          {
             let id = audits[i].values.get("id");
-            if(i == 0 || unflattenedAudits[unflattenedAudits.length-1].values.get("id") != id)
+            if (i == 0 || unflattenedAudits[unflattenedAudits.length - 1].values.get("id") != id)
             {
                unflattenedAudits.push(audits[i]);
             }
 
             let auditDetail = getAuditDetailElement(audits[i]);
-            if(auditDetail)
+            if (auditDetail)
             {
-               if(!detailMap.has(id))
+               if (!detailMap.has(id))
                {
                   detailMap.set(id, []);
                }
 
-               detailMap.get(id).push(auditDetail)
+               detailMap.get(id).push(auditDetail);
             }
 
             // table version, probably not to commit
             let fieldChangeRow = getAuditDetailFieldChangeRow(audits[i]);
-            if(auditDetail)
+            if (auditDetail)
             {
-               if(!fieldChangeRowsMap.has(id))
+               if (!fieldChangeRowsMap.has(id))
                {
                   fieldChangeRowsMap.set(id, []);
                }
@@ -273,7 +277,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
          for (let i = 0; i < unflattenedAudits.length; i++)
          {
             let id = unflattenedAudits[i].values.get("id");
-            if(fieldChangeRowsMap.has(id) && fieldChangeRowsMap.get(id).length > 0)
+            if (fieldChangeRowsMap.has(id) && fieldChangeRowsMap.get(id).length > 0)
             {
                const fieldChangeTable = (
                   <table style={{fontSize: "0.875rem"}} className="auditDetailTable" cellSpacing="0">
@@ -288,11 +292,11 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
                         {fieldChangeRowsMap.get(id).map((row, key) => <React.Fragment key={key}>{row}</React.Fragment>)}
                      </tbody>
                   </table>
-               )
+               );
                fieldChangeMap.set(id, fieldChangeTable);
             }
          }
-         setFieldChangeMap(fieldChangeMap)
+         setFieldChangeMap(fieldChangeMap);
 
          //////////////////////////////
          // group the audits by date //
@@ -350,7 +354,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
    const changeSortDirection = () =>
    {
       setAudits([]);
-      const newSortDirection = !sortDirection
+      const newSortDirection = !sortDirection;
       setSortDirection(newSortDirection);
       localStorage.setItem("audit.sortDirection", String(newSortDirection));
    };

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

@@ -29,8 +29,8 @@ 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": {
@@ -54,18 +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: 24,
+      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)",
@@ -106,9 +107,9 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
    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"}}>
@@ -116,7 +117,7 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
             </Typography>
             <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"}}>

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,21 @@ 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}
+                                 possibleValueSourceName={field.possibleValueProps.possibleValueSourceName}
+                                 fieldName={field.possibleValueProps.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 +193,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 +208,7 @@ function QDynamicForm(props: Props): JSX.Element
                               success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
                               formFieldObject={field}
                            />
+                           {formattedHelpContent}
                         </Grid>
                      );
                   })}
@@ -207,6 +221,7 @@ function QDynamicForm(props: Props): JSX.Element
 QDynamicForm.defaultProps = {
    formLabel: undefined,
    bulkEditMode: false,
+   helpRoles: ["ALL_SCREENS"],
    bulkEditSwitchChangeHandler: () =>
    {
    },

src/qqq/components/forms/DynamicFormField.tsx

@@ -19,15 +19,17 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {InputAdornment, InputLabel} from "@mui/material";
-import Box from "@mui/material/Box";
+import {Box, InputAdornment, InputLabel} from "@mui/material";
 import Switch from "@mui/material/Switch";
 import {ErrorMessage, Field, useFormikContext} from "formik";
-import React, {useState} from "react";
+import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
+import React, {useMemo, 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";
+import {flushSync} from "react-dom";
 
 // Declaring props types for FormField
 interface Props
@@ -52,6 +54,7 @@ function QDynamicFormField({
 {
    const [switchChecked, setSwitchChecked] = useState(false);
    const [isDisabled, setIsDisabled] = useState(!isEditable || bulkEditMode);
+   const {inputBorderColor} = colors;
 
    const {setFieldValue} = useFormikContext();
 
@@ -83,6 +86,51 @@ function QDynamicFormField({
       }
    };
 
+   ///////////////////////////////////////////////////////////////////////////////////////
+   // check the field meta data for behavior that says to do toUpperCase or toLowerCase //
+   ///////////////////////////////////////////////////////////////////////////////////////
+   let isToUpperCase = useMemo(() => DynamicFormUtils.isToUpperCase(formFieldObject?.fieldMetaData), [formFieldObject]);
+   let isToLowerCase = useMemo(() => DynamicFormUtils.isToLowerCase(formFieldObject?.fieldMetaData), [formFieldObject]);
+
+   ////////////////////////////////////////////////////////////////////////
+   // if the field has a toUpperCase or toLowerCase behavior on it, then //
+   // apply that rule.  But also, to avoid the cursor always jumping to  //
+   // the end of the input, do some manipulation of the selection.       //
+   // See: https://giacomocerquone.com/blog/keep-input-cursor-still      //
+   // Note, we only want an onChange handle if we're doing one of these  //
+   // behaviors, (because teh flushSync is potentially slow).  hence, we //
+   // put the onChange in an object and assign it with a spread          //
+   ////////////////////////////////////////////////////////////////////////
+   let onChange: any = {};
+   if (isToUpperCase || isToLowerCase)
+   {
+      onChange.onChange = (e: any) =>
+      {
+         const beforeStart = e.target.selectionStart;
+         const beforeEnd = e.target.selectionEnd;
+
+         flushSync(() =>
+         {
+            let newValue = e.currentTarget.value;
+            if (isToUpperCase)
+            {
+               newValue = newValue.toUpperCase();
+            }
+            if (isToLowerCase)
+            {
+               newValue = newValue.toLowerCase();
+            }
+            setFieldValue(name, newValue);
+         });
+
+         const input = document.getElementById(name) as HTMLInputElement;
+         if (input)
+         {
+            input.setSelectionRange(beforeStart, beforeEnd);
+         }
+      };
+   }
+
    let field;
    let getsBulkEditHtmlLabel = true;
    if (type === "checkbox")
@@ -100,7 +148,7 @@ function QDynamicFormField({
    else if (type === "ace")
    {
       let mode = "text";
-      if(formFieldObject && formFieldObject.languageMode)
+      if (formFieldObject && formFieldObject.languageMode)
       {
          mode = formFieldObject.languageMode;
       }
@@ -122,7 +170,7 @@ function QDynamicFormField({
                width="100%"
                height="300px"
                value={value}
-               style={{border: "1px solid gray"}}
+               style={{border: `1px solid ${inputBorderColor}`, borderRadius: "0.75rem"}}
             />
          </>
       );
@@ -131,7 +179,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} {...onChange} 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")
@@ -171,6 +219,15 @@ 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

@@ -24,27 +24,38 @@ import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QF
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import * as Yup from "yup";
 
+
+type DisabledFields = { [fieldName: string]: boolean } | string[];
+
 /*******************************************************************************
  ** Meta-data to represent a single field in a table.
  **
  *******************************************************************************/
 class DynamicFormUtils
 {
-   public static getFormData(qqqFormFields: QFieldMetaData[])
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getFormData(qqqFormFields: QFieldMetaData[], disabledFields?: DisabledFields)
    {
       const dynamicFormFields: any = {};
       const formValidations: any = {};
 
       qqqFormFields.forEach((field) =>
       {
-         dynamicFormFields[field.name] = this.getDynamicField(field);
-         formValidations[field.name] = this.getValidationForField(field);
+         dynamicFormFields[field.name] = this.getDynamicField(field, disabledFields);
+         formValidations[field.name] = this.getValidationForField(field, disabledFields);
       });
 
       return {dynamicFormFields, formValidations};
    }
 
-   public static getDynamicField(field: QFieldMetaData)
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getDynamicField(field: QFieldMetaData, disabledFields?: DisabledFields)
    {
       let fieldType: string;
       switch (field.type.toString())
@@ -85,14 +96,21 @@ class DynamicFormUtils
          }
       }
 
+      ////////////////////////////////////////////////////////////
+      // this feels right, but... might be cases where it isn't //
+      ////////////////////////////////////////////////////////////
+      const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
+      const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
+
       let label = field.label ? field.label : field.name;
-      label += field.isRequired ? " *" : "";
+      label += effectivelyIsRequired ? " *" : "";
 
       return ({
+         fieldMetaData: field,
          name: field.name,
          label: label,
-         isRequired: field.isRequired,
-         isEditable: field.isEditable,
+         isRequired: effectivelyIsRequired,
+         isEditable: effectiveIsEditable,
          type: fieldType,
          displayFormat: field.displayFormat,
          // todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
@@ -100,11 +118,18 @@ class DynamicFormUtils
       });
    }
 
-   public static getValidationForField(field: QFieldMetaData)
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getValidationForField(field: QFieldMetaData, disabledFields?: DisabledFields)
    {
-      if (field.isRequired)
+      const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
+      const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
+
+      if (effectivelyIsRequired)
       {
-         if(field.possibleValueSourceName)
+         if (field.possibleValueSourceName)
          {
             ////////////////////////////////////////////////////////////////////////////////////////////
             // the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
@@ -120,6 +145,10 @@ class DynamicFormUtils
       return (null);
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
    public static addPossibleValueProps(dynamicFormFields: any, qFields: QFieldMetaData[], tableName: string, processName: string, displayValues: Map<string, string>)
    {
       for (let i = 0; i < qFields.length; i++)
@@ -143,6 +172,17 @@ class DynamicFormUtils
                   {
                      isPossibleValue: true,
                      tableName: tableName,
+                     fieldName: field.name,
+                     initialDisplayValue: initialDisplayValue,
+                  };
+            }
+            else if (processName)
+            {
+               dynamicFormFields[field.name].possibleValueProps =
+                  {
+                     isPossibleValue: true,
+                     processName: processName,
+                     fieldName: field.name,
                      initialDisplayValue: initialDisplayValue,
                   };
             }
@@ -151,13 +191,75 @@ class DynamicFormUtils
                dynamicFormFields[field.name].possibleValueProps =
                   {
                      isPossibleValue: true,
-                     processName: processName,
                      initialDisplayValue: initialDisplayValue,
+                     fieldName: field.name,
+                     possibleValueSourceName: field.possibleValueSourceName
                   };
             }
          }
       }
    }
+
+
+   /*******************************************************************************
+    ** private helper - check the disabled fields object (array or map), and return
+    ** true iff fieldName is in it.
+    *******************************************************************************/
+   private static isFieldDynamicallyDisabled(fieldName: string, disabledFields?: DisabledFields): boolean
+   {
+      if (!disabledFields)
+      {
+         return (false);
+      }
+
+      if (Array.isArray(disabledFields))
+      {
+         return (disabledFields.indexOf(fieldName) > -1);
+      }
+      else
+      {
+         return (disabledFields[fieldName]);
+      }
+   }
+
+
+   /***************************************************************************
+    * check if a field has the TO_UPPER_CASE behavior on it.
+    ***************************************************************************/
+   public static isToUpperCase(fieldMetaData: QFieldMetaData): boolean
+   {
+      return this.hasBehavior(fieldMetaData, "TO_UPPER_CASE");
+   }
+
+
+   /***************************************************************************
+    * check if a field has the TO_LOWER_CASE behavior on it.
+    ***************************************************************************/
+   public static isToLowerCase(fieldMetaData: QFieldMetaData): boolean
+   {
+      return this.hasBehavior(fieldMetaData, "TO_LOWER_CASE");
+   }
+
+
+   /***************************************************************************
+    * check if a field has a specific behavior name on it.
+    ***************************************************************************/
+   private static hasBehavior(fieldMetaData: QFieldMetaData, behaviorName: string): boolean
+   {
+      if (fieldMetaData && fieldMetaData.behaviors)
+      {
+         for (let i = 0; i < fieldMetaData.behaviors.length; i++)
+         {
+            if (fieldMetaData.behaviors[i] == behaviorName)
+            {
+               return (true);
+            }
+         }
+      }
+
+      return (false);
+   }
+
 }
 
 export default DynamicFormUtils;

src/qqq/components/forms/DynamicSelect.tsx

@@ -28,15 +28,17 @@ import Box from "@mui/material/Box";
 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";
+import React, {useEffect, useState} from "react";
 
 interface Props
 {
    tableName?: string;
    processName?: string;
-   fieldName: string;
+   fieldName?: string;
+   possibleValueSourceName?: string;
    overrideId?: string;
    fieldLabel: string;
    inForm: boolean;
@@ -49,11 +51,15 @@ interface Props
    bulkEditMode?: boolean;
    bulkEditSwitchChangeHandler?: any;
    otherValues?: Map<string, any>;
+   variant: "standard" | "outlined";
+   initiallyOpen: boolean;
 }
 
 DynamicSelect.defaultProps = {
    tableName: null,
    processName: null,
+   fieldName: null,
+   possibleValueSourceName: null,
    inForm: true,
    initialValue: null,
    initialDisplayValue: null,
@@ -63,19 +69,81 @@ DynamicSelect.defaultProps = {
    isMultiple: false,
    bulkEditMode: false,
    otherValues: new Map<string, any>(),
+   variant: "outlined",
+   initiallyOpen: false,
    bulkEditSwitchChangeHandler: () =>
    {
    },
 };
 
+const {inputBorderColor} = colors;
+
+
+export const getAutocompleteOutlinedStyle = (isDisabled: boolean) =>
+{
+   return ({
+      "& .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 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, possibleValueSourceName, 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))));
+
+   useEffect(() =>
+   {
+      if (tableName && processName)
+      {
+         console.log("DynamicSelect - you may not provide both a tableName and a processName");
+      }
+      if (tableName && !fieldName)
+      {
+         console.log("DynamicSelect - if you provide a tableName, you must also provide a fieldName");
+      }
+      if (processName && !fieldName)
+      {
+         console.log("DynamicSelect - if you provide a processName, you must also provide a fieldName");
+      }
+      if (!fieldName && !possibleValueSourceName)
+      {
+         console.log("DynamicSelect - you must provide either a fieldName (and a tableName or processName) or a possibleValueSourceName");
+      }
+      if (fieldName && !possibleValueSourceName)
+      {
+         if (!tableName || !processName)
+         {
+            console.log("DynamicSelect - if you provide a fieldName and not a possibleValueSourceName, then you must also provide a tableName or processName");
+         }
+      }
+      if (possibleValueSourceName)
+      {
+         if (tableName || processName)
+         {
+            console.log("DynamicSelect - if you provide a possibleValueSourceName, you should not also provide a tableName or processName");
+         }
+      }
+
+   }, [tableName, processName, fieldName, possibleValueSourceName]);
 
    ////////////////////////////////////////////////////////////////////////////////////////////////
    // default value - needs to be an array (from initialValues (array) prop) for multiple mode - //
@@ -105,11 +173,18 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
 
    useEffect(() =>
    {
-      if(firstRender)
+      if (firstRender)
       {
          // 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!");
 
@@ -119,9 +194,9 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       (async () =>
       {
          // console.log(`doing a search with ${searchTerm}`);
-         const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName, searchTerm ?? "", null, otherValues);
+         const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues);
 
-         if(tableMetaData == null && tableName)
+         if (tableMetaData == null && tableName)
          {
             let tableMetaData: QTableMetaData = await qController.loadTableMetaData(tableName);
             setTableMetaData(tableMetaData);
@@ -132,7 +207,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
          // console.log(`${results}`);
          if (active)
          {
-            setOptions([ ...results ]);
+            setOptions([...results]);
          }
       })();
 
@@ -140,12 +215,30 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       {
          active = false;
       };
-   }, [ searchTerm ]);
+   }, [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, possibleValueSourceName ?? 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}`);
-      if(reason !== "reset")
+      if (reason !== "reset")
       {
          // console.log(` -> setting search term to ${value}`);
          setSearchTerm(value);
@@ -155,7 +248,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
    const handleBlur = (x: any) =>
    {
       setSearchTerm(null);
-   }
+   };
 
    const handleChanged = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) =>
    {
@@ -163,9 +256,9 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       // console.log(value);
       setSearchTerm(null);
 
-      if(onChange)
+      if (onChange)
       {
-         if(isMultiple)
+         if (isMultiple)
          {
             onChange(value);
          }
@@ -174,7 +267,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
             onChange(value ? new QPossibleValue(value) : null);
          }
       }
-      else if(setFieldValueRef)
+      else if (setFieldValueRef && fieldName)
       {
          setFieldValueRef(fieldName, value ? value.id : null);
       }
@@ -187,7 +280,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       // get options whose text/label matches the input (e.g., not ids that match)   //
       /////////////////////////////////////////////////////////////////////////////////
       return (options);
-   }
+   };
 
    // @ts-ignore
    const renderOption = (props: Object, option: any, {selected}) =>
@@ -196,23 +289,24 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
 
       try
       {
-         const field = tableMetaData?.fields.get(fieldName)
-         if(field)
+         const field = tableMetaData?.fields.get(fieldName);
+         if (field)
          {
             const adornment = field.getAdornment(AdornmentType.CHIP);
-            if(adornment)
+            if (adornment)
             {
-               const color = adornment.getValue("color." + option.id) ?? "default"
+               const color = adornment.getValue("color." + option.id) ?? "default";
                const iconName = adornment.getValue("icon." + option.id) ?? null;
                const iconElement = iconName ? <Icon>{iconName}</Icon> : null;
                content = (<Chip label={option.label} color={color} icon={iconElement} size="small" variant="outlined" sx={{fontWeight: 500}} />);
             }
          }
       }
-      catch(e)
-      { }
+      catch (e)
+      {
+      }
 
-      if(isMultiple)
+      if (isMultiple)
       {
          content = (
             <>
@@ -230,11 +324,11 @@ 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>
       );
-   }
+   };
 
    const bulkEditSwitchChanged = () =>
    {
@@ -244,20 +338,27 @@ 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 = getAutocompleteOutlinedStyle(isDisabled);
+   }
 
    const autocomplete = (
       <Box>
          <Autocomplete
-            id={overrideId ?? fieldName}
-            sx={{background: isDisabled ? "#f0f2f5!important" : "initial"}}
+            id={overrideId ?? fieldName ?? possibleValueSourceName}
+            sx={autocompleteSX}
             open={open}
             fullWidth
             onOpen={() =>
             {
                setOpen(true);
                // console.log("setting open...");
-               if(options.length == 0)
+               if (options.length == 0)
                {
                   // console.log("no options yet, so setting search term to ''...");
                   setSearchTerm("");
@@ -267,17 +368,22 @@ 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)
+               if (option && option.length)
                {
                   // @ts-ignore
                   option = option[0];
                }
                // @ts-ignore
-               return option.label
+               return option.label;
             }}
             options={options}
             loading={loading}
@@ -305,7 +411,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
                <TextField
                   {...params}
                   label={fieldLabel}
-                  variant="standard"
+                  variant={variant}
                   autoComplete="off"
                   type="search"
                   InputProps={{
@@ -324,7 +430,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
             inForm &&
             <Box mt={0.75}>
                <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
-                  {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={fieldName} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
+                  {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={fieldName ?? possibleValueSourceName} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
                </MDTypography>
             </Box>
          }
@@ -341,6 +447,15 @@ 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%">
@@ -352,7 +467,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
    else
    {
       return (
-         <Box mb={1.5}>
+         <Box>
             {autocomplete}
          </Box>
       );

src/qqq/components/horseshoe/Breadcrumbs.tsx

@@ -63,41 +63,55 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
    ///////////////////////////////////////////////////////////////////////
    // strip away empty elements of the route (e.g., trailing slash(es)) //
    ///////////////////////////////////////////////////////////////////////
-   if(route.length)
+   if (route.length)
    {
       // @ts-ignore
       route = route.filter(r => r != "");
    }
 
    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 =>
    {
-      if(fullPath.endsWith("/"))
+      if (fullPath.endsWith("/"))
       {
          fullPath = fullPath.replace(/\/+$/, "");
       }
 
-      if(pathToLabelMap && pathToLabelMap[fullPath])
+      if (pathToLabelMap && pathToLabelMap[fullPath])
       {
          return pathToLabelMap[fullPath];
       }
 
       return (routeToLabel(route));
-   }
+   };
 
    let pageTitle = branding?.appName ?? "";
    const fullRoutes: string[] = [];
    let accumulatedPath = "";
    for (let i = 0; i < routes.length; i++)
    {
-      if(routes[i] === "savedFilter")
+      ////////////////////////////////////////////////////////
+      // avoid showing "saved view" as a breadcrumb element //
+      // e.g., if at /app/table/savedView/1                 //
+      ////////////////////////////////////////////////////////
+      if (routes[i] === "savedView" && i == routes.length - 1)
       {
          continue;
       }
 
-      if(routes[i] === "")
+      ///////////////////////////////////////////////////////////////////////
+      // avoid showing the table name if it's the element before savedView //
+      // e.g., when at /app/table/savedView/1 (so where i==1)              //
+      // we want to just be showing "App"                                  //
+      ///////////////////////////////////////////////////////////////////////
+      if (i < routes.length - 1 && routes[i + 1] == "savedView" && i == 1)
+      {
+         continue;
+      }
+
+      if (routes[i] === "")
       {
          continue;
       }
@@ -116,6 +130,9 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
                fontSize: "1.125rem",
                fontWeight: "500",
                color: colors.dark.main,
+               "& li": {
+                  lineHeight: "unset!important"
+               },
                "& a": {
                   color: colors.gray.main
                },
@@ -127,7 +144,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
             }}
          >
             <Link to="/">
-               <Icon sx={{fontSize: "1.25rem!important"}}>{icon}</Icon>
+               <Icon sx={{fontSize: "1.25rem!important", position: "relative", top: "0.25rem"}}>{icon}</Icon>
             </Link>
             {fullRoutes.map((fullRoute: string) => (
                <Link to={fullRoute} key={fullRoute}>
@@ -135,15 +152,6 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
                </Link>
             ))}
          </MuiBreadcrumbs>
-         <MDTypography
-            pt={1}
-            textTransform="capitalize"
-            variant="h3"
-            color={light ? "white" : "dark"}
-            noWrap
-         >
-            {pageHeader}
-         </MDTypography>
       </Box>
    );
 }

src/qqq/components/horseshoe/NavBar.tsx

@@ -19,22 +19,21 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Popper, InputAdornment} from "@mui/material";
+import {Popper, InputAdornment, Box} 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 {Theme} from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
 import Toolbar from "@mui/material/Toolbar";
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect, useRef, 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, 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";
 
@@ -46,7 +45,8 @@ interface Props
    isMini?: boolean;
 }
 
-interface HistoryEntry {
+interface HistoryEntry
+{
    id: number;
    path: string;
    label: string;
@@ -65,6 +65,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const route = useLocation().pathname.split("/").slice(1);
    const navigate = useNavigate();
 
+   const {pageHeader, setDotMenuOpen} = useContext(QContext);
+
    useEffect(() =>
    {
       // Setting the navbar type
@@ -98,7 +100,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       const options = [] as any;
       history.entries.reverse().forEach((entry, index) =>
          options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
-      )
+      );
       setHistory(options);
 
       // Remove event listener on cleanup
@@ -110,7 +112,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const goToHistory = (path: string) =>
    {
       navigate(path);
-   }
+   };
 
    function buildHistoryEntries()
    {
@@ -118,7 +120,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       const options = [] as any;
       history.entries.reverse().forEach((entry, index) =>
          options.push({label: entry.label, id: index, key: index, path: entry.path, iconName: entry.iconName})
-      )
+      );
       setHistory(options);
    }
 
@@ -132,12 +134,12 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
 
    const handleAutocompleteOnChange = (event: any, value: any, reason: any, details: any) =>
    {
-      if(value)
+      if (value)
       {
          goToHistory(value.path);
       }
       setAutocompleteValue(null);
-   }
+   };
 
    const CustomPopper = function (props: any)
    {
@@ -145,8 +147,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
          {...props}
          style={{whiteSpace: "nowrap", width: "auto"}}
          placement="bottom-end"
-      />)
-   }
+      />);
+   };
 
    const renderHistory = () =>
    {
@@ -165,7 +167,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             PopperComponent={CustomPopper}
             isOptionEqualToValue={(option, value) => option.id === value.id}
             sx={recentlyViewedMenu}
-            renderInput={(params) => <TextField {...params}  label="Recently Viewed Records" InputProps={{
+            renderInput={(params) => <TextField {...params} label="Recently Viewed Records" InputProps={{
                ...params.InputProps,
                endAdornment: (
                   <InputAdornment position="end">
@@ -183,7 +185,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             )}
          />
       );
-   }
+   };
 
    // Styles for the navbar icons
    const iconsStyle = ({
@@ -209,21 +211,34 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const {pathToLabelMap} = useContext(QContext);
    const fullPathToLabel = (fullPath: string, route: string): string =>
    {
-      if(fullPath.endsWith("/"))
+      if (fullPath.endsWith("/"))
       {
          fullPath = fullPath.replace(/\/+$/, "");
       }
 
-      if(pathToLabelMap && pathToLabelMap[fullPath])
+      if (pathToLabelMap && pathToLabelMap[fullPath])
       {
          return pathToLabelMap[fullPath];
       }
 
       return (routeToLabel(route));
-   }
+   };
 
    const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]);
 
+   ///////////////////////////////////////////////////////////////////////////////////////////////
+   // set the right-half of the navbar up so that below the 'md' breakpoint, it just disappears //
+   ///////////////////////////////////////////////////////////////////////////////////////////////
+   const navbarRowRight = (theme: Theme, {isMini}: any) =>
+   {
+      return {
+         [theme.breakpoints.down("md")]: {
+            display: "none",
+         },
+         ...navbarRow(theme, isMini)
+      }
+   };
+
    return (
       <AppBar
          position={absolute ? "absolute" : navbarType}
@@ -234,25 +249,32 @@ 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}
-               >
+               <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={0} mr={-2} mt={-4}>
+               <Box sx={(theme) => navbarRowRight(theme, {isMini})}>
+                  <Box mt={"-0.25rem"} pb={"0.75rem"} pr={2} mr={-2} sx={{"& *": {cursor: "pointer !important"}}}>
                      {renderHistory()}
                   </Box>
+                  <Box mt={"-1rem"}>
+                     <IconButton size="small" disableRipple color="inherit" onClick={() => setDotMenuOpen(true)}>
+                        <Icon sx={iconsStyle} fontSize="small">search</Icon>
+                     </IconButton>
+                  </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

@@ -66,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,
 
@@ -85,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",
@@ -99,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",
    },
@@ -152,6 +152,7 @@ const navbarDesktopMenu = ({breakpoints}: Theme) => ({
 });
 
 const recentlyViewedMenu = ({breakpoints}: Theme) => ({
+   marginTop: "-0.5rem",
    "& .MuiInputLabel-root": {
       color: colors.gray.main,
       fontWeight: "500",

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

@@ -64,7 +64,7 @@ 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")]: {
@@ -74,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/misc/ErrorBoundary.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 React, {Component, ErrorInfo} from "react";
+
+interface Props
+{
+   errorElement?: React.ReactNode;
+   children: React.ReactNode;
+}
+
+interface State
+{
+   hasError: boolean;
+}
+
+/*******************************************************************************
+ ** Component that you can wrap around other components that might throw an error,
+ ** to give some isolation, rather than breaking a whole page.
+ ** Credit: https://medium.com/@bobjunior542/how-to-use-error-boundaries-in-react-js-with-typescript-ee90ec814bf1
+ *******************************************************************************/
+class ErrorBoundary extends Component<Props, State>
+{
+   /***************************************************************************
+    *
+    ***************************************************************************/
+   constructor(props: Props)
+   {
+      super(props);
+      this.state = {hasError: false};
+   }
+
+   /***************************************************************************
+    *
+    ***************************************************************************/
+   componentDidCatch(error: Error, errorInfo: ErrorInfo)
+   {
+      console.error("ErrorBoundary caught an error: ", error, errorInfo);
+      this.setState({hasError: true});
+   }
+
+   /***************************************************************************
+    *
+    ***************************************************************************/
+   render()
+   {
+      if (this.state.hasError)
+      {
+         return this.props.errorElement ?? <span>(Error)</span>;
+      }
+
+      return this.props.children;
+   }
+}
+
+export default ErrorBoundary;

src/qqq/components/misc/FieldAutoComplete.tsx

@@ -0,0 +1,206 @@
+/*
+ * 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 {Box} from "@mui/material";
+import Autocomplete, {AutocompleteRenderOptionState} from "@mui/material/Autocomplete";
+import Icon from "@mui/material/Icon";
+import TextField from "@mui/material/TextField";
+import React, {ReactNode, useState} 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[];
+   availableFieldNames?: string[];
+   variant?: "standard" | "filled" | "outlined";
+   label?: string;
+   textFieldSX?: any;
+   autocompleteSlotProps?: any;
+   hasError?: boolean;
+   noOptionsText?: string;
+}
+
+FieldAutoComplete.defaultProps =
+   {
+      defaultValue: null,
+      autoFocus: false,
+      forceOpen: null,
+      hiddenFieldNames: [],
+      availableFieldNames: [],
+      variant: "standard",
+      label: "Field",
+      textFieldSX: null,
+      autocompleteSlotProps: null,
+      hasError: false,
+      noOptionsText: "No options",
+   };
+
+function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean, hiddenFieldNames: string[], availableFieldNames: string[], selectedFieldName: 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 && fieldName != selectedFieldName)
+      {
+         continue;
+      }
+
+      if (availableFieldNames?.length && availableFieldNames.indexOf(fieldName) == -1)
+      {
+         continue;
+      }
+
+      fieldOptions.push({field: sortedFields[i], table: tableMetaData, fieldName: fieldName});
+   }
+}
+
+
+/*******************************************************************************
+ ** Component for rendering a list of field names from a table as an auto-complete.
+ *******************************************************************************/
+export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames, availableFieldNames, variant, label, textFieldSX, autocompleteSlotProps, hasError, noOptionsText}: FieldAutoCompleteProps): JSX.Element
+{
+   const [selectedFieldName, setSelectedFieldName] = useState(defaultValue ? defaultValue.fieldName : null);
+
+   const fieldOptions: any[] = [];
+   makeFieldOptionsForTable(tableMetaData, fieldOptions, false, hiddenFieldNames, availableFieldNames, selectedFieldName);
+   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, availableFieldNames, selectedFieldName);
+         }
+      }
+   }
+
+
+   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;
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function onChange(event: any, newValue: any, reason: string)
+   {
+      setSelectedFieldName(newValue ? newValue.fieldName : null);
+      handleFieldChange(event, newValue, reason);
+   }
+
+   return (
+      <Autocomplete
+         id={id}
+         renderInput={(params) =>
+         {
+            const inputProps = params.InputProps;
+            const originalEndAdornment = inputProps.endAdornment;
+            inputProps.endAdornment = <Box>
+               {hasError && <Icon color="error">error_outline</Icon>}
+               {originalEndAdornment}
+            </Box>;
+
+            return (<TextField {...params} autoFocus={autoFocus} label={label} variant={variant} sx={textFieldSX} autoComplete="off" type="search" InputProps={inputProps} />)
+         }}
+         // @ts-ignore
+         defaultValue={defaultValue}
+         options={fieldOptions}
+         onChange={onChange}
+         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={autocompleteSlotProps ?? {}}
+         noOptionsText={noOptionsText}
+         {...alsoOpen}
+      />
+
+   );
+}

src/qqq/components/misc/GotoRecordDialog.tsx

@@ -35,6 +35,7 @@ import DialogTitle from "@mui/material/DialogTitle";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
 import TextField from "@mui/material/TextField";
+import {any} from "prop-types";
 import React, {useState} from "react";
 import {useNavigate} from "react-router-dom";
 import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
@@ -61,7 +62,7 @@ const qController = Client.getInstance();
 function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
 {
    const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
-   if(mdbMetaData && mdbMetaData.gotoFieldNames)
+   if (mdbMetaData && mdbMetaData.gotoFieldNames)
    {
       return (true);
    }
@@ -71,44 +72,56 @@ function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
 
 function GotoRecordDialog(props: Props): JSX.Element
 {
-   const fields: QFieldMetaData[] = []
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // this is an array of array of fields.                                                                      //
+   // that is - each entry in the top-level array is a set of fields that can be used together to goto a record //
+   // such as (pkey), (ukey-field1,ukey-field2).                                                                //
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const options: QFieldMetaData[][] = [];
 
    let pkey = props?.tableMetaData?.fields.get(props?.tableMetaData?.primaryKeyField);
    let addedPkey = false;
    const mdbMetaData = props?.tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
-   if(mdbMetaData)
+   if (mdbMetaData)
    {
-      if(mdbMetaData.gotoFieldNames)
+      if (mdbMetaData.gotoFieldNames)
       {
-         for(let i = 0; i<mdbMetaData.gotoFieldNames.length; i++)
+         for (let i = 0; i < mdbMetaData.gotoFieldNames.length; i++)
          {
-            // todo - multi-field keys!!
-            let fieldName = mdbMetaData.gotoFieldNames[i][0];
-            let field = props.tableMetaData.fields.get(fieldName);
-            if(field)
+            const option: QFieldMetaData[] = [];
+            options.push(option);
+            for (let j = 0; j < mdbMetaData.gotoFieldNames[i].length; j++)
             {
-               fields.push(field);
-
-               if(field.name == pkey.name)
+               let fieldName = mdbMetaData.gotoFieldNames[i][j];
+               let field = props.tableMetaData.fields.get(fieldName);
+               if (field)
                {
-                  addedPkey = true;
+                  option.push(field);
+
+                  if (pkey != null && field.name == pkey.name)
+                  {
+                     addedPkey = true;
+                  }
                }
             }
          }
       }
    }
 
-   if(pkey && !addedPkey)
+   //////////////////////////////////////////////////////////////////////////////////////////
+   // if pkey wasn't in the gotoField options meta-data, go ahead add it as an option here //
+   //////////////////////////////////////////////////////////////////////////////////////////
+   if (pkey && !addedPkey)
    {
-      fields.unshift(pkey);
+      options.unshift([pkey]);
    }
 
    const makeInitialValues = () =>
    {
-      const rs = {} as {[field: string]: string};
-      fields.forEach((field) => rs[field.name] = "");
+      const rs = {} as { [field: string]: string };
+      options.forEach((option) => option.forEach((field) => rs[field.name] = ""));
       return (rs);
-   }
+   };
 
    const [error, setError] = useState("");
    const [values, setValues] = useState(makeInitialValues());
@@ -118,49 +131,91 @@ function GotoRecordDialog(props: Props): JSX.Element
    {
       values[fieldName] = newValue;
       setValues(JSON.parse(JSON.stringify(values)));
-   }
+   };
 
    const close = () =>
    {
       setError("");
       setValues(makeInitialValues());
       props.closeHandler();
-   }
+   };
 
    const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
    {
       // @ts-ignore
       const targetId: string = e.target?.id;
 
-      if(e.key == "Esc")
+      if (e.key == "Esc")
       {
-         if(props.mayClose)
+         if (props.mayClose)
          {
             close();
          }
       }
-      else if(e.key == "Enter" && targetId?.startsWith("gotoInput-"))
+      else if (e.key == "Enter" && targetId?.startsWith("gotoInput-"))
       {
-         const index = targetId?.replaceAll("gotoInput-", "");
+         const parts = targetId?.split(/-/);
+         const index = parts[1];
          document.getElementById("gotoButton-" + index).click();
       }
-   }
+   };
 
+
+   /***************************************************************************
+   ** event handler for close button
+   ***************************************************************************/
    const closeRequested = () =>
    {
-      if(props.mayClose)
+      if (props.mayClose)
       {
          close();
       }
+   };
+
+
+   /*******************************************************************************
+    ** function to say if an option's submit button should be disabled
+    *******************************************************************************/
+   const isOptionSubmitButtonDisabled = (optionIndex: number) =>
+   {
+      let anyFieldsInThisOptionHaveAValue = false;
+
+      options[optionIndex].forEach((field) =>
+      {
+         if(values[field.name])
+         {
+            anyFieldsInThisOptionHaveAValue = true;
+         }
+      })
+
+      if(!anyFieldsInThisOptionHaveAValue)
+      {
+         return (true);
+      }
+      return (false);
    }
 
-   const goClicked = async (fieldName: string) =>
+
+   /***************************************************************************
+   ** event handler for clicking an 'option's go/submit button
+   ***************************************************************************/
+   const optionGoClicked = async (optionIndex: number) =>
    {
       setError("");
-      const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, "AND", null, 10);
+
+      const criteria: QFilterCriteria[] = [];
+      const queryStringParts: string[] = [];
+      options[optionIndex].forEach((field) =>
+      {
+         criteria.push(new QFilterCriteria(field.name, QCriteriaOperator.EQUALS, [values[field.name]]))
+         queryStringParts.push(`${field.name}=${encodeURIComponent(values[field.name])}`)
+      })
+
+      const filter = new QQueryFilter(criteria, null, null, "AND", null, 10);
+
       try
       {
-         const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant)
+         const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant);
          if (queryResult.length == 0)
          {
             setError("Record not found.");
@@ -168,28 +223,42 @@ function GotoRecordDialog(props: Props): JSX.Element
          }
          else if (queryResult.length == 1)
          {
-            navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${encodeURIComponent(queryResult[0].values.get(props.tableMetaData.primaryKeyField))}`);
+            if(options[optionIndex].length == 1 && options[optionIndex][0].name == pkey?.name)
+            {
+               /////////////////////////////////////////////////
+               // navigate by pkey, if that's how we searched //
+               /////////////////////////////////////////////////
+               navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${encodeURIComponent(queryResult[0].values.get(props.tableMetaData.primaryKeyField))}`);
+            }
+            else
+            {
+               /////////////////////////////////
+               // else navigate by unique-key //
+               /////////////////////////////////
+               navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/key/?${queryStringParts.join("&")}`);
+            }
+
             close();
          }
          else
          {
-            setError("More than 1 record found...");
+            setError("More than 1 record was found...");
             setTimeout(() => setError(""), 3000);
          }
       }
-      catch(e)
+      catch (e)
       {
          // @ts-ignore
          setError(`Error: ${(e && e.message) ? e.message : e}`);
          setTimeout(() => setError(""), 6000);
       }
-   }
+   };
 
-   if(props.tableMetaData)
+   if (props.tableMetaData)
    {
-      if (fields.length == 0 && !error)
+      if (options.length == 0 && !error)
       {
-         setError("This table is not configured for this feature.")
+         setError("This table is not configured for this feature.");
       }
    }
 
@@ -200,31 +269,38 @@ function GotoRecordDialog(props: Props): JSX.Element
          <DialogContent>
             {props.subHeader}
             {
-               fields.map((field, index) =>
-                  (
-                     <Grid key={field.name} container alignItems="center" py={1}>
-                        <Grid item xs={3} textAlign="right" pr={2}>
-                           {field.label}
-                        </Grid>
-                        <Grid item xs={6}>
-                           <TextField
-                              id={`gotoInput-${index}`}
-                              autoFocus={index == 0}
-                              autoComplete="off"
-                              inputProps={{width: "100%"}}
-                              onChange={(e) => handleChange(field.name, e.target.value)}
-                              value={values[field.name]}
-                              sx={{width: "100%"}}
-                              onFocus={event => event.target.select()}
-                           />
-                        </Grid>
-                        <Grid item xs={1} pl={2}>
-                           <MDButton id={`gotoButton-${index}`} type="submit" variant="gradient" color="info" size="small" onClick={() => goClicked(field.name)} fullWidth startIcon={<Icon>double_arrow</Icon>} disabled={`${values[field.name]}`.length == 0}>
-                              Go
-                           </MDButton>
-                        </Grid>
-                     </Grid>
-                  ))
+               options.map((option, optionIndex) =>
+                  <Box key={optionIndex}>
+                     {
+                        option.map((field, index) =>
+                           (
+                              <Grid key={field.name} container alignItems="center" py={1}>
+                                 <Grid item xs={3} textAlign="right" pr={2}>
+                                    {field.label}
+                                 </Grid>
+                                 <Grid item xs={6}>
+                                    <TextField
+                                       id={`gotoInput-${optionIndex}-${index}`}
+                                       autoFocus={optionIndex == 0 && index == 0}
+                                       autoComplete="off"
+                                       inputProps={{width: "100%"}}
+                                       onChange={(e) => handleChange(field.name, e.target.value)}
+                                       value={values[field.name]}
+                                       sx={{width: "100%"}}
+                                       onFocus={event => event.target.select()}
+                                    />
+                                 </Grid>
+                                 <Grid item xs={1} pl={2}>
+                                    {
+                                       (index == option.length - 1) &&
+                                       <MDButton id={`gotoButton-${optionIndex}`} type="submit" variant="gradient" color="info" size="small" onClick={() => optionGoClicked(optionIndex)} fullWidth startIcon={<Icon>double_arrow</Icon>} disabled={isOptionSubmitButtonDisabled(optionIndex)}>Go</MDButton>
+                                    }
+                                 </Grid>
+                              </Grid>
+                           ))
+                     }
+                  </Box>
+               )
             }
             {
                error &&
@@ -244,7 +320,7 @@ function GotoRecordDialog(props: Props): JSX.Element
                : <Box>&nbsp;</Box>
          }
       </Dialog>
-   )
+   );
 }
 
 interface GotoRecordButtonProps
@@ -266,7 +342,7 @@ GotoRecordButton.defaultProps = {
 
 export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
 {
-   const [gotoIsOpen, setGotoIsOpen] = useState(props.autoOpen)
+   const [gotoIsOpen, setGotoIsOpen] = useState(props.autoOpen);
 
    function openGoto()
    {
@@ -282,7 +358,7 @@ export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
    return (
       <React.Fragment>
          {
-            props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto} >Go To...</Button>
+            props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto} sx={{whiteSpace: "nowrap"}}>Go To...</Button>
          }
          <GotoRecordDialog metaData={props.metaData} tableMetaData={props.tableMetaData} tableVariant={props.tableVariant} isOpen={gotoIsOpen} closeHandler={closeGoto} mayClose={props.mayClose} subHeader={props.subHeader} />
       </React.Fragment>

src/qqq/components/misc/HelpContent.tsx

@@ -0,0 +1,163 @@
+/*
+ * 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 ErrorBoundary from "qqq/components/misc/ErrorBoundary";
+import React, {useContext} from "react";
+import Markdown from "react-markdown";
+import QContext from "QContext";
+
+interface Props
+{
+   helpContents: null | QHelpContent | 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: null | QHelpContent | QHelpContent[], roles: string[]) =>
+{
+   return getMatchingHelpContent(nullOrSingletonOrArrayToArray(helpContents), roles) != null;
+}
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+const nullOrSingletonOrArrayToArray = (helpContents: null | QHelpContent | QHelpContent[]): QHelpContent[] =>
+{
+   let array: QHelpContent[] = [];
+   if(Array.isArray(helpContents))
+   {
+      array = helpContents;
+   }
+   else if(helpContents != null)
+   {
+      array.push(helpContents);
+   }
+   return (array);
+}
+
+
+/*******************************************************************************
+ ** 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);
+   const helpContentsArray = nullOrSingletonOrArrayToArray(helpContents);
+   let selectedHelpContent = getMatchingHelpContent(helpContentsArray, roles);
+
+   let content = null;
+   let errorContent = "Error rendering help content.";
+   if (helpHelpActive)
+   {
+      if (!selectedHelpContent)
+      {
+         selectedHelpContent = new QHelpContent({content: ""});
+      }
+      content = selectedHelpContent.content + ` [${helpContentKey ?? "?"}]`;
+      errorContent += ` [${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>}
+         <ErrorBoundary errorElement={<i>{errorContent}</i>}>
+            {formatHelpContent(content, selectedHelpContent.format)}
+         </ErrorBoundary>
+      </Box>;
+   }
+
+   return (null);
+}
+
+export default HelpContent;

src/qqq/components/misc/RecordSidebar.tsx

@@ -22,7 +22,7 @@
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import Box from "@mui/material/Box";
+import {Box} from "@mui/material";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
@@ -41,7 +41,7 @@ interface Props
 
 QRecordSidebar.defaultProps = {
    light: false,
-   stickyTop: "110px",
+   stickyTop: "1rem",
 };
 
 interface SidebarEntry
@@ -76,12 +76,12 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
 
 
    return (
-      <Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: stickyTop}}>
-         <Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
+      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "hidden", maxHeight: "calc(100vh - 2rem)"}}>
+         <Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none", overflow: "auto", height: "100%"}}>
             {
                sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
 
-                  <HashLink key={`section-link-${entry.name}`} to={`#${entry.name}`}>
+                  <Box key={`section-link-${entry.name}`} onClick={() => document.getElementById(entry.name).scrollIntoView()} sx={{cursor: "pointer"}}>
                      <Box key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
                         <MDTypography
                            variant="button"
@@ -112,7 +112,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
 
                         </MDTypography>
                      </Box>
-                  </HashLink>
+                  </Box>
                )) : null
             }
          </Box>

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,824 @@
+/*
+ * 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} 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 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 {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {useLocation, useNavigate} from "react-router-dom";
+
+interface Props
+{
+   qController: QController;
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+   currentSavedView: QRecord;
+   tableDefaultView: RecordQueryView;
+   view?: RecordQueryView;
+   viewAsJson?: string;
+   viewOnChangeCallback?: (selectedSavedViewId: number) => void;
+   loadingSavedView: boolean;
+   queryScreenUsage: QueryScreenUsage;
+}
+
+function SavedViews({qController, metaData, tableMetaData, currentSavedView, tableDefaultView, view, viewAsJson, viewOnChangeCallback, loadingSavedView, queryScreenUsage}: Props): JSX.Element
+{
+   const navigate = useNavigate();
+
+   const [savedViews, setSavedViews] = useState([] as QRecord[]);
+   const [yourSavedViews, setYourSavedViews] = useState([] as QRecord[]);
+   const [viewsSharedWithYou, setViewsSharedWithYou] = 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 NEW_REPORT_OPTION = "Create Report from Current View";
+
+   const {accentColor, accentColorLight, userId: currentUserId} = useContext(QContext);
+
+   /////////////////////////////////////////////////////////////////////////////////////////////
+   // this component is used by <RecordQuery> - but that component has different usages -     //
+   // e.g., the full-fledged query screen, but also, within other screens (e.g., a modal      //
+   // under the FilterAndColumnsSetupWidget).  So, there are some behaviors we only want when //
+   // we're on the full-fledged query screen, such as changing the URL with saved view ids.   //
+   /////////////////////////////////////////////////////////////////////////////////////////////
+   const isQueryScreen = queryScreenUsage == "queryScreen";
+
+   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);
+
+      const yourSavedViews: QRecord[] = [];
+      const viewsSharedWithYou: QRecord[] = [];
+      for (let i = 0; i < savedViews.length; i++)
+      {
+         const record = savedViews[i];
+         if (record.values.get("userId") == currentUserId)
+         {
+            yourSavedViews.push(record);
+         }
+         else
+         {
+            viewsSharedWithYou.push(record);
+         }
+      }
+      setYourSavedViews(yourSavedViews);
+      setViewsSharedWithYou(viewsSharedWithYou);
+   }
+
+
+   /*******************************************************************************
+    ** fired when a saved record is clicked from the dropdown
+    *******************************************************************************/
+   const handleSavedViewRecordOnClick = async (record: QRecord) =>
+   {
+      setSaveFilterPopupOpen(false);
+      closeSavedViewsMenu();
+      viewOnChangeCallback(record.values.get("id"));
+      if (isQueryScreen)
+      {
+         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);
+            if (isQueryScreen)
+            {
+               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;
+         case NEW_REPORT_OPTION:
+            createNewReport();
+            break;
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function createNewReport()
+   {
+      const defaultValues: { [key: string]: any } = {};
+      defaultValues.tableName = tableMetaData.name;
+
+      let filterForBackend = JSON.parse(JSON.stringify(view.queryFilter));
+      filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
+
+      defaultValues.queryFilterJson = JSON.stringify(filterForBackend);
+      defaultValues.columnsJson = JSON.stringify(view.queryColumns);
+      navigate(`${metaData.getTablePathByName("savedReport")}/create#defaultValues=${encodeURIComponent(JSON.stringify(defaultValues))}`);
+   }
+
+
+   /*******************************************************************************
+    ** 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)));
+
+            ////////////////////////////////////////////////////////////////////////////
+            // strip away incomplete filters too, just for cleaner saved view filters //
+            ////////////////////////////////////////////////////////////////////////////
+            FilterUtils.stripAwayIncompleteCriteria(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 hasSavedReportsPermission = metaData?.tables.has("savedReport");
+
+   const tooltipMaxWidth = (maxWidth: string) =>
+   {
+      return ({
+         slotProps: {
+            tooltip: {
+               sx: {
+                  maxWidth: maxWidth
+               }
+            }
+         }
+      });
+   };
+
+   const menuTooltipAttribs = {...tooltipMaxWidth("250px"), placement: "left", enterDelay: 1000} as TooltipProps;
+
+   let disabledBecauseNotOwner = false;
+   let notOwnerTooltipText = null;
+   if (currentSavedView && currentSavedView.values.get("userId") != currentUserId)
+   {
+      disabledBecauseNotOwner = true;
+      notOwnerTooltipText = "You may not save changes to this view, because you are not its owner.";
+   }
+
+   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)", minWidth: "300px"}}}
+      >
+         {
+            isQueryScreen &&
+            <MenuItem sx={{width: "300px"}} disabled style={{"opacity": "initial"}}><b>View Actions</b></MenuItem>
+         }
+         {
+            isQueryScreen && hasStorePermission &&
+            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? <>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.</>}>
+               <span>
+                  <MenuItem disabled={disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
+                     <ListItemIcon><Icon>save</Icon></ListItemIcon>
+                     {currentSavedView ? "Save..." : "Save As..."}
+                  </MenuItem>
+               </span>
+            </Tooltip>
+         }
+         {
+            isQueryScreen && hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? "Change the name for this saved view."}>
+               <span>
+                  <MenuItem disabled={currentSavedView === null || disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
+                     <ListItemIcon><Icon>edit</Icon></ListItemIcon>
+                     Rename...
+                  </MenuItem>
+               </span>
+            </Tooltip>
+         }
+         {
+            isQueryScreen && hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Save a new copy this view, with a different name, separate from the original.">
+               <span>
+                  <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
+                     <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
+                     Save As...
+                  </MenuItem>
+               </span>
+            </Tooltip>
+         }
+         {
+            isQueryScreen && hasDeletePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? "Delete this saved view."}>
+               <span>
+                  <MenuItem disabled={currentSavedView === null || disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
+                     <ListItemIcon><Icon>delete</Icon></ListItemIcon>
+                     Delete...
+                  </MenuItem>
+               </span>
+            </Tooltip>
+         }
+         {
+            isQueryScreen &&
+            <Tooltip {...menuTooltipAttribs} title="Create a new view of this table, resetting the filters and columns to their defaults.">
+               <span>
+                  <MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
+                     <ListItemIcon><Icon>monitor</Icon></ListItemIcon>
+                     New View
+                  </MenuItem>
+               </span>
+            </Tooltip>
+         }
+         {
+            isQueryScreen && hasSavedReportsPermission &&
+            <Tooltip {...menuTooltipAttribs} title="Create a new Saved Report using your current view of this table as a starting point.">
+               <span>
+                  <MenuItem onClick={() => handleDropdownOptionClick(NEW_REPORT_OPTION)}>
+                     <ListItemIcon><Icon>article</Icon></ListItemIcon>
+                     Create Report from Current View
+                  </MenuItem>
+               </span>
+            </Tooltip>
+         }
+         {
+            isQueryScreen && <Divider />
+         }
+         <MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Views</b></MenuItem>
+         {
+            yourSavedViews && yourSavedViews.length > 0 ? (
+               yourSavedViews.map((record: QRecord, index: number) =>
+                  <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedViewRecordOnClick(record)}>
+                     {record.values.get("label")}
+                  </MenuItem>
+               )
+            ) : (
+               <MenuItem disabled sx={{opacity: "1 !important"}}>
+                  <i>You do not have any saved views for this table.</i>
+               </MenuItem>
+            )
+         }
+         <MenuItem disabled style={{"opacity": "initial"}}><b>Views Shared with you</b></MenuItem>
+         {
+            viewsSharedWithYou && viewsSharedWithYou.length > 0 ? (
+               viewsSharedWithYou.map((record: QRecord, index: number) =>
+                  <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedViewRecordOnClick(record)}>
+                     {record.values.get("label")}
+                  </MenuItem>
+               )
+            ) : (
+               <MenuItem disabled sx={{opacity: "1 !important"}}>
+                  <i>You do not have any views shared with you 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 && <>
+                        {
+                           isQueryScreen && <>
+                              <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>
+                     </>
+                  }
+                  {
+                     isQueryScreen && 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>
+                           {
+                              notOwnerTooltipText && <i>{notOwnerTooltipText}</i>
+                           }
+                        </>}>
+                           <Box display="inline" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>{viewDiffs.length} Unsaved Change{viewDiffs.length == 1 ? "" : "s"}</Box>
+                        </Tooltip>
+
+                        {disabledBecauseNotOwner ? <>&nbsp;&nbsp;</> : <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>
+                     </>
+                  }
+                  {
+                     !isQueryScreen && currentSavedView &&
+                     <Box>
+                        <Box display="inline-block" fontSize="0.875rem" fontWeight="500" sx={{position: "relative", top: "-1px"}}>
+                           {currentSavedView.values.get("label")}
+                        </Box>
+
+                        {
+                           viewIsModified &&
+                           <>
+                              <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
+                                 <b>Changes</b>
+                                 <ul style={{padding: "0.5rem 1rem"}}>
+                                    {
+                                       viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
+                                    }
+                                 </ul>
+                              </>}>
+                                 <Box display="inline" ml="0.25rem" mr="0.25rem" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>with {viewDiffs.length} Change{viewDiffs.length == 1 ? "" : "s"}</Box>
+                              </Tooltip>
+                              <Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset Changes</Button>
+                           </>
+                        }
+
+                        {/* vertical rule */}
+                        <Box display="inline-block" ml="0.25rem" 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 to New View</Button>
+                     </Box>
+                  }
+               </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/query/AdvancedQueryPreview.tsx

@@ -0,0 +1,153 @@
+/*
+ * 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 Box from "@mui/material/Box";
+import colors from "qqq/assets/theme/base/colors";
+import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
+import XIcon from "qqq/components/query/XIcon";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import React, {useState} from "react";
+
+interface AdvancedQueryPreviewProps
+{
+   tableMetaData: QTableMetaData;
+   queryFilter: QQueryFilter;
+   isEditable: boolean;
+   isQueryTooComplex: boolean;
+   removeCriteriaByIndexCallback: (index: number) => void;
+}
+
+/*******************************************************************************
+ ** Box shown on query screen (and more??) to preview what a query looks like,
+ ** as an "advanced" style/precursor-to-writing-your-own-query thing.
+ *******************************************************************************/
+export default function AdvancedQueryPreview({tableMetaData, queryFilter, isEditable, isQueryTooComplex, removeCriteriaByIndexCallback}: AdvancedQueryPreviewProps): JSX.Element
+{
+   const [mouseOverElement, setMouseOverElement] = useState(null as string);
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOverElement(name: string)
+   {
+      setMouseOverElement(name);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOutElement()
+   {
+      setMouseOverElement(null);
+   }
+
+
+
+   /*******************************************************************************
+    ** format the current query as a string for showing on-screen as a preview.
+    *******************************************************************************/
+   const queryToAdvancedString = (thisQueryFilter: QQueryFilter) =>
+   {
+      if (queryFilter == null || !queryFilter.criteria)
+      {
+         return (<span></span>);
+      }
+
+      let counter = 0;
+
+      return (
+         <React.Fragment>
+            {thisQueryFilter.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"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
+                        {FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
+                        {isEditable && !isQueryTooComplex && (
+                           mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}>
+                              <XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndexCallback(i)} /></span>
+                        )}
+                        {counter > 1 && i == thisQueryFilter.criteria?.length - 1 && thisQueryFilter.subFilters?.length > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
+                     </span>
+                  );
+               }
+               else
+               {
+                  return (<span />);
+               }
+            })}
+
+            {thisQueryFilter.subFilters?.length > 0 && (thisQueryFilter.subFilters.map((filter: QQueryFilter, j) =>
+            {
+               return (
+                  <React.Fragment key={j}>
+                     {j > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span></span>}
+                     <span style={{display: "flex", marginRight: "0.20rem"}}>(</span>
+                     {queryToAdvancedString(filter)}
+                     <span style={{display: "flex", marginRight: "0.20rem"}}>)</span>
+                  </React.Fragment>
+               );
+            }))}
+         </React.Fragment>
+      );
+   };
+
+   const moreSX = isEditable ?
+      {
+         borderTop: `1px solid ${colors.grayLines.main}`,
+         boxShadow: "inset 0px 0px 4px 2px #EFEFED",
+         borderRadius: "0 0 0.75rem 0.75rem",
+      } :
+      {
+         borderRadius: "0.75rem",
+         border: `1px solid ${colors.grayLines.main}`,
+      }
+
+   return (
+      <Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
+         {
+            <Box
+               className="advancedQueryString"
+               display="inline-block"
+               width="100%"
+               sx={{fontSize: "1rem", background: "#FFFFFF"}}
+               minHeight={"2.5rem"}
+               p={"0.5rem"}
+               pb={"0.125rem"}
+               {...moreSX}
+            >
+               <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
+                  {queryToAdvancedString(queryFilter)}
+               </Box>
+            </Box>
+         }
+      </Box>
+   )
+}

src/qqq/components/query/AssignFilterVariable.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import Tooltip from "@mui/material/Tooltip";
+import CriteriaDateField from "qqq/components/query/CriteriaDateField";
+import React, {SyntheticEvent, useState} from "react";
+
+
+export type Expression = FilterVariableExpression;
+
+
+interface AssignFilterButtonProps
+{
+   valueIndex: number;
+   field: QFieldMetaData;
+   valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
+}
+
+CriteriaDateField.defaultProps = {
+   valueIndex: 0,
+   label: "Value",
+   idPrefix: "value-"
+};
+
+export default function AssignFilterVariable({valueIndex, field, valueChangeHandler}: AssignFilterButtonProps): JSX.Element
+{
+   const [isValueAVariable, setIsValueAVariable] = useState(false);
+
+   const handleVariableButtonOnClick = () =>
+   {
+      setIsValueAVariable(!isValueAVariable);
+      const expression = new FilterVariableExpression({fieldName: field.name, valueIndex: valueIndex});
+      valueChangeHandler(null, valueIndex, expression);
+   };
+
+   return <Box display="flex" alignItems="flex-end">
+      <Box>
+         <Tooltip title={`Use a variable as the value for the ${field.label} field`} placement="bottom">
+            <Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={handleVariableButtonOnClick}>functions</Icon>
+         </Tooltip>
+      </Box>
+   </Box>;
+}
+

src/qqq/components/query/BasicAndAdvancedQueryControls.tsx

@@ -0,0 +1,832 @@
+/*
+ * 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 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 ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import Tooltip from "@mui/material/Tooltip";
+import {GridApiPro} from "@mui/x-data-grid-pro/models/gridApiPro";
+import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
+import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+import AdvancedQueryPreview from "qqq/components/query/AdvancedQueryPreview";
+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 {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+import React, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
+
+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;
+
+   queryScreenUsage: QueryScreenUsage;
+
+   allowVariables?: boolean;
+
+   mode: string;
+   setMode: (mode: string) => void;
+}
+
+let debounceTimeout: string | number | NodeJS.Timeout;
+
+
+/*******************************************************************************
+ ** function to generate an element that says how a filter is sorted.
+ *******************************************************************************/
+export function getCurrentSortIndicator(queryFilter: QQueryFilter, tableMetaData: QTableMetaData, toggleSortDirection: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void)
+{
+   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}`;
+      return <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
+   }
+   else
+   {
+      return <>Sort...</>;
+   }
+}
+
+/*******************************************************************************
+ ** 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, queryScreenUsage} = 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);
+
+   /////////////////////////////////////////////////
+   // temporary, until we implement sub-filtering //
+   /////////////////////////////////////////////////
+   const [isQueryTooComplex, setIsQueryTooComplex] = useState(false);
+
+   //////////////////////////////////////////////////////////////////////////////////
+   // 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>) =>
+   {
+      if (!isQueryTooComplex)
+      {
+         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);
+   };
+
+
+   /*******************************************************************************
+    ** 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;
+      }
+
+      //////////////////////////////////////////////
+      // set a flag if the query is 'too complex' //
+      //////////////////////////////////////////////
+      setIsQueryTooComplex(queryFilter.subFilters?.length > 0);
+
+      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++;
+         }
+      }
+
+      /////////////////////////////////////////////////////////////
+      // recursively add any children filters to the total count //
+      /////////////////////////////////////////////////////////////
+      for (let i = 0; i < queryFilter.subFilters?.length; i++)
+      {
+         count += countValidCriteria(queryFilter.subFilters[i]);
+      }
+
+      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 = getCurrentSortIndicator(queryFilter, tableMetaData, toggleSortDirection);
+
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // 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, canFilterWorkAsAdvanced, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
+   let reasonWhyBasicIsDisabled = null;
+   if (canFilterWorkAsAdvanced && 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>
+      </>;
+   }
+   if (isQueryTooComplex)
+   {
+      reasonWhyBasicIsDisabled = <>
+         Your current Filter is too complex to modify because it contains Sub-filters.
+      </>;
+   }
+
+   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}
+                                 allowVariables={props.allowVariables}
+                                 fullFieldName={fieldName}
+                                 tableMetaData={tableMetaData}
+                                 updateCriteria={updateQuickCriteria}
+                                 criteriaParam={getQuickCriteriaParam(fieldName)}
+                                 fieldMetaData={field}
+                                 defaultOperator={defaultOperator}
+                                 queryScreenUsage={queryScreenUsage}
+                                 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}
+                                 allowVariables={props.allowVariables}
+                                 defaultOperator={defaultOperator}
+                                 queryScreenUsage={queryScreenUsage}
+                                 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>
+                  <AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={queryFilter} isEditable={true} isQueryTooComplex={isQueryTooComplex} removeCriteriaByIndexCallback={removeCriteriaByIndex} />
+               </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/CriteriaDateField.tsx

@@ -21,6 +21,7 @@
 
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
 import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
 import {NowWithOffsetExpression, NowWithOffsetOperator, NowWithOffsetUnit} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
 import {ThisOrLastPeriodExpression, ThisOrLastPeriodOperator, ThisOrLastPeriodUnit} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
@@ -34,14 +35,14 @@ import MenuItem from "@mui/material/MenuItem";
 import {styled} from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
 import Tooltip, {tooltipClasses, TooltipProps} from "@mui/material/Tooltip";
-import React, {SyntheticEvent, useEffect, useReducer, useState} from "react";
 import AdvancedDateTimeFilterValues from "qqq/components/query/AdvancedDateTimeFilterValues";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
 import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
 import {makeTextField} from "qqq/components/query/FilterCriteriaRowValues";
+import React, {SyntheticEvent, useReducer, useState} from "react";
 
 
-export type Expression = NowWithOffsetExpression | ThisOrLastPeriodExpression | NowExpression;
+export type Expression = NowWithOffsetExpression | ThisOrLastPeriodExpression | NowExpression | FilterVariableExpression;
 
 
 interface CriteriaDateFieldProps
@@ -52,6 +53,7 @@ interface CriteriaDateFieldProps
    field: QFieldMetaData;
    criteria: QFilterCriteriaWithId;
    valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
+   allowVariables?: boolean;
 }
 
 CriteriaDateField.defaultProps = {
@@ -60,19 +62,30 @@ CriteriaDateField.defaultProps = {
    idPrefix: "value-"
 };
 
-export default function CriteriaDateField({valueIndex, label, idPrefix, field, criteria, valueChangeHandler}: CriteriaDateFieldProps): JSX.Element
+export const NoWrapTooltip = styled(({className, children, ...props}: TooltipProps) => (
+   <Tooltip {...props} classes={{popper: className}}>{children}</Tooltip>
+))({
+   [`& .${tooltipClasses.tooltip}`]: {
+      whiteSpace: "nowrap"
+   },
+});
+
+export default function CriteriaDateField({valueIndex, label, idPrefix, field, criteria, valueChangeHandler, allowVariables}: CriteriaDateFieldProps): JSX.Element
 {
+   const [relativeDateTimeOpen, setRelativeDateTimeOpen] = useState(false);
    const [relativeDateTimeMenuAnchorElement, setRelativeDateTimeMenuAnchorElement] = useState(null);
-   const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false)
+   const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    const openRelativeDateTimeMenu = (event: React.MouseEvent<HTMLElement>) =>
    {
+      setRelativeDateTimeOpen(true);
       setRelativeDateTimeMenuAnchorElement(event.currentTarget);
    };
 
    const closeRelativeDateTimeMenu = () =>
    {
+      setRelativeDateTimeOpen(false);
       setRelativeDateTimeMenuAnchorElement(null);
    };
 
@@ -137,20 +150,12 @@ export default function CriteriaDateField({valueIndex, label, idPrefix, field, c
    const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
    const currentExpression = isExpression ? criteria.values[valueIndex] : null;
 
-   const NoWrapTooltip = styled(({className, children, ...props}: TooltipProps) => (
-      <Tooltip {...props} classes={{popper: className}}>{children}</Tooltip>
-   ))({
-      [`& .${tooltipClasses.tooltip}`]: {
-         whiteSpace: "nowrap"
-      },
-   });
-
    const tooltipMenuItemFromExpression = (valueIndex: number, tooltipPlacement: "left" | "right", expression: Expression) =>
    {
       let startOfPrefix = "";
-      if(expression.type == "ThisOrLastPeriod")
+      if (expression.type == "ThisOrLastPeriod")
       {
-         if(field.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
+         if (field.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
          {
             startOfPrefix = "start of ";
          }
@@ -191,84 +196,120 @@ export default function CriteriaDateField({valueIndex, label, idPrefix, field, c
       setTimeout(() => setForceAdvancedDateTimeDialogOpen(false), 100);
    }
 
+   const makeFilterVariableTextField = (expression: FilterVariableExpression, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
+   {
+      const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
+      {
+         valueChangeHandler(event, index, "");
+         document.getElementById(`${idPrefix}${criteria.id}`).focus();
+      };
+
+      const inputProps2: any = {};
+      inputProps2.endAdornment = (
+         <InputAdornment position="end">
+            <IconButton sx={{visibility: expression ? "visible" : "hidden"}} onClick={(event) => clearValue(event, valueIndex)}>
+               <Icon>closer</Icon>
+            </IconButton>
+         </InputAdornment>
+      );
+
+      return <NoWrapTooltip title={<EvaluatedExpression field={field} expression={expression} />} placement="bottom" enterDelay={1000} sx={{marginLeft: "-75px !important", marginTop: "-8px !important"}}><TextField
+         id={`${idPrefix}${criteria.id}`}
+         label={label}
+         variant="standard"
+         autoComplete="off"
+         InputProps={{disabled: true, readOnly: true, unselectable: "off", ...inputProps2}}
+         InputLabelProps={{shrink: true}}
+         value="${VARIABLE}"
+         fullWidth
+      /></NoWrapTooltip>;
+   };
+
+
    return <Box display="flex" alignItems="flex-end">
       {
-         isExpression ? makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
-            : makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix)
+         isExpression ?
+            currentExpression?.type == "FilterVariableExpression" ? (
+               makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
+            ) : (
+               makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
+            )
+            : makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix, allowVariables)
       }
-      <Box>
-         <Tooltip title={`Choose a common relative ${field.type == QFieldType.DATE ? "date" : "date-time"} expression`} placement="bottom">
-            <Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
-         </Tooltip>
-         <Menu
-            open={relativeDateTimeMenuAnchorElement}
-            anchorEl={relativeDateTimeMenuAnchorElement}
-            transformOrigin={{horizontal: "left", vertical: "top"}}
-            onClose={closeRelativeDateTimeMenu}
-         >
-            {
-               field.type == QFieldType.DATE ?
-                  <Box display="flex">
-                     <Box>
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
-                        <Divider />
-                        <Tooltip title="Define a custom expression" placement="left">
-                           <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
-                        </Tooltip>
+      {
+         (!isExpression || currentExpression?.type != "FilterVariableExpression") && (
+            <><Box>
+               <Tooltip title={`Choose a common relative ${field.type == QFieldType.DATE ? "date" : "date-time"} expression`} placement="bottom">
+                  <Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
+               </Tooltip>
+               <Menu
+                  open={relativeDateTimeOpen}
+                  anchorEl={relativeDateTimeMenuAnchorElement}
+                  transformOrigin={{horizontal: "left", vertical: "top"}}
+                  onClose={closeRelativeDateTimeMenu}
+               >
+                  {field.type == QFieldType.DATE ?
+                     <Box display="flex">
+                        <Box>
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
+                           <Divider />
+                           <Tooltip title="Define a custom expression" placement="left">
+                              <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
+                           </Tooltip>
+                        </Box>
+                        <Box>
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
+                        </Box>
                      </Box>
-                     <Box>
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
-                     </Box>
-                  </Box>
-                  :
-                  <Box display="flex">
-                     <Box>
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "HOURS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 12, "HOURS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 24, "HOURS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
-                        <Divider />
-                        <Tooltip title="Define a custom expression" placement="left">
-                           <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
-                        </Tooltip>
-                     </Box>
-                     <Box>
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newNowExpression())}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "HOURS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "HOURS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
-                     </Box>
-                  </Box>
-            }
-         </Menu>
-      </Box>
-      <Box>
-         <AdvancedDateTimeFilterValues type={field.type} expression={currentExpression} onSave={(expression: any) => saveNewDateTimeExpression(valueIndex, expression)} forcedOpen={forceAdvancedDateTimeDialogOpen} />
-      </Box>
+                     :
+                     <Box display="flex">
+                        <Box>
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "HOURS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 12, "HOURS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 24, "HOURS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
+                           <Divider />
+                           <Tooltip title="Define a custom expression" placement="left">
+                              <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
+                           </Tooltip>
+                        </Box>
+                        <Box>
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newNowExpression())}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "HOURS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "HOURS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
+                        </Box>
+                     </Box>}
+               </Menu>
+            </Box><Box>
+               <AdvancedDateTimeFilterValues type={field.type} expression={currentExpression} onSave={(expression: any) => saveNewDateTimeExpression(valueIndex, expression)} forcedOpen={forceAdvancedDateTimeDialogOpen} />
+            </Box></>
+         )
+      }
    </Box>;
 }
 

src/qqq/components/query/CustomColumnsPanel.tsx

@@ -21,7 +21,9 @@
 
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {Box, FormControlLabel, FormGroup} from "@mui/material";
+
+import {FormControlLabel, FormGroup} from "@mui/material";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
@@ -56,7 +58,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
       const someRef = createRef();
 
       const textRef = useRef(null);
-      const [didInitialFocus, setDidInitialFocus] = useState(false)
+      const [didInitialFocus, setDidInitialFocus] = useState(false);
 
       const [openGroups, setOpenGroups] = useState(props.initialOpenedGroups || {});
       const openGroupsBecauseOfFilter = {} as { [name: string]: boolean };
@@ -71,9 +73,9 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
 
       console.log(`Open groups: ${JSON.stringify(openGroups)}`);
 
-      if(!didInitialFocus)
+      if (!didInitialFocus)
       {
-         if(textRef.current)
+         if (textRef.current)
          {
             textRef.current.select();
             setDidInitialFocus(true);
@@ -189,11 +191,11 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
       ///////////////////////////////////////////////////////////////////////////////////////////////////////
       // always sort columns by label.  note, in future may offer different sorts - here's where to do it. //
       ///////////////////////////////////////////////////////////////////////////////////////////////////////
-      const sortedColumns = [... columns];
+      const sortedColumns = [...columns];
       sortedColumns.sort((a, b): number =>
       {
          return a.headerName.localeCompare(b.headerName);
-      })
+      });
 
       for (let i = 0; i < sortedColumns.length; i++)
       {
@@ -361,7 +363,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
       const changeFilterText = (newValue: string) =>
       {
          setFilterText(newValue);
-         props.filterTextChanger(newValue)
+         props.filterTextChanger(newValue);
       };
 
       const filterTextChanged = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>

src/qqq/components/query/CustomFilterPanel.tsx

@@ -28,8 +28,8 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button/Button";
 import Icon from "@mui/material/Icon/Icon";
 import {GridFilterPanelProps, GridSlotsComponentsProps} from "@mui/x-data-grid-pro";
-import React, {forwardRef, useReducer} from "react";
 import {FilterCriteriaRow, getDefaultCriteriaValue} from "qqq/components/query/FilterCriteriaRow";
+import React, {forwardRef, useReducer} from "react";
 
 
 declare module "@mui/x-data-grid"
@@ -49,7 +49,7 @@ declare module "@mui/x-data-grid"
 
 export class QFilterCriteriaWithId extends QFilterCriteria
 {
-   id: number
+   id: number;
 }
 
 
@@ -62,6 +62,7 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
       const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
       const queryFilter = props.queryFilter;
+
       // console.log(`CustomFilterPanel: filter: ${JSON.stringify(queryFilter)}`);
 
       function focusLastField()
@@ -124,7 +125,7 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
          }
       }
 
-      if(queryFilter.criteria.length == 1 && !queryFilter.criteria[0].fieldName)
+      if (queryFilter.criteria.length == 1 && !queryFilter.criteria[0].fieldName)
       {
          focusLastField();
       }
@@ -142,7 +143,7 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
       {
          queryFilter.criteria[index] = newCriteria;
 
-         clearTimeout(debounceTimeout)
+         clearTimeout(debounceTimeout);
          debounceTimeout = setTimeout(() => props.updateFilter(queryFilter), needDebounce ? 500 : 1);
 
          forceUpdate();
@@ -178,6 +179,8 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
                            updateCriteria={(newCriteria, needDebounce) => updateCriteria(newCriteria, index, needDebounce)}
                            removeCriteria={() => removeCriteria(index)}
                            updateBooleanOperator={(newValue) => updateBooleanOperator(newValue)}
+                           allowVariables={props.allowVariables}
+                           queryScreenUsage={props.queryScreenUsage}
                         />
                         {/*JSON.stringify(criteria)*/}
                      </Box>

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/EvaluatedExpression.tsx

@@ -21,9 +21,9 @@
 
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-import React, {useEffect, useState} from "react";
 import {Expression} from "qqq/components/query/CriteriaDateField";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useEffect, useState} from "react";
 
 /*******************************************************************************
  ** Helper component to show value inside tooltips that ticks up every second.
@@ -57,6 +57,11 @@ const HOUR_MS = 60 * 60 * 1000;
 const DAY_MS = 24 * 60 * 60 * 1000;
 const evaluateExpression = (time: Date, field: QFieldMetaData, expression: Expression): string =>
 {
+   if (expression.type == "FilterVariableExpression")
+   {
+      return (expression.toString());
+   }
+
    let rs: Date = null;
    if (expression.type == "NowWithOffset")
    {

src/qqq/components/query/ExportMenuItem.tsx

@@ -0,0 +1,136 @@
+/*
+ * 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 QContext from "QContext";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext} from "react";
+
+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;
+
+   const {recordAnalytics} = useContext(QContext);
+
+   return (
+      <MenuItem
+         disabled={totalRecords === 0}
+         onClick={() =>
+         {
+            recordAnalytics({category: "tableEvents", action: "export", label: tableMetaData.label});
+
+            ///////////////////////////////////////////////////////////////////////////////
+            // 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}" >
+                        <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";
@@ -33,9 +33,11 @@ import MenuItem from "@mui/material/MenuItem";
 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 {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import React, {ReactNode, SyntheticEvent, useState} from "react";
 
 
 export enum ValueMode
@@ -52,6 +54,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;
@@ -161,7 +184,7 @@ export const getOperatorOptions = (tableMetaData: QTableMetaData, fieldName: str
    }
 
    return (operatorOptions);
-}
+};
 
 
 interface FilterCriteriaRowProps
@@ -175,47 +198,82 @@ interface FilterCriteriaRowProps
    updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean) => void;
    removeCriteria: () => void;
    updateBooleanOperator: (newValue: string) => void;
+   queryScreenUsage?: QueryScreenUsage;
+   allowVariables?: boolean;
 }
 
-FilterCriteriaRow.defaultProps = {};
+FilterCriteriaRow.defaultProps =
+   {};
 
-function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean)
+export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue?: OperatorOption): { criteriaIsValid: boolean, criteriaStatusTooltip: string }
 {
-   const sortedFields = [...tableMetaData.fields.values()].sort((a, b) => a.label.localeCompare(b.label));
-   for (let i = 0; i < sortedFields.length; i++)
+   let criteriaIsValid = true;
+   let criteriaStatusTooltip = "This condition is fully defined and is part of your filter.";
+
+   function isNotSet(value: any)
    {
-      const fieldName = isJoinTable ? `${tableMetaData.name}.${sortedFields[i].name}` : sortedFields[i].name;
-      fieldOptions.push({field: sortedFields[i], table: tableMetaData, fieldName: fieldName});
+      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
+export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator, queryScreenUsage, allowVariables}: FilterCriteriaRowProps): JSX.Element
 {
    // console.log(`FilterCriteriaRow: criteria: ${JSON.stringify(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 //
@@ -228,7 +286,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
    let defaultFieldValue;
    let field = null;
    let fieldTable = null;
-   if(criteria && criteria.fieldName)
+   if (criteria && criteria.fieldName)
    {
       [field, fieldTable] = FilterUtils.getField(tableMetaData, criteria.fieldName);
       if (field && fieldTable)
@@ -247,9 +305,9 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
 
          let newOperatorSelectedValue = operatorOptions.filter(option =>
          {
-            if(option.value == criteria.operator)
+            if (option.value == criteria.operator)
             {
-               if(option.implicitValues)
+               if (option.implicitValues)
                {
                   return (JSON.stringify(option.implicitValues) == JSON.stringify(criteria.values));
                }
@@ -260,7 +318,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
             }
             return (false);
          })[0];
-         if(newOperatorSelectedValue?.label !== operatorSelectedValue?.label)
+         if (newOperatorSelectedValue?.label !== operatorSelectedValue?.label)
          {
             setOperatorSelectedValue(newOperatorSelectedValue);
             setOperatorInputValue(newOperatorSelectedValue?.label);
@@ -323,15 +381,33 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
    {
       criteria.operator = newValue ? newValue.value : null;
 
-      if(newValue)
+      if (newValue)
       {
          setOperatorSelectedValue(newValue);
          setOperatorInputValue(newValue.label);
 
-         if(newValue.implicitValues)
+         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
       {
@@ -350,12 +426,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
       // @ts-ignore
       const value = newValue !== undefined ? newValue : event ? event.target.value : null;
 
-      if(!criteria.values)
+      if (!criteria.values)
       {
          criteria.values = [];
       }
 
-      if(valueIndex == "all")
+      if (valueIndex == "all")
       {
          criteria.values = value;
       }
@@ -383,111 +459,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 +486,12 @@ 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}
+               autocompleteSlotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
             />
          </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}} />)}
@@ -544,10 +516,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
                field={field}
                table={fieldTable}
                valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
+               queryScreenUsage={queryScreenUsage}
+               allowVariables={allowVariables}
             />
          </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

@@ -23,19 +23,25 @@
 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 {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
 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 InputAdornment from "@mui/material/InputAdornment/InputAdornment";
 import TextField from "@mui/material/TextField";
-import React, {SyntheticEvent, useReducer} from "react";
+import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
-import CriteriaDateField from "qqq/components/query/CriteriaDateField";
+import AssignFilterVariable from "qqq/components/query/AssignFilterVariable";
+import CriteriaDateField, {NoWrapTooltip} from "qqq/components/query/CriteriaDateField";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
+import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
 import FilterCriteriaPaster from "qqq/components/query/FilterCriteriaPaster";
 import {OperatorOption, ValueMode} from "qqq/components/query/FilterCriteriaRow";
+import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {SyntheticEvent, useReducer} from "react";
+import {flushSync} from "react-dom";
 
 interface Props
 {
@@ -44,10 +50,20 @@ interface Props
    field: QFieldMetaData;
    table: QTableMetaData;
    valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
+   initiallyOpenMultiValuePvs?: boolean;
+   queryScreenUsage?: QueryScreenUsage;
+   allowVariables?: boolean;
 }
 
-FilterCriteriaRowValues.defaultProps = {};
+FilterCriteriaRowValues.defaultProps =
+   {
+      initiallyOpenMultiValuePvs: false
+   };
 
+
+/***************************************************************************
+ * get the type to use for an <input> from a QFieldMetaData
+ ***************************************************************************/
 export const getTypeForTextField = (field: QFieldMetaData): string =>
 {
    let type = "search";
@@ -68,8 +84,15 @@ export const getTypeForTextField = (field: QFieldMetaData): string =>
    return (type);
 };
 
-export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
+
+/***************************************************************************
+ * Make an <input type=text> (actually, might be a different type, but that's
+ * the gist of it), for a field.
+ ***************************************************************************/
+export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-", allowVariables = false) =>
 {
+   const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
+   const inputId = `${idPrefix}${criteria.id}`;
    let type = getTypeForTextField(field);
    const inputLabelProps: any = {};
 
@@ -84,12 +107,70 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       value = ValueUtils.formatDateTimeValueForForm(value);
    }
 
+   /***************************************************************************
+    * Event handler for the clear 'x'.
+    ***************************************************************************/
    const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
    {
       valueChangeHandler(event, index, "");
-      document.getElementById(`${idPrefix}${criteria.id}`).focus();
+      document.getElementById(inputId).focus();
    };
 
+
+   /*******************************************************************************
+    ** Event handler for key-down events - specifically added here, to stop pressing
+    ** 'tab' in a date or date-time from closing the quick-filter...
+    *******************************************************************************/
+   const handleKeyDown = (e: any) =>
+   {
+      if (field.type == QFieldType.DATE || field.type == QFieldType.DATE_TIME)
+      {
+         if (e.code == "Tab")
+         {
+            console.log("Tab on date or date-time - don't close me, just move to the next sub-field!...");
+            e.stopPropagation();
+         }
+      }
+   };
+
+
+   /***************************************************************************
+    * make a version of the text field for when the criteria's value is set to
+    * be a "variable"
+    ***************************************************************************/
+   const makeFilterVariableTextField = (expression: FilterVariableExpression, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
+   {
+      const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
+      {
+         valueChangeHandler(event, index, "");
+         document.getElementById(`${idPrefix}${criteria.id}`).focus();
+      };
+
+      const inputProps2: any = {};
+      inputProps2.endAdornment = (
+         <InputAdornment position="end">
+            <IconButton sx={{visibility: expression ? "visible" : "hidden"}} onClick={(event) => clearValue(event, valueIndex)}>
+               <Icon>closer</Icon>
+            </IconButton>
+         </InputAdornment>
+      );
+
+      return <NoWrapTooltip title={<EvaluatedExpression field={field} expression={expression} />} placement="bottom" enterDelay={1000} sx={{marginLeft: "-75px !important", marginTop: "-8px !important"}}><TextField
+         id={`${idPrefix}${criteria.id}`}
+         label={label}
+         variant="standard"
+         autoComplete="off"
+         InputProps={{disabled: true, readOnly: true, unselectable: "off", ...inputProps2}}
+         InputLabelProps={{shrink: true}}
+         value="${VARIABLE}"
+         fullWidth
+      /></NoWrapTooltip>;
+   };
+
+
+   ///////////////////////////////////////////////////////////////////////////
+   // set up an 'x' icon as an end-adornment, to clear value from the field //
+   ///////////////////////////////////////////////////////////////////////////
    const inputProps: any = {};
    inputProps.endAdornment = (
       <InputAdornment position="end">
@@ -99,29 +180,99 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       </InputAdornment>
    );
 
-   return <TextField
-      id={`${idPrefix}${criteria.id}`}
-      label={label}
-      variant="standard"
-      autoComplete="off"
-      type={type}
-      onChange={(event) => valueChangeHandler(event, valueIndex)}
-      value={value}
-      InputLabelProps={inputLabelProps}
-      InputProps={inputProps}
-      fullWidth
-   />;
+
+   /***************************************************************************
+    * onChange event handler.  deals with, if the field has a to upper/lower
+    * case rule on it, to apply that transform, and adjust the cursor.
+    * See:  https://giacomocerquone.com/blog/keep-input-cursor-still
+    ***************************************************************************/
+   function onChange(event: any)
+   {
+      const beforeStart = event.target.selectionStart;
+      const beforeEnd = event.target.selectionEnd;
+
+      let isToUpperCase = DynamicFormUtils.isToUpperCase(field);
+      let isToLowerCase = DynamicFormUtils.isToLowerCase(field);
+
+      if (isToUpperCase || isToLowerCase)
+      {
+         flushSync(() =>
+         {
+            let newValue = event.currentTarget.value;
+
+            if (isToUpperCase)
+            {
+               newValue = newValue.toUpperCase();
+            }
+            if (isToLowerCase)
+            {
+               newValue = newValue.toLowerCase();
+            }
+
+            event.currentTarget.value = newValue;
+         });
+
+         const input = document.getElementById(inputId);
+         if (input)
+         {
+            // @ts-ignore
+            input.setSelectionRange(beforeStart, beforeEnd);
+         }
+      }
+
+      valueChangeHandler(event, valueIndex);
+   }
+
+   ////////////////////////
+   // return the element //
+   ////////////////////////
+   return <Box sx={{margin: 0, padding: 0, display: "flex"}}>
+      {
+         isExpression ? (
+            makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
+         ) : (
+            <TextField
+               id={inputId}
+               label={label}
+               variant="standard"
+               autoComplete="off"
+               type={type}
+               onChange={onChange}
+               onKeyDown={handleKeyDown}
+               value={value}
+               InputLabelProps={inputLabelProps}
+               InputProps={inputProps}
+               fullWidth
+               autoFocus={true}
+            />
+         )
+      }
+      {
+         allowVariables && (
+            <AssignFilterVariable field={field} valueChangeHandler={valueChangeHandler} valueIndex={valueIndex} />
+         )
+      }
+   </Box>;
 };
 
-function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler}: Props): JSX.Element
+
+/***************************************************************************
+ * Component that is the "values" portion of a FilterCriteria Row in the
+ * advanced query filter editor.
+ ***************************************************************************/
+function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs, queryScreenUsage, allowVariables}: Props): JSX.Element
 {
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    if (!operatorOption)
    {
-      return <br />;
+      return null;
    }
 
+
+   /***************************************************************************
+    * Callback for the Save button from the paste-values modal
+    ***************************************************************************/
    function saveNewPasterValues(newValues: any[])
    {
       if (criteria.values)
@@ -145,33 +296,38 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
       forceUpdate();
    }
 
+   const isExpression = criteria.values && criteria.values[0] && criteria.values[0].type;
+
+   //////////////////////////////////////////////////////////////////////////////
+   // render different form element9s) based on operator option's "value mode" //
+   //////////////////////////////////////////////////////////////////////////////
    switch (operatorOption.valueMode)
    {
       case ValueMode.NONE:
-         return <br />;
+         return null;
       case ValueMode.SINGLE:
-         return makeTextField(field, criteria, valueChangeHandler);
+         return makeTextField(field, criteria, valueChangeHandler, 0, undefined, undefined, allowVariables);
       case ValueMode.SINGLE_DATE:
-         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />;
+         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} allowVariables={allowVariables} />;
       case ValueMode.DOUBLE_DATE:
          return <Box>
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" />
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" allowVariables={allowVariables} />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" allowVariables={allowVariables} />
          </Box>;
       case ValueMode.SINGLE_DATE_TIME:
-         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />;
+         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} allowVariables={allowVariables} />;
       case ValueMode.DOUBLE_DATE_TIME:
          return <Box>
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" />
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" allowVariables={allowVariables} />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" allowVariables={allowVariables} />
          </Box>;
       case ValueMode.DOUBLE:
          return <Box>
             <Box width="50%" display="inline-block">
-               {makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-")}
+               {makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-", allowVariables)}
             </Box>
             <Box width="50%" display="inline-block">
-               {makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-")}
+               {makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-", allowVariables)}
             </Box>
          </Box>;
       case ValueMode.MULTI:
@@ -204,18 +360,30 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
          {
             selectedPossibleValue = criteria.values[0];
          }
-         return <Box mb={-1.5}>
-            <DynamicSelect
-               tableName={table.name}
-               fieldName={field.name}
-               overrideId={field.name + "-single-" + criteria.id}
-               key={field.name + "-single-" + criteria.id}
-               fieldLabel="Value"
-               initialValue={selectedPossibleValue?.id}
-               initialDisplayValue={selectedPossibleValue?.label}
-               inForm={false}
-               onChange={(value: any) => valueChangeHandler(null, 0, value)}
-            />
+         return <Box display="flex">
+            {
+               isExpression ? (
+                  makeTextField(field, criteria, valueChangeHandler, 0, undefined, undefined, allowVariables)
+               ) : (
+                  <Box width={"100%"}>
+                     <DynamicSelect
+                        tableName={table.name}
+                        fieldName={field.name}
+                        overrideId={field.name + "-single-" + criteria.id}
+                        key={field.name + "-single-" + criteria.id}
+                        fieldLabel="Value"
+                        initialValue={selectedPossibleValue?.id}
+                        initialDisplayValue={selectedPossibleValue?.label}
+                        inForm={false}
+                        onChange={(value: any) => valueChangeHandler(null, 0, value)}
+                        variant="standard"
+                     />
+                  </Box>
+               )
+            }
+            {
+               allowVariables && !isExpression && <Box mt={2.0}><AssignFilterVariable field={field} valueChangeHandler={valueChangeHandler} valueIndex={0} /></Box>
+            }
          </Box>;
       case ValueMode.PVS_MULTI:
          console.log("Doing pvs multi: " + criteria.values);
@@ -231,7 +399,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                initialValues = criteria.values;
             }
          }
-         return <Box mb={-1.5}>
+         return <Box>
             <DynamicSelect
                tableName={table.name}
                fieldName={field.name}
@@ -240,8 +408,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>;
    }
@@ -249,4 +419,4 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
    return (<br />);
 }
 
-export default FilterCriteriaRowValues;
+export default FilterCriteriaRowValues;

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,562 @@
+/*
+ * 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 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 {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
+
+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;
+   queryScreenUsage?: QueryScreenUsage;
+   allowVariables?: boolean;
+}
+
+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, queryScreenUsage, allowVariables}: 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;
+
+      console.log("IN HERE");
+      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 = (fieldMetaData?.type == QFieldType.DATE_TIME) ? 315 : 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
+                     queryScreenUsage={queryScreenUsage}
+                     operatorOption={operatorSelectedValue}
+                     criteria={criteria}
+                     field={fieldMetaData}
+                     table={tableForField}
+                     allowVariables={allowVariables}
+                     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/sharing/ShareModal.tsx

@@ -0,0 +1,487 @@
+/*
+ * 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 {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, Box} from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+import Modal from "@mui/material/Modal";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
+import Typography from "@mui/material/Typography";
+import FormData from "form-data";
+import colors from "qqq/assets/theme/base/colors";
+import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
+import DynamicSelect, {getAutocompleteOutlinedStyle} from "qqq/components/forms/DynamicSelect";
+import Client from "qqq/utils/qqq/Client";
+import React, {useEffect, useReducer, useState} from "react";
+
+interface ShareModalProps
+{
+   open: boolean;
+   onClose: () => void;
+   tableMetaData: QTableMetaData;
+   record: QRecord;
+}
+
+ShareModal.defaultProps = {};
+
+
+interface CurrentShare
+{
+   shareId: any;
+   scopeId: string;
+   audienceType: string;
+   audienceId: any;
+   audienceLabel: string;
+}
+
+interface Scope
+{
+   id: string;
+   label: string;
+}
+
+const scopeOptions: Scope[] = [
+   {id: "READ_ONLY", label: "Read-Only"},
+   {id: "READ_WRITE", label: "Read and Edit"}
+];
+
+const defaultScope = scopeOptions[0];
+
+const qController = Client.getInstance();
+
+interface ShareableTableMetaData
+{
+   sharedRecordTableName: string;
+   assetIdFieldName: string;
+   scopeFieldName: string;
+   audienceTypesPossibleValueSourceName: string;
+   audiencePossibleValueSourceName: string;
+   thisTableOwnerIdFieldName: string;
+   audienceTypes: {[name: string]: any}; // values here are: ShareableAudienceType
+}
+
+/*******************************************************************************
+ ** component containing a Modal dialog for sharing records
+ *******************************************************************************/
+export default function ShareModal({open, onClose, tableMetaData, record}: ShareModalProps): JSX.Element
+{
+   const [statusString, setStatusString] = useState("Loading...");
+   const [alert, setAlert] = useState(null as string);
+
+   const [selectedAudienceOption, setSelectedAudienceOption] = useState(null as {id: string, label: string});
+   const [selectedAudienceType, setSelectedAudienceType] = useState(null);
+   const [selectedAudienceId, setSelectedAudienceId] = useState(null);
+   const [selectedScopeId, setSelectedScopeId] = useState(defaultScope.id);
+   const [submitting, setSubmitting] = useState(false);
+
+   const [currentShares, setCurrentShares] = useState([] as CurrentShare[])
+   const [needToLoadCurrentShares, setNeedToLoadCurrentShares] = useState(true);
+   const [everLoadedCurrentShares, setEverLoadedCurrentShares] = useState(false);
+
+   const shareableTableMetaData = tableMetaData.shareableTableMetaData as ShareableTableMetaData;
+
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+   if(!shareableTableMetaData)
+   {
+      console.error(`Did not find a shareableTableMetaData on table ${tableMetaData.name}`);
+   }
+
+   /////////////////////////////////////////////////////////
+   // trigger initial load, and post any changes, re-load //
+   /////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      if(needToLoadCurrentShares)
+      {
+         loadShares();
+      }
+   }, [needToLoadCurrentShares]);
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function close(event: object, reason: string)
+   {
+      if (reason === "backdropClick" || reason === "escapeKeyDown")
+      {
+         return;
+      }
+
+      onClose();
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleAudienceChange(value: any | any[], reason: string)
+   {
+      if(value)
+      {
+         const [audienceType, audienceId] = value.id.split(":");
+         setSelectedAudienceType(audienceType);
+         setSelectedAudienceId(audienceId);
+      }
+      else
+      {
+         setSelectedAudienceType(null);
+         setSelectedAudienceId(null);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleScopeChange(event: React.SyntheticEvent, value: any | any[], reason: string)
+   {
+      if(value)
+      {
+         setSelectedScopeId(value.id);
+      }
+      else
+      {
+         setSelectedScopeId(null);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   async function editingExistingShareScope(shareId: number, value: any | any[])
+   {
+      setStatusString("Saving...");
+      setAlert(null);
+
+      const formData = new FormData();
+      formData.append("tableName", tableMetaData.name);
+      formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
+      formData.append("shareId", shareId);
+      formData.append("scopeId", value.id);
+
+      const processResult = await qController.processRun("editSharedRecord", formData, null, true);
+
+      if (processResult instanceof QJobError)
+      {
+         const jobError = processResult as QJobError;
+         setStatusString(null);
+         setAlert("Error editing shared record: " + jobError.error);
+         setSubmitting(false)
+      }
+      else
+      {
+         const result = processResult as QJobComplete;
+         setStatusString(null);
+         setAlert(null);
+         setNeedToLoadCurrentShares(true);
+         setSubmitting(false)
+      }
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   async function loadShares()
+   {
+      setNeedToLoadCurrentShares(false);
+
+      const formData = new FormData();
+      formData.append("tableName", tableMetaData.name);
+      formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
+      const processResult = await qController.processRun("getSharedRecords", formData, null, true);
+
+      setStatusString("Loading...");
+      setAlert(null)
+
+      if (processResult instanceof QJobError)
+      {
+         const jobError = processResult as QJobError;
+         setStatusString(null);
+         setAlert("Error loading: " + jobError.error);
+      }
+      else
+      {
+         const result = processResult as QJobComplete;
+
+         const newCurrentShares: CurrentShare[] = [];
+         for (let i in result.values["resultList"])
+         {
+            newCurrentShares.push(result.values["resultList"][i].values);
+         }
+         setCurrentShares(newCurrentShares);
+         setEverLoadedCurrentShares(true);
+
+         setStatusString(null);
+         setAlert(null);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   async function saveNewShare()
+   {
+      setSubmitting(true)
+      setStatusString("Saving...");
+      setAlert(null);
+
+      const formData = new FormData();
+      formData.append("tableName", tableMetaData.name);
+      formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
+      formData.append("audienceType", selectedAudienceType);
+      formData.append("audienceId", selectedAudienceId);
+      formData.append("scopeId", selectedScopeId);
+
+      const processResult = await qController.processRun("insertSharedRecord", formData, null, true);
+
+      if (processResult instanceof QJobError)
+      {
+         const jobError = processResult as QJobError;
+         setStatusString(null);
+         setAlert("Error sharing record: " + jobError.error);
+         setSubmitting(false)
+      }
+      else
+      {
+         const result = processResult as QJobComplete;
+         setStatusString(null);
+         setAlert(null);
+         setSelectedAudienceOption(null);
+         setNeedToLoadCurrentShares(true);
+         setSubmitting(false)
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   async function removeShare(shareId: number)
+   {
+      setStatusString("Deleting...");
+      setAlert(null);
+
+      const formData = new FormData();
+      formData.append("tableName", tableMetaData.name);
+      formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
+      formData.append("shareId", shareId);
+
+      const processResult = await qController.processRun("deleteSharedRecord", formData, null, true);
+
+      if (processResult instanceof QJobError)
+      {
+         const jobError = processResult as QJobError;
+         setStatusString(null);
+         setAlert("Error deleting share: " + jobError.error);
+      }
+      else
+      {
+         const result = processResult as QJobComplete;
+         setNeedToLoadCurrentShares(true);
+         setStatusString(null);
+         setAlert(null);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getScopeOption(scopeId: string): Scope
+   {
+      for (let scopeOption of scopeOptions)
+      {
+         if(scopeOption.id == scopeId)
+         {
+            return (scopeOption);
+         }
+      }
+
+      return (null);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderScopeDropdown(id: string, defaultValue: Scope, onChange: (event: React.SyntheticEvent, value: any | any[], reason: string) => void)
+   {
+      const isDisabled = (id == "new-share-scope" && submitting);
+      return (
+         <Autocomplete
+            id={id}
+            disabled={isDisabled}
+            renderInput={(params) => (<TextField {...params} label="Scope" variant="outlined" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
+            options={scopeOptions}
+            // @ts-ignore
+            defaultValue={defaultValue}
+            onChange={onChange}
+            isOptionEqualToValue={(option, value) => option.id === value.id}
+            // @ts-ignore Property label does not exist on string | {thing with label}
+            getOptionLabel={(option) => option.label}
+            autoSelect={true}
+            autoHighlight={true}
+            disableClearable
+            fullWidth
+            sx={getAutocompleteOutlinedStyle(isDisabled)}
+         />
+      );
+   }
+
+   //////////////////////
+   // render the modal //
+   //////////////////////
+   return (<Modal open={open} onClose={close}>
+      <div className="share">
+         <Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%", display: "flex", height: "100%", flexDirection: "column", justifyContent: "center"}}>
+            <Card sx={{my: 5, mx: "auto", p: 3}}>
+
+               {/* header */}
+               <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="flex-start" maxWidth="590px">
+                  <Typography variant="h4" pb={1} fontWeight="600">
+                     Share {tableMetaData.label}: {record?.recordLabel ?? record?.values?.get(tableMetaData.primaryKeyField) ?? "Unknown"}
+                     <Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"} fontWeight="400">
+                        {/* todo move to helpContent (what do we attach the meta-data too??) */}
+                        Select a user or a group to share this record with.
+                        {/*You can choose if they should only be able to Read the record, or also make Edits to it.*/}
+                     </Box>
+                     <Box fontSize={14} pb={1} fontWeight="300">
+                        {alert && <Alert color="error" onClose={() => setAlert(null)}>{alert}</Alert>}
+                        {statusString}
+                        {!alert && !statusString && (<>&nbsp;</>)}
+                     </Box>
+                  </Typography>
+               </Box>
+
+               {/* body */}
+               <Box pb={3} display="flex" flexDirection="column">
+                  {/* row for adding a new share */}
+                  <Box display="flex" flexDirection="row" alignItems="center">
+                     <Box width="550px" pr={2} mb={-1.5}>
+                        <DynamicSelect
+                           possibleValueSourceName={shareableTableMetaData.audiencePossibleValueSourceName}
+                           fieldLabel="User or Group" // todo should come from shareableTableMetaData
+                           initialValue={selectedAudienceOption?.id}
+                           initialDisplayValue={selectedAudienceOption?.label}
+                           inForm={false}
+                           onChange={handleAudienceChange}
+                        />
+                     </Box>
+                     {/*
+                        when turning scope back on, change width of audience box to 350px
+                        <Box width="180px" pr={2}>
+                           {renderScopeDropdown("new-share-scope", defaultScope, handleScopeChange)}
+                        </Box>
+                     */}
+                     <Box>
+                        <Tooltip title={selectedAudienceId == null ? "Select a user or group to share with." : null}>
+                           <span>
+                              <Button disabled={submitting || selectedAudienceId == null} sx={iconButtonSX} onClick={() => saveNewShare()}>
+                                 <Icon color={selectedAudienceId == null ? "secondary" : "info"}>save</Icon>
+                              </Button>
+                           </span>
+                        </Tooltip>
+                     </Box>
+                  </Box>
+
+                  {/* row showing existing shares */}
+                  <Box pt={3}>
+                     <Box pb="0.25rem">
+                        <h5 style={{fontWeight: "600"}}>Current Shares
+                           {
+                              everLoadedCurrentShares ? <>&nbsp;({currentShares.length})</> : <></>
+                           }
+                        </h5>
+                     </Box>
+                     <Box sx={{border: `1px solid ${colors.grayLines.main}`, borderRadius: "1rem", overflow: "hidden"}}>
+                        <Box sx={{overflow: "auto"}} height="210px" pt="0.75rem">
+                           {
+                              currentShares.map((share) => (
+                                 <Box key={share.shareId} display="flex" justifyContent="space-between" alignItems="center" p="0.25rem" pb="0.75rem" fontSize="1rem">
+                                    <Box display="flex" alignItems="center">
+                                       <Box width="490px" pl="1rem">{share.audienceLabel}</Box>
+                                       {/*
+                                          when turning scope back on, change width of audience box to 310px
+                                          <Box width="160px">{renderScopeDropdown(`scope-${share.shareId}`, getScopeOption(share.scopeId), (event: React.SyntheticEvent, value: any | any[], reason: string) => editingExistingShareScope(share.shareId, value))}</Box>
+                                       */}
+                                    </Box>
+                                    <Box pr="1rem">
+                                       <Button sx={{...iconButtonSX, ...redIconButton}} onClick={() => removeShare(share.shareId)}><Icon>clear</Icon></Button>
+                                    </Box>
+                                 </Box>
+                              ))
+                           }
+                        </Box>
+                     </Box>
+                  </Box>
+
+               </Box>
+
+               {/* footer */}
+               <Box display="flex" flexDirection="row" justifyContent="flex-end">
+                  <QCancelButton label="Done" iconName="check" onClickHandler={() => close(null, null)} disabled={false} />
+               </Box>
+            </Card>
+         </Box>
+      </div>
+   </Modal>);
+
+}
+
+const iconButtonSX =
+   {
+      border: `1px solid ${colors.grayLines.main} !important`,
+      borderRadius: "0.75rem",
+      textTransform: "none",
+      fontSize: "1rem",
+      fontWeight: "400",
+      width: "40px",
+      minWidth: "40px",
+      paddingLeft: 0,
+      paddingRight: 0,
+      color: colors.secondary.main,
+      "&:hover": {color: colors.secondary.main},
+      "&:focus": {color: colors.secondary.main},
+      "&:focus:not(:hover)": {color: colors.secondary.main},
+   };
+
+const redIconButton =
+   {
+      color: colors.error.main,
+      "&:hover": {color: colors.error.main},
+      "&:focus": {color: colors.error.main},
+      "&:focus:not(:hover)": {color: colors.error.main},
+   };
+

src/qqq/components/widgets/CompositeWidget.tsx

@@ -0,0 +1,133 @@
+/*
+ * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {Box, Skeleton} from "@mui/material";
+import parse from "html-react-parser";
+import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
+import WidgetBlock from "qqq/components/widgets/WidgetBlock";
+import React from "react";
+
+
+export interface CompositeData
+{
+   blocks: BlockData[];
+   styleOverrides?: any;
+   layout?: string;
+   overlayHtml?: string;
+   overlayStyleOverrides?: any;
+}
+
+
+interface CompositeWidgetProps
+{
+   widgetMetaData: QWidgetMetaData;
+   data: CompositeData;
+}
+
+
+/*******************************************************************************
+ ** Widget which is a list of Blocks.
+ *******************************************************************************/
+export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetProps): JSX.Element
+{
+   if (!data || !data.blocks)
+   {
+      return (<Skeleton />);
+   }
+
+   ////////////////////////////////////////////////////////////////////////////////////
+   // note - these layouts are defined in qqq in the CompositeWidgetData.Layout enum //
+   ////////////////////////////////////////////////////////////////////////////////////
+   let layout = data?.layout;
+   let boxStyle: any = {};
+   if (layout == "FLEX_COLUMN")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "column";
+      boxStyle.flexWrap = "wrap";
+      boxStyle.gap = "0.5rem";
+   }
+   else if (layout == "FLEX_ROW_WRAPPED")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "row";
+      boxStyle.flexWrap = "wrap";
+      boxStyle.gap = "0.5rem";
+   }
+   else if (layout == "FLEX_ROW_SPACE_BETWEEN")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "row";
+      boxStyle.justifyContent = "space-between";
+      boxStyle.gap = "0.25rem";
+   }
+   else if (layout == "TABLE_SUB_ROW_DETAILS")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "column";
+      boxStyle.fontSize = "0.875rem";
+      boxStyle.fontWeight = 400;
+      boxStyle.borderRight = "1px solid #D0D0D0";
+   }
+   else if (layout == "BADGES_WRAPPER")
+   {
+      boxStyle.display = "flex";
+      boxStyle.gap = "0.25rem";
+      boxStyle.padding = "0 0.25rem";
+      boxStyle.fontSize = "0.875rem";
+      boxStyle.fontWeight = 400;
+      boxStyle.border = "1px solid gray";
+      boxStyle.borderRadius = "0.5rem";
+      boxStyle.background = "#FFFFFF";
+   }
+   if (data?.styleOverrides)
+   {
+      boxStyle = {...boxStyle, ...data.styleOverrides};
+   }
+
+   let overlayStyle: any = {};
+
+   if (data?.overlayStyleOverrides)
+   {
+      overlayStyle = {...overlayStyle, ...data.overlayStyleOverrides};
+   }
+
+   return (
+      <>
+         {
+            data?.overlayHtml &&
+            <Box sx={overlayStyle} className="blockWidgetOverlay">{parse(data.overlayHtml)}</Box>
+         }
+         <Box sx={boxStyle} className="compositeWidget">
+            {
+               data.blocks.map((block: BlockData, index) => (
+                  <React.Fragment key={index}>
+                     <WidgetBlock widgetMetaData={widgetMetaData} block={block} />
+                  </React.Fragment>
+               ))
+            }
+         </Box>
+      </>
+   );
+
+}

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -19,13 +19,13 @@
  */
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Skeleton} from "@mui/material";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import {Alert, 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 QContext from "QContext";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import TabPanel from "qqq/components/misc/TabPanel";
@@ -35,9 +35,13 @@ import DefaultLineChart from "qqq/components/widgets/charts/linechart/DefaultLin
 import SmallLineChart from "qqq/components/widgets/charts/linechart/SmallLineChart";
 import PieChart from "qqq/components/widgets/charts/piechart/PieChart";
 import StackedBarChart from "qqq/components/widgets/charts/StackedBarChart";
+import CompositeWidget from "qqq/components/widgets/CompositeWidget";
 import DataBagViewer from "qqq/components/widgets/misc/DataBagViewer";
 import DividerWidget from "qqq/components/widgets/misc/Divider";
+import DynamicFormWidget from "qqq/components/widgets/misc/DynamicFormWidget";
 import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget";
+import FilterAndColumnsSetupWidget from "qqq/components/widgets/misc/FilterAndColumnsSetupWidget";
+import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
 import QuickSightChart from "qqq/components/widgets/misc/QuickSightChart";
 import RecordGridWidget from "qqq/components/widgets/misc/RecordGridWidget";
 import ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
@@ -46,9 +50,11 @@ 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, {HeaderIcon, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, LabelComponent} from "qqq/components/widgets/Widget";
+import Widget, {HeaderIcon, LabelComponent, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, WidgetData} from "qqq/components/widgets/Widget";
+import WidgetBlock from "qqq/components/widgets/WidgetBlock";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
 import Client from "qqq/utils/qqq/Client";
+import React, {useContext, useEffect, useReducer, useState} from "react";
 import TableWidget from "./tables/TableWidget";
 
 
@@ -59,6 +65,7 @@ interface Props
    widgetMetaDataList: QWidgetMetaData[];
    tableName?: string;
    entityPrimaryKey?: string;
+   record?: QRecord;
    omitWrappingGridContainer: boolean;
    areChildren?: boolean;
    childUrlParams?: string;
@@ -77,7 +84,7 @@ DashboardWidgets.defaultProps = {
    wrapWidgetsInTabPanels: false,
 };
 
-function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
+function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
 {
    const [widgetData, setWidgetData] = useState([] as any[]);
    const [widgetCounter, setWidgetCounter] = useState(0);
@@ -89,9 +96,9 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    let initialSelectedTab = 0;
    let selectedTabKey: string = null;
-   if(parentWidgetMetaData && wrapWidgetsInTabPanels)
+   if (parentWidgetMetaData && wrapWidgetsInTabPanels)
    {
-      selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`
+      selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`;
       if (localStorage.getItem(selectedTabKey))
       {
          initialSelectedTab = Number(localStorage.getItem(selectedTabKey));
@@ -189,7 +196,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
          const metaDataToUse = (thisWidgetHasDropdowns) ? widgetMetaData : parentWidgetMetaData;
          for (let i = 0; i < metaDataToUse.dropdowns.length; i++)
          {
-            const dropdownName = metaDataToUse.dropdowns[i].possibleValueSourceName;
+            const dropdownName = metaDataToUse.dropdowns[i].possibleValueSourceName ?? metaDataToUse.dropdowns[i].name;
             const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${metaDataToUse.name}.${dropdownName}`;
             const json = JSON.parse(localStorage.getItem(localStorageKey));
             if (json)
@@ -246,6 +253,23 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0;
 
+
+   /*******************************************************************************
+    ** helper function, to convert values from a QRecord values map to a regular old
+    ** js object
+    *******************************************************************************/
+   function convertQRecordValuesFromMapToObject(record: QRecord): { [name: string]: any }
+   {
+      const rs: { [name: string]: any } = {};
+
+      if (record && record.values)
+      {
+         record.values.forEach((value, key) => rs[key] = value);
+      }
+
+      return (rs);
+   }
+
    const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
    {
       const labelAdditionalComponentsRight: LabelComponent[] = [];
@@ -254,12 +278,22 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
          const topRightInsideCardIcon = widgetMetaData.icons.get("topRightInsideCard");
          if (topRightInsideCardIcon)
          {
-            labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color));
+            labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color, "topRightInsideCard"));
+         }
+      }
+
+      const labelAdditionalComponentsLeft: LabelComponent[] = [];
+      if (widgetMetaData && widgetMetaData.icons)
+      {
+         const topLeftInsideCardIcon = widgetMetaData.icons.get("topLeftInsideCard");
+         if (topLeftInsideCardIcon)
+         {
+            labelAdditionalComponentsLeft.push(new HeaderIcon(topLeftInsideCardIcon.name, topLeftInsideCardIcon.path, topLeftInsideCardIcon.color, "topLeftInsideCard"));
          }
       }
 
       return (
-         <Box key={`${widgetMetaData.name}-${i}`} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%"}}>
+         <Box key={`${widgetMetaData.name}-${i}`} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%", flexDirection: widgetMetaData.type == "multiTable" ? "column" : "row"}}>
             {
                haveLoadedParams && widgetMetaData.type === "parentWidget" && (
                   <ParentWidget
@@ -274,6 +308,21 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                   />
                )
             }
+            {
+               widgetMetaData.type === "alert" && widgetData[i]?.html && (
+                  <Widget
+                     omitPadding={true}
+                     widgetMetaData={widgetMetaData}
+                     widgetData={widgetData[i]}
+                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
+                  >
+                     <Alert severity={widgetData[i]?.alertType?.toLowerCase()}>{parse(widgetData[i]?.html)}</Alert>
+                  </Widget>
+               )
+            }
             {
                widgetMetaData.type === "usaMap" && (
                   <USMapWidget
@@ -294,6 +343,20 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                   />
                )
             }
+            {
+               widgetMetaData.type === "multiTable" && (
+                  widgetData[i]?.tableDataList?.map((tableData: WidgetData, index: number) =>
+                     <Box pb={3} key={`${widgetMetaData.type}-${index}`}>
+                        <TableWidget
+                           widgetMetaData={widgetMetaData}
+                           widgetData={tableData}
+                           reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                           isChild={areChildren}
+                        />
+                     </Box>
+                  )
+               )
+            }
             {
                widgetMetaData.type === "stackedBarChart" && (
                   <Widget
@@ -302,6 +365,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
                      labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <StackedBarChart data={widgetData[i]?.chartData} chartSubheaderData={widgetData[i]?.chartSubheaderData} />
                   </Widget>
@@ -314,6 +378,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      showReloadControl={false}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <div className="widgetProcessMidDiv" style={{height: "100%"}}>
                         <ProcessRun process={widgetData[i]?.processMetaData} defaultProcessValues={widgetData[i]?.defaultValues} isWidget={true} forceReInit={widgetCounter} />
@@ -327,6 +393,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetMetaData={widgetMetaData}
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <Box sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
                         <Box padding="1rem" sx={{width: "100%"}}>
@@ -342,6 +410,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetMetaData={widgetMetaData}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      widgetData={widgetData[i]}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <Box>
                         <MDTypography component="div" variant="button" color="text" fontWeight="light">
@@ -373,8 +443,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      isChild={areChildren}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <StatisticsCard
+                        widgetMetaData={widgetMetaData}
                         data={widgetData[i]}
                         increaseIsGood={true}
                      />
@@ -414,6 +487,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
                      labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <div>
                         <PieChart
@@ -449,6 +523,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <DefaultLineChart sx={{alignItems: "center"}}
                         data={widgetData[i]?.chartData}
@@ -477,6 +553,34 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                   />
                )
             }
+            {
+               widgetMetaData.type === "composite" && (
+                  <Widget
+                     widgetMetaData={widgetMetaData}
+                     widgetData={widgetData[i]}
+                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
+                  >
+                     <CompositeWidget widgetMetaData={widgetMetaData} data={widgetData[i]} />
+                  </Widget>
+               )
+            }
+            {
+               widgetMetaData.type === "block" && (
+                  <Widget
+                     widgetMetaData={widgetMetaData}
+                     widgetData={widgetData[i]}
+                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
+                  >
+                     <WidgetBlock widgetMetaData={widgetMetaData} block={widgetData[i]} />
+                  </Widget>
+               )
+            }
             {
                widgetMetaData.type === "dataBagViewer" && (
                   widgetData && widgetData[i] && widgetData[i].queryParams &&
@@ -493,11 +597,33 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                   </Widget>
                )
             }
+            {
+               widgetMetaData.type === "filterAndColumnsSetup" && (
+                  widgetData && widgetData[i] &&
+                  <FilterAndColumnsSetupWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
+                  {
+                  }} />
+               )
+            }
+            {
+               widgetMetaData.type === "pivotTableSetup" && (
+                  widgetData && widgetData[i] && widgetData[i].queryParams &&
+                  <PivotTableSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
+                  {
+                  }} />
+               )
+            }
+            {
+               widgetMetaData.type === "dynamicForm" && (
+                  widgetData && widgetData[i] &&
+                  <DynamicFormWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} record={record} recordValues={convertQRecordValuesFromMapToObject(record)} />
+               )
+            }
          </Box>
       );
    };
 
-   if(wrapWidgetsInTabPanels)
+   if (wrapWidgetsInTabPanels)
    {
       omitWrappingGridContainer = true;
    }
@@ -512,8 +638,28 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
                   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"}}>
+                     const gridProps: {[key: string]: any} = {};
+
+                     for(let size of ["xs", "sm", "md", "lg", "xl", "xxl"])
+                     {
+                        const key = `gridCols:sizeClass:${size}`
+                        if(widgetMetaData?.defaultValues?.has(key))
+                        {
+                           gridProps[size] = widgetMetaData?.defaultValues.get(key);
+                        }
+                     }
+
+                     if(!gridProps["xxl"])
+                     {
+                        gridProps["xxl"] = widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12;
+                     }
+
+                     if(!gridProps["xs"])
+                     {
+                        gridProps["xs"] = 12;
+                     }
+
+                     renderedWidget = (<Grid id={widgetMetaData.name} item {...gridProps} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
                         {renderedWidget}
                      </Grid>);
                   }
@@ -523,14 +669,13 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      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>)
+                  return (<React.Fragment key={`${widgetMetaData.name}-${i}`}>{renderedWidget}</React.Fragment>);
                })
             }
          </>
@@ -538,7 +683,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    const tabs = widgetMetaDataList && wrapWidgetsInTabPanels ?
       <Tabs
-         sx={{m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
+         sx={{
+            m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
             "& .MuiTabs-scroller": {
                ml: 0
             }
@@ -551,7 +697,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
             <Tab key={widgetMetaData.name} label={widgetMetaData.label} />
          ))}
       </Tabs>
-      : <></>
+      : <></>;
 
    return (
       widgetCount > 0 ? (

src/qqq/components/widgets/ParentWidget.tsx

@@ -33,6 +33,7 @@ import Client from "qqq/utils/qqq/Client";
 //////////////////////////////////////////////
 export interface ParentWidgetData
 {
+   label?: string;
    dropdownLabelList: string[];
    dropdownNameList: string[];
    dropdownDataList: {
@@ -42,6 +43,7 @@ export interface ParentWidgetData
    childWidgetNameList: string[];
    dropdownNeedsSelectedText?: string;
    storeDropdownSelections?: boolean;
+   csvData?: any[][];
    icon?: string;
    layoutType: string;
 }
@@ -64,7 +66,8 @@ interface Props
 
 
 const qController = Client.getInstance();
-function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidgetCallback, entityPrimaryKey, tableName, storeDropdownSelections}: Props, ): JSX.Element
+
+function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidgetCallback, entityPrimaryKey, tableName, storeDropdownSelections}: Props,): JSX.Element
 {
    const [childUrlParams, setChildUrlParams] = useState((urlParams) ? urlParams : "");
    const [qInstance, setQInstance] = useState(null as QInstance);
@@ -81,27 +84,27 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
 
    useEffect(() =>
    {
-      if(qInstance && data && data.childWidgetNameList)
+      if (qInstance && data && data.childWidgetNameList)
       {
          let widgetMetaDataList = [] as QWidgetMetaData[];
          data?.childWidgetNameList.forEach((widgetName: string) =>
          {
             widgetMetaDataList.push(qInstance.widgets.get(widgetName));
-         })
+         });
          setWidgets(widgetMetaDataList);
       }
    }, [qInstance, data, childUrlParams]);
 
    useEffect(() =>
    {
-      setChildUrlParams(urlParams)
+      setChildUrlParams(urlParams);
    }, [urlParams]);
 
    const parentReloadWidgetCallback = (data: string) =>
    {
       setChildUrlParams(data);
       reloadWidgetCallback(data);
-   }
+   };
 
    ///////////////////////////////////////////////////////////////////////////////////////////
    // if this parent widget is in card form, and its children are too, then we need some px //
@@ -125,7 +128,7 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
             omitPadding={omitPadding}
          >
             <Box sx={{height: "100%", width: "100%"}} px={px}>
-               <DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType == "TABS"}/>
+               <DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType?.toLowerCase() == "tabs"} />
             </Box>
          </Widget>
       ) : null

src/qqq/components/widgets/Widget.tsx

@@ -21,17 +21,22 @@
 
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import Box from "@mui/material/Box";
+import {Box, InputLabel} from "@mui/material";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
+import Switch from "@mui/material/Switch";
 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 {NavigateFunction, useNavigate} from "react-router-dom";
+import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import WidgetDropdownMenu, {DropdownOption} from "qqq/components/widgets/components/WidgetDropdownMenu";
+import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
+import HtmlUtils from "qqq/utils/HtmlUtils";
+import React, {useContext, useEffect, useState} from "react";
+import {NavigateFunction, useNavigate} from "react-router-dom";
 
 export interface WidgetData
 {
@@ -56,6 +61,8 @@ interface Props
    labelAdditionalComponentsLeft: LabelComponent[];
    labelAdditionalElementsLeft: JSX.Element[];
    labelAdditionalComponentsRight: LabelComponent[];
+   labelAdditionalElementsRight: JSX.Element[];
+   labelBoxAdditionalSx?: any;
    widgetMetaData?: QWidgetMetaData;
    widgetData?: WidgetData;
    children: JSX.Element;
@@ -75,6 +82,8 @@ Widget.defaultProps = {
    labelAdditionalComponentsLeft: [],
    labelAdditionalElementsLeft: [],
    labelAdditionalComponentsRight: [],
+   labelAdditionalElementsRight: [],
+   labelBoxAdditionalSx: {},
    omitPadding: false,
 };
 
@@ -107,16 +116,18 @@ export class HeaderIcon extends LabelComponent
    iconPath: string;
    color: string;
    coloredBG: boolean;
+   role: string;
 
    iconColor: string;
    bgColor: string;
 
-   constructor(iconName: string, iconPath: string, color: string, coloredBG: boolean = true)
+   constructor(iconName: string, iconPath: string, color: string, role?: string, coloredBG: boolean = true)
    {
       super();
       this.iconName = iconName;
       this.iconPath = iconPath;
       this.color = color;
+      this.role = role;
       this.coloredBG = coloredBG;
 
       this.iconColor = this.coloredBG ? "#FFFFFF" : this.color;
@@ -126,7 +137,7 @@ export class HeaderIcon extends LabelComponent
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      const styles = {
+      const styles: any = {
          width: "1.75rem",
          height: "1.75rem",
          color: this.iconColor,
@@ -134,6 +145,12 @@ export class HeaderIcon extends LabelComponent
          borderRadius: "0.25rem"
       };
 
+      if (this.role == "topLeftInsideCard")
+      {
+         styles["order"] = -1;
+         styles["marginRight"] = "0.5rem";
+      }
+
       if (this.iconPath)
       {
          return (<Box sx={{textAlign: "center", ...styles}}><img src={this.iconPath} width="16" height="16" /></Box>);
@@ -146,6 +163,76 @@ export class HeaderIcon extends LabelComponent
 }
 
 
+/*******************************************************************************
+ ** a link (actually a button) for in a widget's header
+ *******************************************************************************/
+interface HeaderLinkButtonComponentProps
+{
+   label: string;
+   onClickCallback: () => void;
+   disabled?: boolean;
+   disabledTooltip?: string;
+}
+
+HeaderLinkButtonComponent.defaultProps = {
+   disabled: false,
+   disabledTooltip: null
+};
+
+export function HeaderLinkButtonComponent({label, onClickCallback, disabled, disabledTooltip}: HeaderLinkButtonComponentProps): JSX.Element
+{
+   return (
+      <Tooltip title={disabledTooltip}>
+         <span>
+            <Button disabled={disabled} onClick={() => onClickCallback()} sx={{p: 0}} disableRipple>
+               <Typography display="inline" textTransform="none" fontSize={"1.125rem"}>
+                  {label}
+               </Typography>
+            </Button>
+         </span>
+      </Tooltip>
+   );
+}
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+interface HeaderToggleComponentProps
+{
+   label: string;
+   getValue: () => boolean;
+   onClickCallback: () => void;
+   disabled?: boolean;
+   disabledTooltip?: string;
+}
+
+HeaderToggleComponent.defaultProps = {
+   disabled: false,
+   disabledTooltip: null
+};
+
+export function HeaderToggleComponent({label, getValue, onClickCallback, disabled, disabledTooltip}: HeaderToggleComponentProps): JSX.Element
+{
+   const onClick = () =>
+   {
+      onClickCallback();
+   };
+
+   return (
+      <Box alignItems="baseline" mr="-0.75rem">
+         <Tooltip title={disabledTooltip}>
+            <span>
+               <InputLabel sx={{fontSize: "1.125rem", px: "0 !important", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.65 : 1}} unselectable="on">
+                  {label} <Switch disabled={disabled} checked={getValue()} onClick={onClick} />
+               </InputLabel>
+            </span>
+         </Tooltip>
+      </Box>
+   );
+}
+
+
 /*******************************************************************************
  **
  *******************************************************************************/
@@ -155,15 +242,17 @@ export class AddNewRecordButton extends LabelComponent
    label: string;
    defaultValues: any;
    disabledFields: any;
+   addNewRecordCallback?: () => void;
 
 
-   constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues)
+   constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues, addNewRecordCallback?: () => void)
    {
       super();
       this.table = table;
       this.label = label;
       this.defaultValues = defaultValues;
       this.disabledFields = disabledFields;
+      this.addNewRecordCallback = addNewRecordCallback;
    }
 
    openEditForm = (navigate: any, table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any) =>
@@ -174,8 +263,8 @@ export class AddNewRecordButton extends LabelComponent
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
       return (
-         <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="0.25rem">
-            <Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
+         <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="-0.5rem">
+            <Button sx={{mt: 0.75}} onClick={() => this.addNewRecordCallback ? this.addNewRecordCallback() : this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
          </Typography>
       );
    };
@@ -221,22 +310,30 @@ export class Dropdown extends LabelComponent
          try
          {
             const localStorageOption = JSON.parse(localStorage.getItem(localStorageKey));
-            if(localStorageOption)
+            if (localStorageOption)
             {
                const id = localStorageOption.id;
-               for (let i = 0; i < this.options.length; i++)
+
+               if (this.dropdownMetaData.type == "DATE_PICKER")
                {
-                  if (this.options[i].id == id)
+                  defaultValue = id;
+               }
+               else
+               {
+                  for (let i = 0; i < this.options.length; i++)
                   {
-                     defaultValue = this.options[i]
-                     args.dropdownData[args.componentIndex] = defaultValue?.id;
+                     if (this.options[i].id == id)
+                     {
+                        defaultValue = this.options[i];
+                        args.dropdownData[args.componentIndex] = defaultValue?.id;
+                     }
                   }
                }
             }
          }
-         catch(e)
+         catch (e)
          {
-            console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e)
+            console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e);
          }
       }
 
@@ -247,7 +344,7 @@ export class Dropdown extends LabelComponent
       {
          for (let i = 0; i < this.options.length; i++)
          {
-            if(this.options[i].id == this.dropdownDefaultValue)
+            if (this.options[i].id == this.dropdownDefaultValue)
             {
                defaultValue = this.options[i];
                args.dropdownData[args.componentIndex] = defaultValue?.id;
@@ -283,6 +380,7 @@ export class Dropdown extends LabelComponent
          <Box mb={2} sx={{float: "right"}}>
             <WidgetDropdownMenu
                name={this.dropdownName}
+               type={this.dropdownMetaData.type}
                defaultValue={defaultValue}
                sx={{marginLeft: "1rem"}}
                label={label}
@@ -315,11 +413,13 @@ export class ReloadControl extends LabelComponent
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      return (
-         <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>
-      );
+      return (<Typography key={1} variant="body2" py={0} px={0} display="inline" position="relative" top="-0.25rem">
+         <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>);
    };
 }
 
@@ -334,15 +434,31 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
 {
    const navigate = useNavigate();
    const [dropdownData, setDropdownData] = useState([]);
-   const [fullScreenWidgetClassName, setFullScreenWidgetClassName] = useState("");
    const [reloading, setReloading] = useState(false);
    const [dropdownDataJSON, setDropdownDataJSON] = useState("");
    const [labelComponentsLeft, setLabelComponentsLeft] = useState([] as LabelComponent[]);
    const [labelComponentsRight, setLabelComponentsRight] = useState([] as LabelComponent[]);
 
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // support for using widget (data) label as page header, w/o it disappearing if dropdowns are changed //
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const [lastSeenLabel, setLastSeenLabel] = useState("");
+   const [usingLabelAsTitle, setUsingLabelAsTitle] = useState(false);
+
+   const {helpHelpActive} = useContext(QContext);
+
    function renderComponent(component: LabelComponent, componentIndex: number)
    {
-      return component.render({navigate: navigate, widgetProps: props, dropdownData: dropdownData, componentIndex: componentIndex, reloadFunction: doReload});
+      if (component && component.render)
+      {
+         return component.render({navigate: navigate, widgetProps: props, dropdownData: dropdownData, componentIndex: componentIndex, reloadFunction: doReload});
+      }
+      else
+      {
+         console.log("Request to render a null component or component without a render function...");
+         console.log(JSON.stringify(component));
+         return (<></>);
+      }
    }
 
    useEffect(() =>
@@ -369,7 +485,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       // for initial render, put right-components from props into the state variable //
       /////////////////////////////////////////////////////////////////////////////////
       const stateLabelComponentsRight = [] as LabelComponent[];
-      // console.log(`${props.widgetMetaData.name} init'ing right-components`);
+      // console.log(`${props.widgetMetaData.name} initiating right-components`);
       if (props.labelAdditionalComponentsRight)
       {
          props.labelAdditionalComponentsRight.map((component) => stateLabelComponentsRight.push(component));
@@ -403,11 +519,14 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          {
             // console.log(`${props.widgetMetaData.name} building a Dropdown, data is: ${dropdownData}`);
             let defaultValue = null;
-            if(props.widgetData.dropdownDefaultValueList && props.widgetData.dropdownDefaultValueList.length >= index)
+            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));
+            if (props.widgetData?.dropdownLabelList && props.widgetData?.dropdownLabelList[index] && props.widgetMetaData?.dropdowns && props.widgetMetaData?.dropdowns[index] && props.widgetData?.dropdownNameList && props.widgetData?.dropdownNameList[index])
+            {
+               updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], props.widgetMetaData.dropdowns[index], dropdownData, defaultValue, props.widgetData.dropdownNameList[index], handleDataChange));
+            }
          });
          setLabelComponentsRight(updatedStateLabelComponentsRight);
       }
@@ -498,18 +617,37 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       }
    };
 
-   const toggleFullScreenWidget = () =>
+   const onExportClick = () =>
    {
-      if (fullScreenWidgetClassName)
+      if (props.widgetData?.csvData)
       {
-         setFullScreenWidgetClassName("");
+         const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
+         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
+         HtmlUtils.download(fileName, csv);
       }
       else
       {
-         setFullScreenWidgetClassName("fullScreenWidget");
+         alert("There is no data available to export.");
       }
    };
 
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////
+   // add the export button to the label's left elements, if the meta-data says to show it              //
+   // don't do this for 2 types which themselves add the button (and have custom code to do the export) //
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////
+   let localLabelAdditionalElementsLeft = [...props.labelAdditionalElementsLeft];
+   if (props.widgetMetaData?.showExportButton && props.widgetMetaData?.type !== "table" && props.widgetMetaData?.type !== "childRecordList")
+   {
+      if (!localLabelAdditionalElementsLeft)
+      {
+         localLabelAdditionalElementsLeft = [];
+      }
+
+      localLabelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
+   }
+
+   let localLabelAdditionalElementsRight = [...props.labelAdditionalElementsRight];
+
    const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
 
    const isSet = (v: any): boolean =>
@@ -524,85 +662,130 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
    if (hasPermission)
    {
       needLabelBox ||= (labelComponentsLeft && labelComponentsLeft.length > 0);
-      needLabelBox ||= (props.labelAdditionalElementsLeft && props.labelAdditionalElementsLeft.length > 0);
+      needLabelBox ||= (localLabelAdditionalElementsLeft && localLabelAdditionalElementsLeft.length > 0);
       needLabelBox ||= (labelComponentsRight && labelComponentsRight.length > 0);
-      needLabelBox ||= isSet(props.widgetMetaData?.icon);
+      needLabelBox ||= (localLabelAdditionalElementsRight && localLabelAdditionalElementsRight.length > 0);
+      needLabelBox ||= isSet(props.widgetData?.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;
+   const isParentWidget = props.widgetMetaData.type == "parentWidget"; // todo - do we need to know top-level parent, vs. a nested parent?
+   let labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label;
+
+   if (!labelToUse)
+   {
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      // prevent the label from disappearing, especially when it's being used as the page header //
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      if (lastSeenLabel && isParentWidget && usingLabelAsTitle)
+      {
+         labelToUse = lastSeenLabel;
+      }
+   }
+
    let labelElement = (
-      <Typography sx={{cursor: "default", pl: "auto", pt: props.widgetMetaData.type == "parentWidget" ? "1rem" : "auto", fontWeight: 600}} variant="h6" display="inline">
+      <Typography sx={{cursor: "default", pl: "auto", fontWeight: 600}} variant={isParentWidget && (props.widgetData.isLabelPageTitle || usingLabelAsTitle) ? "h3" : "h6"} display="inline">
          {labelToUse}
       </Typography>
    );
 
-   if (props.widgetMetaData.tooltip)
+   let sublabelElement = (
+      <Box key="sublabel" height="20px">
+         <Typography sx={{position: "relative", top: "-18px"}} variant="caption">
+            {props.widgetData?.sublabel}
+         </Typography>
+      </Box>
+   );
+
+   if (labelToUse && labelToUse != lastSeenLabel)
    {
-      labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={false} followCursor={true} placement="bottom-start">{labelElement}</Tooltip>;
+      setLastSeenLabel(labelToUse);
+      setUsingLabelAsTitle(props.widgetData.isLabelPageTitle);
    }
 
+   const helpRoles = ["ALL_SCREENS"];
+   const slotName = "label";
+   const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
+
+   if (showHelp)
+   {
+      const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
+      labelElement = <Tooltip title={formattedHelpContent} arrow={true} placement="bottom-start">{labelElement}</Tooltip>;
+   }
+   else if (props.widgetMetaData?.tooltip)
+   {
+      labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={true} placement="bottom-start">{labelElement}</Tooltip>;
+   }
+
+   const isTable = props.widgetMetaData.type == "table";
+
    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 display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}} minHeight={"2.5rem"}>
-               <Box>
-                  {
-                     hasPermission ?
-                        props.widgetMetaData?.icon && (
-                           <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}
-                              </Icon>
-                           </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"
-                           }}
-                           >
-                              <Icon fontSize="medium" color="inherit">lock</Icon>
-                           </Box>
+            <Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%", ...props.labelBoxAdditionalSx}} minHeight={"2.5rem"}>
+               <Box display="flex" flexDirection="column">
+                  <Box display="flex" alignItems="baseline">
+                     {
+                        hasPermission ?
+                           props.widgetMetaData?.icon && (
+                              <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}
+                                 </Icon>
+                              </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"
+                              }}
+                              >
+                                 <Icon fontSize="medium" color="inherit">lock</Icon>
+                              </Box>
+                           )
+                     }
+                     {
+                        hasPermission && labelToUse && (labelElement)
+                     }
+                     {
+                        hasPermission && (
+                           labelComponentsLeft.map((component, i) =>
+                           {
+                              return (<React.Fragment key={i}>{renderComponent(component, i)}</React.Fragment>);
+                           })
                         )
-                  }
-                  {
-                     hasPermission && labelToUse && (labelElement)
-                  }
-                  {
-                     hasPermission && (
-                        labelComponentsLeft.map((component, i) =>
-                        {
-                           return (<span key={i}>{renderComponent(component, i)}</span>);
-                        })
-                     )
-                  }
-                  {props.labelAdditionalElementsLeft}
+                     }
+                     {localLabelAdditionalElementsLeft}
+                  </Box>
+                  <Box key="sublabelContainer" display="flex">
+                     {
+                        hasPermission && props.widgetData?.sublabel && (sublabelElement)
+                     }
+                  </Box>
                </Box>
                <Box>
                   {
@@ -613,6 +796,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                         })
                      )
                   }
+                  {localLabelAdditionalElementsRight}
                </Box>
             </Box>
          }
@@ -648,17 +832,27 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          }
          {
             !errorLoading && props?.footerHTML && (
-               <Box mt={1} ml={3} mr={3} mb={2} sx={{fontWeight: 300, color: "#7b809a", display: "flex", alignContent: "flex-end", fontSize: "14px"}}>{parse(props.footerHTML)}</Box>
+               <Box mt={isTable ? "36px" : 1} ml={isTable ? 0 : 3} mr={isTable ? 0 : 3} mb={isTable ? "-12px" : 2} sx={{fontWeight: 300, color: "#7b809a", display: "flex", alignContent: "flex-end", fontSize: "14px"}}>{parse(props.footerHTML)}</Box>
             )
          }
       </Box>;
 
    const padding = props.omitPadding ? "auto" : "24px 16px";
+
+   ///////////////////////////////////////////////////
+   // try to make tables fill their entire "parent" //
+   ///////////////////////////////////////////////////
+   let noCardMarginBottom = "unset";
+   if (isTable)
+   {
+      noCardMarginBottom = "-8px";
+   }
+
    return props.widgetMetaData?.isCard
-      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className={fullScreenWidgetClassName}>
+      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className="widget inCard">
          {widgetContent}
       </Card>
-      : <span style={{width: "100%", padding: padding}}>{widgetContent}</span>;
+      : <span style={{width: "100%", padding: padding, marginBottom: noCardMarginBottom}} className="widget noCard">{widgetContent}</span>;
 }
 
 export default Widget;

src/qqq/components/widgets/WidgetBlock.tsx

@@ -0,0 +1,90 @@
+/*
+ * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {Alert, Skeleton} from "@mui/material";
+import React from "react";
+import BigNumberBlock from "qqq/components/widgets/blocks/BigNumberBlock";
+import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
+import DividerBlock from "qqq/components/widgets/blocks/DividerBlock";
+import NumberIconBadgeBlock from "qqq/components/widgets/blocks/NumberIconBadgeBlock";
+import ProgressBarBlock from "qqq/components/widgets/blocks/ProgressBarBlock";
+import TableSubRowDetailRowBlock from "qqq/components/widgets/blocks/TableSubRowDetailRowBlock";
+import TextBlock from "qqq/components/widgets/blocks/TextBlock";
+import UpOrDownNumberBlock from "qqq/components/widgets/blocks/UpOrDownNumberBlock";
+import CompositeWidget from "qqq/components/widgets/CompositeWidget";
+
+
+interface WidgetBlockProps
+{
+   widgetMetaData: QWidgetMetaData;
+   block: BlockData;
+}
+
+
+/*******************************************************************************
+ ** Component to render a single Block in the widget framework!
+ *******************************************************************************/
+export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps): JSX.Element
+{
+   if(!block)
+   {
+      return (<Skeleton />);
+   }
+
+   if(!block.values)
+   {
+      block.values = {};
+   }
+
+   if(!block.styles)
+   {
+      block.styles = {};
+   }
+
+   if(block.blockTypeName == "COMPOSITE")
+   {
+      // @ts-ignore - special case for composite type block...
+      return (<CompositeWidget widgetMetaData={widgetMetaData} data={block} />);
+   }
+
+   switch(block.blockTypeName)
+   {
+      case "TEXT":
+         return (<TextBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "NUMBER_ICON_BADGE":
+         return (<NumberIconBadgeBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "UP_OR_DOWN_NUMBER":
+         return (<UpOrDownNumberBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "TABLE_SUB_ROW_DETAIL_ROW":
+         return (<TableSubRowDetailRowBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "PROGRESS_BAR":
+         return (<ProgressBarBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "DIVIDER":
+         return (<DividerBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "BIG_NUMBER":
+         return (<BigNumberBlock widgetMetaData={widgetMetaData} data={block} />);
+      default:
+         return (<Alert sx={{m: "0.5rem"}} color="warning">Unsupported block type: {block.blockTypeName}</Alert>)
+   }
+
+}

src/qqq/components/widgets/WidgetUtils.tsx

@@ -0,0 +1,113 @@
+/*
+ * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+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 colors from "qqq/assets/theme/base/colors";
+import {WidgetData} from "qqq/components/widgets/Widget";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React from "react";
+import {Link} from "react-router-dom";
+
+/*******************************************************************************
+ ** Utility class used by Widgets
+ **
+ *******************************************************************************/
+export class WidgetUtils
+{
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static generateExportButton = (onExportClick: () => void): JSX.Element =>
+   {
+      return (<Typography key={1} variant="body2" py={0} 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>);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static generateLabelLink = (linkText: string, linkURL: string): JSX.Element =>
+   {
+      return (<Box key={1} fontSize="1rem" pl={1} display="inline" position="relative">
+         (<Link to={linkURL}>{linkText}</Link>)
+      </Box>);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static widgetCsvDataToString = (data: WidgetData): string =>
+   {
+      function isNumeric(x: any)
+      {
+         return !isNaN(Number(x));
+      }
+
+      let csv = "";
+      for (let i = 0; i < data.csvData.length; i++)
+      {
+         for (let j = 0; j < data.csvData[i].length; j++)
+         {
+            if (j > 0)
+            {
+               csv += ",";
+            }
+
+            let cell = data.csvData[i][j];
+            if (cell && isNumeric(String(cell)))
+            {
+               csv += cell;
+            }
+            else
+            {
+               csv += `"${ValueUtils.cleanForCsv(cell)}"`;
+            }
+         }
+         csv += "\n";
+      }
+
+      return (csv);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static makeExportFileName = (data: WidgetData, widgetMetaData: QWidgetMetaData): string =>
+   {
+      const fileName = (data?.label ?? widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
+      return (fileName);
+   };
+
+}

src/qqq/components/widgets/blocks/BigNumberBlock.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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 BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders ... a big number, optionally with some other stuff.
+ **
+ ** ${heading}
+ ** ${number} ${context}
+ *******************************************************************************/
+export default function BigNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   let flexJustifyContent = "normal";
+   let flexAlignItems = "baseline";
+
+   return (
+      <div style={{width: data.styles.width ?? "auto"}}>
+
+         <div style={{fontWeight: "700", fontSize: "0.875rem", color: "#3D3D3D", marginBottom: "-0.5rem"}}>
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
+               <span>{data.values.heading}</span>
+            </BlockElementWrapper>
+         </div>
+
+         <div style={{display: "flex", alignItems: flexAlignItems, justifyContent: flexJustifyContent}}>
+
+            <div style={{display: "flex", alignItems: "baseline"}}>
+               <div style={{fontWeight: "700", fontSize: "2rem", marginRight: "0.25rem"}}>
+                  <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
+                     <span style={{color: data.styles.numberColor}}>{data.values.number}</span>
+                  </BlockElementWrapper>
+               </div>
+               {
+                  data.values.context &&
+                  <div style={{fontWeight: "500", fontSize: "0.875rem", color: "#7b809a"}}>
+                     <BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
+                        <span>{data.values.context}</span>
+                     </BlockElementWrapper>
+                  </div>
+               }
+            </div>
+
+         </div>
+      </div>
+   );
+}

src/qqq/components/widgets/blocks/BlockElementWrapper.tsx

@@ -0,0 +1,120 @@
+/*
+ * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {Box, Tooltip} from "@mui/material";
+import QContext from "QContext";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
+import {BlockData, BlockLink, BlockTooltip} from "qqq/components/widgets/blocks/BlockModels";
+import CompositeWidget from "qqq/components/widgets/CompositeWidget";
+import React, {ReactElement, useContext} from "react";
+import {Link} from "react-router-dom";
+
+interface BlockElementWrapperProps
+{
+   data: BlockData;
+   metaData: QWidgetMetaData;
+   slot: string;
+   linkProps?: any;
+   children: ReactElement;
+}
+
+/*******************************************************************************
+ ** For Blocks - wrap their "slot" elements with an optional tooltip and/or link
+ *******************************************************************************/
+export default function BlockElementWrapper({data, metaData, slot, linkProps, children}: BlockElementWrapperProps): JSX.Element
+{
+   const {helpHelpActive} = useContext(QContext);
+
+   let link: BlockLink;
+   let tooltip: BlockTooltip;
+
+   if (slot)
+   {
+      link = data.linkMap && data.linkMap[slot.toUpperCase()];
+      if (!link)
+      {
+         link = data.link;
+      }
+
+      tooltip = data.tooltipMap && data.tooltipMap[slot.toUpperCase()];
+      if (!tooltip)
+      {
+         tooltip = data.tooltip;
+      }
+   }
+   else
+   {
+      link = data.link;
+      tooltip = data.tooltip;
+   }
+
+   if (!tooltip)
+   {
+      const helpRoles = ["ALL_SCREENS"];
+
+      ///////////////////////////////////////////////////////////////////////////////////////////////
+      // the full keys in the helpContent table will look like:                                    //
+      // widget:MyCoolWidget;slot=myBlockId,label (if the block has a blockId in data)             //
+      // widget:MyCoolWidget;slot=label (no blockId; note, label is slot name here)                //
+      // in the widget metaData, the map of helpContent will just have the "slot" portion as a key //
+      ///////////////////////////////////////////////////////////////////////////////////////////////
+      const key = data.blockId ? `${data.blockId},${slot}` : slot;
+      const showHelp = helpHelpActive || hasHelpContent(metaData?.helpContent?.get(key), helpRoles);
+
+      if (showHelp)
+      {
+         const formattedHelpContent = <HelpContent helpContents={metaData?.helpContent?.get(key)} roles={helpRoles} helpContentKey={`widget:${metaData?.name};slot:${key}`} />;
+         tooltip = {title: formattedHelpContent, placement: "bottom"};
+      }
+   }
+
+   let rs = children;
+
+   if (link && link.href)
+   {
+      rs = <Link to={link.href} target={link.target} style={{color: "#546E7A"}} {...linkProps}>{rs}</Link>;
+   }
+
+   if (tooltip)
+   {
+      let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom";
+
+      // @ts-ignore - placement possible values
+      if (tooltip.blockData)
+      {
+         // @ts-ignore - special case for composite type block...
+         rs = <Tooltip title={
+            <Box sx={{width: "200px"}}>
+               <CompositeWidget widgetMetaData={metaData} data={tooltip?.blockData} />
+            </Box>
+         }>{rs}</Tooltip>;
+      }
+      else
+      {
+         // @ts-ignore - placement possible values
+         rs = <Tooltip title={tooltip.title} placement={placement}>{rs}</Tooltip>;
+      }
+   }
+
+   return (rs);
+}

src/qqq/components/widgets/blocks/BlockModels.ts

@@ -0,0 +1,61 @@
+/*
+ * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {CompositeData} from "qqq/components/widgets/CompositeWidget";
+
+
+export interface BlockData
+{
+   blockId?: string;
+   blockTypeName: string;
+
+   tooltip?: BlockTooltip;
+   link?: BlockLink;
+   tooltipMap?: { [slot: string]: BlockTooltip };
+   linkMap?: { [slot: string]: BlockLink };
+
+   values: any;
+   styles?: any;
+}
+
+
+export interface BlockTooltip
+{
+   blockData?: CompositeData;
+   title: string | JSX.Element;
+   placement: string;
+}
+
+
+export interface BlockLink
+{
+   href: string;
+   target: string;
+}
+
+
+export interface StandardBlockComponentProps
+{
+   widgetMetaData: QWidgetMetaData;
+   data: BlockData;
+}
+

src/qqq/components/widgets/blocks/DividerBlock.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders a simple dividing line
+ ** margins & width are set such that it covers the padding of a card.
+ ** if we need to use it differently, a style attribute should be added to its backend data.
+ *******************************************************************************/
+export default function DividerBlock({}: StandardBlockComponentProps): JSX.Element
+{
+   return (<div style={{margin: "1rem -1rem", width: "calc(100% + 2rem)", borderBottom: "1px solid #E0E0E0"}} />);
+}

src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+/*******************************************************************************
+ ** Block that renders ... a number, and an icon, like a badge.
+ **
+ ** ${number} ${icon}
+ *******************************************************************************/
+export default function NumberIconBadgeBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <div style={{display: "inline-block", whiteSpace: "nowrap", color: data.styles.color}}>
+         {
+            data.values.number &&
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
+               <span style={{color: data.styles.color, fontSize: "0.875rem"}}>{data.values.number}</span>
+            </BlockElementWrapper>
+         }
+         {
+            data.values.iconName &&
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="icon">
+               <Icon style={{color: data.styles.color, fontSize: "1rem", marginLeft: "2px", position: "relative", top: "4px"}}>{data.values.iconName}</Icon>
+            </BlockElementWrapper>
+         }
+      </div>);
+}

src/qqq/components/widgets/blocks/ProgressBarBlock.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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 Typography from "@mui/material/Typography";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders a progress bar!
+ **
+ ** Values:
+ **    ${heading}
+ **    [${percent}===___] ${value ?? percent}
+ **
+ ** Slots:
+ **    ${heading}
+ **    ${bar}             ${value}
+ *******************************************************************************/
+export default function ProgressBarBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <Typography component="div" variant="button" color="text" fontWeight="light" sx={{textTransform: "none"}}>
+         {
+            data.values.heading &&
+            <div style={{marginBottom: "0.25rem", fontWeight: 500, color: "#3D3D3D"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
+                  <span>{data.values.heading}</span>
+               </BlockElementWrapper>
+            </div>
+         }
+
+         <div style={{display: "flex", alignItems: "center", marginBottom: "0.75rem"}}>
+
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="bar" linkProps={{style: {width: "100%"}}}>
+               <div style={{background: "#E0E0E0", width: "100%", borderRadius: "0.5rem", height: "1rem"}}>
+                  {
+                     data.values.percent > 0 ? <div style={{background: data.styles.barColor ?? "#0062ff", minWidth: "1rem", width: `${data.values.percent}%`, borderRadius: "0.5rem", height: "1rem"}}></div> : <></>
+                  }
+               </div>
+            </BlockElementWrapper>
+
+            <div style={{width: "60px", textAlign: "right", fontWeight: 600, color: "#3D3D3D"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
+                  <span>{data.values.value ?? `${(data.values.percent as number).toFixed(1)}%`}</span>
+               </BlockElementWrapper>
+            </div>
+
+         </div>
+      </Typography>);
+
+}

src/qqq/components/widgets/blocks/TableSubRowDetailRowBlock.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders a label & value, meant to be used as a detail-row in a
+ ** sub-row within a table widget
+ **
+ ** ${label} ${value}
+ *******************************************************************************/
+export default function TableSubRowDetailRowBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <div style={{display: "flex", maxWidth: "calc(100% - 24px)", justifyContent: "space-between"}}>
+
+         {
+            data.values.label &&
+            <div style={{overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="label">
+                  <span style={{color: data.styles.labelColor}}>{data.values.label}</span>
+               </BlockElementWrapper>
+            </div>
+         }
+
+         {
+            data.values.value &&
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
+               <span style={{color: data.styles.valueColor}}>{data.values.value}</span>
+            </BlockElementWrapper>
+         }
+      </div>
+   );
+}

src/qqq/components/widgets/blocks/TextBlock.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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 BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+/*******************************************************************************
+ ** Block that renders ... just some text.
+ **
+ ** ${text}
+ *******************************************************************************/
+export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+         <span style={{fontSize: "1.000rem"}}>{data.values.text}</span>
+      </BlockElementWrapper>
+   );
+}

src/qqq/components/widgets/blocks/UpOrDownNumberBlock.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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 React from "react";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders an up/down icon, a number, and some context
+ **
+ ** ${icon} ${number} ${context}
+ *
+ ** or, if style.isStacked:
+ *
+ ** ${icon} ${number}
+ ** ${context}
+ *******************************************************************************/
+export default function UpOrDownNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   if (!data.styles)
+   {
+      data.styles = {};
+   }
+
+   if (!data.values)
+   {
+      data.values = {};
+   }
+
+   const UP_ICON = "arrow_drop_up";
+   const DOWN_ICON = "arrow_drop_down";
+
+   const defaultGreenColor = "#2BA83F";
+   const defaultRedColor = "#FB4141";
+
+   const goodOrBadColor = data.styles.colorOverride ?? (data.values.isGood ? defaultGreenColor : defaultRedColor);
+   const iconName = data.values.isUp ? UP_ICON : DOWN_ICON;
+
+   return (
+      <>
+         <div style={{display: "flex", flexDirection: data.styles.isStacked ? "column" : "row", alignItems: data.styles.isStacked ? "flex-end" : "baseline"}}>
+
+            <div style={{display: "flex", alignItems: "baseline", fontWeight: 700, fontSize: ".875rem"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
+                  <>
+                     <Icon sx={{color: goodOrBadColor, alignSelf: "flex-end", fontSize: "2.25rem !important", lineHeight: "0.875rem", height: "1rem", width: "2rem",}}>{iconName}</Icon>
+                     <span style={{color: goodOrBadColor}}>{data.values.number}</span>
+                  </>
+               </BlockElementWrapper>
+            </div>
+
+            <div style={{fontWeight: 500, fontSize: "0.875rem", color: "#7b809a", marginLeft: "0.25rem"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
+                  <span>{data.values.context}</span>
+               </BlockElementWrapper>
+            </div>
+
+         </div>
+      </>
+   );
+}

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

@@ -39,65 +39,79 @@ ChartJS.register(
    Legend
 );
 
-export const options = {
-   maintainAspectRatio: false,
-   responsive: true,
-   animation: {
-      duration: 0
-   },
-   elements: {
-      bar: {
-         borderRadius: 4
-      }
-   },
-   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
+export const makeOptions = (data: DefaultChartData) =>
+{
+   return({
+      maintainAspectRatio: false,
+      responsive: true,
+      animation: {
+         duration: 0
+      },
+      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
                }
             }
          }
       },
-      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}
+      scales: {
+         x: {
+            stacked: true,
+            grid: {display: false},
+            ticks: {autoSkip: false, maxRotation: 90}
+         },
+         y: {
+            stacked: true,
+            position: "right",
+            ticks: {precision: 0}
+         },
       },
-      y: {
-         stacked: true,
-         position: "right",
-         ticks: {precision: 0}
-      },
-   },
-};
+   });
+}
 
 interface Props
 {
@@ -151,7 +165,7 @@ function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
       <Box>
          {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
          <Box width="100%" height="300px">
-            <Bar data={data} options={options} getElementsAtEvent={handleClick} />
+            <Bar data={data} options={makeOptions(data)} getElementsAtEvent={handleClick} />
          </Box>
       </Box>
    ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} />;

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

@@ -70,7 +70,7 @@ function PieChart({description, chartData, chartSubheaderData}: Props): JSX.Elem
          chartData.dataset.backgroundColors = chartColors;
       }
    }
-   const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {});
+   const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {}, chartData?.dataset?.urls);
 
    useEffect(() =>
    {

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

@@ -23,7 +23,7 @@ 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 = [];
 
@@ -66,6 +66,17 @@ function configs(labels: any, datasets: any)
       options: {
          maintainAspectRatio: false,
          responsive: true,
+         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: {

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

@@ -19,18 +19,23 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Collapse, Theme, InputAdornment} from "@mui/material";
+import {CalendarTodayOutlined} from "@mui/icons-material";
+import {Collapse, InputAdornment, Theme} 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 {DatePicker, DateValidationError, LocalizationProvider, PickerChangeHandlerContext, PickerValidDate} from "@mui/x-date-pickers";
+import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
+import dayjs from "dayjs";
 import {Field, Form, Formik} from "formik";
-import React, {useState} from "react";
+import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import MDInput from "qqq/components/legacy/MDInput";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useState} from "react";
 
 
 export interface DropdownOption
@@ -45,6 +50,7 @@ export interface DropdownOption
 interface Props
 {
    name: string;
+   type?: string;
    defaultValue?: any;
    label?: string;
    startIcon?: string;
@@ -96,7 +102,7 @@ function makeBackendValuesFromFrontendValues(frontendDefaultValues: StartAndEndD
    return (backendTimeValues);
 }
 
-function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disableClearable, allowBackAndForth, backAndForthInverted, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
+function WidgetDropdownMenu({name, type, 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);
@@ -105,16 +111,27 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
 
    const [isOpen, setIsOpen] = useState(false);
    const [value, setValue] = useState(defaultValue);
+   const [dateValue, setDateValue] = useState(defaultValue);
    const [inputValue, setInputValue] = useState("");
 
    const [backDisabled, setBackDisabled] = useState(false);
    const [forthDisabled, setForthDisabled] = useState(false);
 
+   const {accentColor} = useContext(QContext);
+
    const doForceOpen = (event: React.MouseEvent<HTMLDivElement>) =>
    {
       setIsOpen(true);
    };
 
+   useEffect(() =>
+   {
+      if (type == "DATE_PICKER")
+      {
+         handleOnChange(null, defaultValue, null);
+      }
+   }, [defaultValue]);
+
    function getSelectedIndex(value: DropdownOption)
    {
       let currentIndex = null;
@@ -129,9 +146,19 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
       return currentIndex;
    }
 
-   const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1) =>
+
+   const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1, type: string) =>
    {
       event.stopPropagation();
+
+      if (type == "DATE_PICKER")
+      {
+         let currentDate = new Date(dateValue);
+         currentDate.setDate(currentDate.getDate() + direction);
+         handleOnChange(null, currentDate, null);
+         return;
+      }
+
       let currentIndex = getSelectedIndex(value);
 
       if (currentIndex == null)
@@ -156,9 +183,26 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
    };
 
 
+   const handleDatePickerOnChange = (value: PickerValidDate, context: PickerChangeHandlerContext<DateValidationError>) =>
+   {
+      if (value.isValid())
+      {
+         handleOnChange(null, value.toDate(), null);
+      }
+   };
+
+
    const handleOnChange = (event: any, newValue: any, reason: string) =>
    {
-      setValue(newValue);
+      if (type == "DATE_PICKER")
+      {
+         setDateValue(newValue);
+         newValue = {"id": new Date(newValue).toLocaleDateString()};
+      }
+      else
+      {
+         setValue(newValue);
+      }
 
       const isTimeframeCustom = name == "timeframe" && newValue && newValue.id == "custom";
       setCustomTimesVisible(isTimeframeCustom);
@@ -250,86 +294,123 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
 
    const fontSize = "1rem";
    let optionPaddingLeftRems = 0.75;
-   if(startIcon)
+   if (startIcon)
    {
-      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75
+      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75;
    }
-   if(allowBackAndForth)
+   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}
+   if (type == "DATE_PICKER")
+   {
+      return (
+         <Box sx={{
+            ...sx,
+            background: "white",
+            width: "250px",
+            borderRadius: "0.75rem !important",
+            border: `1px solid ${colors.grayLines.main}`,
+            "& *": {cursor: "pointer"}
+         }} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
+            {allowBackAndForth && <IconButton sx={{padding: 0, margin: "8px"}} onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1, type)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+               <DatePicker
+                  sx={{paddingRight: "8px"}}
+                  defaultValue={dayjs(defaultValue)}
+                  name={name}
+                  value={dayjs(dateValue)}
+                  onChange={handleDatePickerOnChange}
+                  slots={{
+                     openPickerIcon: CalendarTodayOutlined
+                  }}
+                  slotProps={{
+                     openPickerIcon: {sx: {fontSize: "1.25rem !important", color: "#757575"}},
+                     actionBar: {actions: ["today"]},
+                     textField: {variant: "standard", InputProps: {sx: {fontSize: "16px", color: "#495057"}, disableUnderline: true}}
+                  }}
+               />
+            </LocalizationProvider>
+            {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1, type)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
          </Box>
-      ) : null
-   );
+      );
+   }
+   else
+   {
+      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, type)} 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, type)} 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

@@ -25,14 +25,13 @@ import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QC
 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 {Chip} from "@mui/material";
 import Alert from "@mui/material/Alert";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Chip from "@mui/material/Chip";
 import Divider from "@mui/material/Divider";
 import Grid from "@mui/material/Grid";
-import Icon from "@mui/material/Icon";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
@@ -42,8 +41,6 @@ import Snackbar from "@mui/material/Snackbar";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
-import React, {useReducer, useState} from "react";
-import AceEditor from "react-ace";
 import DataBagDataEditor, {DataBagDataEditorProps} from "qqq/components/databags/DataBagDataEditor";
 import DataBagPreview from "qqq/components/databags/DataBagPreview";
 import TabPanel from "qqq/components/misc/TabPanel";
@@ -57,6 +54,8 @@ import "ace-builds/src-noconflict/mode-java";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-github";
+import React, {useReducer, useState} from "react";
+import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/ext-language_tools";
 
 const qController = Client.getInstance();
@@ -64,12 +63,11 @@ const qController = Client.getInstance();
 // Declaring props types for ViewForm
 interface Props
 {
-   dataBagId: number
+   dataBagId: number;
 }
 
 DataBagViewer.defaultProps =
-   {
-   };
+   {};
 
 export default function DataBagViewer({dataBagId}: Props): JSX.Element
 {
@@ -77,12 +75,12 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
    const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
    const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
-   const [currentVersionId , setCurrentVersionId] = useState(null as number);
+   const [currentVersionId, setCurrentVersionId] = useState(null as number);
    const [notFoundMessage, setNotFoundMessage] = useState(null);
    const [selectedTab, setSelectedTab] = useState(0);
    const [editorProps, setEditorProps] = useState(null as DataBagDataEditorProps);
    const [successText, setSuccessText] = useState(null as string);
-   const [failText, setFailText] = useState(null as string)
+   const [failText, setFailText] = useState(null as string);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading"));
@@ -100,13 +98,13 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
 
             const criteria = [new QFilterCriteria("dataBagId", QCriteriaOperator.EQUALS, [dataBagId])];
             const orderBys = [new QFilterOrderBy("sequenceNo", false)];
-            const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25);
+            const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
             const versions = await qController.query("dataBagVersion", filter);
             console.log("Fetched versions:");
             console.log(versions);
             setVersionRecordList(versions);
 
-            if(versions && versions.length > 0)
+            if (versions && versions.length > 0)
             {
                setCurrentVersionId(versions[0].values.get("id"));
                const latestVersion = await qController.get("dataBagVersion", versions[0].values.get("id"));
@@ -121,7 +119,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
          {
             if (e instanceof QException)
             {
-               if ((e as QException).status === "404")
+               if ((e as QException).status === 404)
                {
                   setNotFoundMessage("Data bag data could not be found.");
                   return;
@@ -362,7 +360,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
                                              <Typography variant="h6" pl={3}>Data Preview (Version {selectedVersionRecord?.values?.get("sequenceNo")})</Typography>
                                           </Box>
                                           <Box height="400px" overflow="auto" ml={1} fontSize="14px">
-                                             {loadingSelectedVersion.isNotLoading() && selectedTab == 1 && selectedVersionRecord?.values?.get("data") && <DataBagPreview json={selectedVersionRecord?.values?.get("data")} /> }
+                                             {loadingSelectedVersion.isNotLoading() && selectedTab == 1 && selectedVersionRecord?.values?.get("data") && <DataBagPreview json={selectedVersionRecord?.values?.get("data")} />}
                                              {loadingSelectedVersion.isLoadingSlow() && <Box pl={3}>Loading...</Box>}
                                           </Box>
                                        </Grid>
@@ -377,7 +375,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
                            <Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}>
                               <DataBagDataEditor
                                  closeCallback={closeEditingScript}
-                                 {... editorProps}
+                                 {...editorProps}
                               />
                            </Modal>
                         }

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

@@ -0,0 +1,265 @@
+/*
+ * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import Box from "@mui/material/Box";
+import {FormikContextType, useFormikContext} from "formik";
+import QDynamicForm from "qqq/components/forms/DynamicForm";
+import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
+import Widget from "qqq/components/widgets/Widget";
+import {renderSectionOfFields} from "qqq/pages/records/view/RecordView";
+import Client from "qqq/utils/qqq/Client";
+import React, {useEffect, useState} from "react";
+
+
+/*******************************************************************************
+ ** component props
+ *******************************************************************************/
+interface DynamicFormWidgetProps
+{
+   isEditable: boolean;
+   widgetMetaData: QWidgetMetaData;
+   widgetData: any;
+   record: QRecord;
+   recordValues: { [name: string]: any };
+   onSaveCallback?: (values: { [name: string]: any }) => void;
+}
+
+
+/*******************************************************************************
+ ** default values for props
+ *******************************************************************************/
+DynamicFormWidget.defaultProps = {
+   onSaveCallback: null
+};
+
+
+/*******************************************************************************
+ ** Component to display a dynamic form - e.g., on a record edit or view screen,
+ ** or even within a process.
+ *******************************************************************************/
+export default function DynamicFormWidget({isEditable, widgetMetaData, widgetData, record, recordValues, onSaveCallback}: DynamicFormWidgetProps): JSX.Element
+{
+   const [fields, setFields] = useState([] as QFieldMetaData[]);
+
+   const [effectiveIsEditable, setEffectiveIsEditable] = useState(isEditable);
+   if(widgetMetaData.defaultValues.has("isEditable"))
+   {
+      const defaultIsEditableValue = widgetMetaData.defaultValues.get("isEditable")
+      if(defaultIsEditableValue != effectiveIsEditable)
+      {
+         setEffectiveIsEditable(defaultIsEditableValue);
+      }
+   }
+
+   const [dynamicFormFields, setDynamicFormFields] = useState(null as any);
+   const [formValidations, setFormValidations] = useState(null as any);
+
+   const [lastKnowFormValues, setLastKnowFormValues] = useState({} as {[name: string]: any});
+
+
+   //////////////////////////////////////////////////////////////////////////////////////////
+   // on initial load, and any time widgetData changes (e.g., if widget gets re-rendered), //
+   // figure out what our form fields are                                                  //
+   //////////////////////////////////////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      setDynamicFormFields({})
+      setFormValidations({})
+
+      if(widgetData && widgetData.fieldList)
+      {
+         const newFields: QFieldMetaData[] = [];
+         for (let i = 0; i < widgetData.fieldList.length; i++)
+         {
+            newFields.push(new QFieldMetaData(widgetData.fieldList[i]));
+         }
+         setFields(newFields);
+
+         if(newFields.length > 0)
+         {
+            const recordOfFieldValues = widgetData.recordOfFieldValues ? new QRecord(widgetData.recordOfFieldValues) : null;
+            const {dynamicFormFields: newDynamicFormFields, formValidations: newFormValidations} = DynamicFormUtils.getFormData(newFields);
+            const defaultDisplayValues = new Map<string,string>(); // todo - seems not right?
+            DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, newFields, recordValues.tableName, null, recordOfFieldValues ? recordOfFieldValues.displayValues : defaultDisplayValues);
+            setDynamicFormFields(newDynamicFormFields)
+            setFormValidations(newFormValidations)
+         }
+
+         setLastKnowFormValues({});
+      }
+      else
+      {
+         setFields([])
+      }
+   }, [widgetData]);
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function checkForFormValueChanges(formikProps: FormikContextType<any>)
+   {
+      if(!fields || !fields.length)
+      {
+         return;
+      }
+
+      let anyChanged = false;
+      for (let i = 0; i < fields.length; i++)
+      {
+         const name = fields[i].name;
+         if(formikProps.values[name] != lastKnowFormValues[name])
+         {
+            anyChanged = true;
+            lastKnowFormValues[name] = formikProps.values[name];
+         }
+      }
+
+      if(anyChanged)
+      {
+         const mergedDynamicFormValuesIntoFieldName = widgetData.mergedDynamicFormValuesIntoFieldName;
+         if(mergedDynamicFormValuesIntoFieldName && onSaveCallback)
+         {
+            const onSaveCallbackParam: {[name: string]: any} = {};
+            onSaveCallbackParam[mergedDynamicFormValuesIntoFieldName] = JSON.stringify(lastKnowFormValues);
+            onSaveCallback(onSaveCallbackParam);
+         }
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getInitialValue(fieldName: string)
+   {
+      for (let i = 0; i < fields?.length; i++)
+      {
+         if(fields[i].name == fieldName && fields[i].defaultValue)
+         {
+            return (fields[i].defaultValue)
+         }
+      }
+
+      return (null);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderEditForm()
+   {
+      const formikProps = useFormikContext();
+      if(!fields || !fields.length)
+      {
+         return (
+            <Box>
+               <Box fontSize="1rem">{widgetData && widgetData.noFieldsMessage}</Box>
+            </Box>
+         );
+      }
+
+      const formData: any = {};
+      formData.values = formikProps.values;
+      formData.touched = formikProps.touched;
+      formData.errors = formikProps.errors;
+      formData.formFields = {};
+
+      // todo - merge the formValidations object with formik's - maybe in the useEffect where we build it
+      // setValidations(Yup.object().shape(formValidations));
+      // formikProps.validationSchema.
+
+      for (let key of Object.keys(dynamicFormFields))
+      {
+         const dynamicFormField = dynamicFormFields[key];
+         formData.formFields[dynamicFormField.name] = dynamicFormField;
+
+         const initialValue = getInitialValue(dynamicFormField.name);
+         if(initialValue != null)
+         {
+            console.log(`@dk trying to set an initial value [${dynamicFormField.name}] to [${initialValue}]`);
+            // @ts-ignore some any
+            formikProps.initialValues[dynamicFormField.name] = initialValue;
+         }
+      }
+
+      if(formData.values)
+      {
+         checkForFormValueChanges(formikProps);
+      }
+
+      return (
+         <Box>
+            <QDynamicForm formData={formData} record={record} />
+         </Box>
+      );
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderViewForm()
+   {
+      const fieldNames: string[] = [];
+      const fieldMap: {[name: string]: QFieldMetaData} = {};
+      const fakeRecord = new QRecord(widgetData.recordOfFieldValues ?? {});
+
+      const mergedDynamicFormValuesIntoFieldName = widgetData.mergedDynamicFormValuesIntoFieldName;
+
+      for (let i = 0; i < fields?.length; i++)
+      {
+         const fieldName = fields[i].name;
+         fieldNames.push(fieldName);
+         fieldMap[fieldName] = fields[i];
+
+         if(mergedDynamicFormValuesIntoFieldName && recordValues[mergedDynamicFormValuesIntoFieldName])
+         {
+            fakeRecord.values.set(fieldName, recordValues[mergedDynamicFormValuesIntoFieldName][fieldName]);
+         }
+      }
+
+      const section = renderSectionOfFields(`dynamicFormWidget:${widgetMetaData.name}`, fieldNames, null, false, fakeRecord, fieldMap);
+
+      return (<Box>
+         {section}
+      </Box>);
+   }
+
+
+   ////////////
+   // render //
+   ////////////
+   return (<Widget widgetMetaData={widgetMetaData}>
+      {
+         <React.Fragment>
+            {effectiveIsEditable ? renderEditForm() : renderViewForm()}
+         </React.Fragment>
+      }
+   </Widget>);
+}
+

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

@@ -0,0 +1,443 @@
+/*
+ * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
+import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {Alert, Collapse} from "@mui/material";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import Modal from "@mui/material/Modal";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
+import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
+import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
+import AdvancedQueryPreview from "qqq/components/query/AdvancedQueryPreview";
+import {getCurrentSortIndicator} from "qqq/components/query/BasicAndAdvancedQueryControls";
+import Widget, {HeaderLinkButtonComponent} from "qqq/components/widgets/Widget";
+import QQueryColumns, {Column} from "qqq/models/query/QQueryColumns";
+import RecordQuery from "qqq/pages/records/query/RecordQuery";
+import Client from "qqq/utils/qqq/Client";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import React, {useContext, useEffect, useRef, useState} from "react";
+
+interface FilterAndColumnsSetupWidgetProps
+{
+   isEditable: boolean;
+   widgetMetaData: QWidgetMetaData;
+   widgetData: any;
+   recordValues: { [name: string]: any };
+   onSaveCallback?: (values: { [name: string]: any }) => void;
+}
+
+FilterAndColumnsSetupWidget.defaultProps = {
+   onSaveCallback: null
+};
+
+export const buttonSX =
+   {
+      border: `1px solid ${colors.grayLines.main} !important`,
+      borderRadius: "0.75rem",
+      textTransform: "none",
+      fontSize: "1rem",
+      fontWeight: "400",
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+      opacity: "1",
+      color: colors.dark.main,
+      "&:hover": {color: colors.dark.main},
+      "&:focus": {color: colors.dark.main},
+      "&:focus:not(:hover)": {color: colors.dark.main},
+   };
+
+export const unborderedButtonSX = Object.assign({}, buttonSX);
+unborderedButtonSX.border = "none !important";
+unborderedButtonSX.opacity = "0.7";
+
+
+const qController = Client.getInstance();
+
+/*******************************************************************************
+ ** Component for editing the main setup of a report - that is: filter & columns
+ *******************************************************************************/
+export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData, widgetData, recordValues, onSaveCallback}: FilterAndColumnsSetupWidgetProps): JSX.Element
+{
+   const [modalOpen, setModalOpen] = useState(false);
+   const [hideColumns, setHideColumns] = useState(widgetData?.hideColumns);
+   const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
+
+   const [alertContent, setAlertContent] = useState(null as string);
+
+   //////////////////////////////////////////////////////////////////////////////////////////////////
+   // we'll actually keep 2 copies of the query filter around here -                               //
+   // the one in the record (as json) is one that the backend likes (e.g., possible values as ids) //
+   // this "frontend" one is one that the frontend can use (possible values as objects w/ labels). //
+   //////////////////////////////////////////////////////////////////////////////////////////////////
+   const [frontendQueryFilter, setFrontendQueryFilter] = useState(null as QQueryFilter);
+
+   const {helpHelpActive} = useContext(QContext);
+
+   const recordQueryRef = useRef();
+
+   /////////////////////////////
+   // load values from record //
+   /////////////////////////////
+   let columns: QQueryColumns = null;
+   let usingDefaultEmptyFilter = false;
+   let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
+   const defaultFilterFields = widgetData?.filterDefaultFieldNames;
+   if (!queryFilter)
+   {
+      queryFilter = new QQueryFilter();
+      if (defaultFilterFields?.length == 0)
+      {
+         usingDefaultEmptyFilter = true;
+      }
+   }
+   else
+   {
+      queryFilter = Object.assign(new QQueryFilter(), queryFilter);
+   }
+
+   //////////////////////////////////////////////////////////////////////////////////////////////////////
+   // if there are default fields from which a query should be seeded, add/update the filter with them //
+   //////////////////////////////////////////////////////////////////////////////////////////////////////
+   if (defaultFilterFields?.length > 0)
+   {
+      defaultFilterFields.forEach((fieldName: string) =>
+      {
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         // if a value for the default field exists, remove the criteria for it in our query first //
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         queryFilter.criteria = queryFilter.criteria?.filter(c => c.fieldName != fieldName);
+
+         if (recordValues[fieldName])
+         {
+            queryFilter.addCriteria(new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [recordValues[fieldName]]));
+         }
+      });
+   }
+
+   if (recordValues["columnsJson"])
+   {
+      columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
+   }
+
+   //////////////////////////////////////////////////////////////////////
+   // load tableMetaData initially, and if/when selected table changes //
+   //////////////////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      ////////////////////////////////////////////////////////////////////////////////////////
+      // if a default table name specified, use it, otherwise use it from the record values //
+      ////////////////////////////////////////////////////////////////////////////////////////
+      let tableName = widgetData?.tableName;
+      if (!tableName && recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
+      {
+         tableName = recordValues["tableName"];
+      }
+
+      if (tableName)
+      {
+         (async () =>
+         {
+            const tableMetaData = await qController.loadTableMetaData(tableName);
+            setTableMetaData(tableMetaData);
+
+            const queryFilterForFrontend = Object.assign({}, queryFilter);
+            await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend);
+            setFrontendQueryFilter(queryFilterForFrontend);
+         })();
+      }
+   }, [JSON.stringify(recordValues)]);
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openEditor()
+   {
+      let missingRequiredFields = [] as string[];
+      widgetData?.filterDefaultFieldNames?.forEach((fieldName: string) =>
+      {
+         if (!recordValues[fieldName])
+         {
+            missingRequiredFields.push(tableMetaData.fields.get(fieldName).label);
+         }
+      });
+
+      ////////////////////////////////////////////////////////////////////
+      // display an alert and return if any required fields are missing //
+      ////////////////////////////////////////////////////////////////////
+      if (missingRequiredFields.length > 0)
+      {
+         setAlertContent("The following fields must first be selected to edit the filter: '" + missingRequiredFields.join(", ") + "'");
+         return;
+      }
+
+      if (recordValues["tableName"])
+      {
+         setAlertContent(null);
+         setModalOpen(true);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function saveClicked()
+   {
+      if (!onSaveCallback)
+      {
+         console.log("onSaveCallback was not defined");
+         return;
+      }
+
+      // @ts-ignore possibly 'undefined'.
+      const view = recordQueryRef?.current?.getCurrentView();
+
+      view.queryColumns.sortColumnsFixingPinPositions();
+
+      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // keep the query filter that came from the recordQuery screen as the front-end version (w/ possible value objects) //
+      // but prep a copy of it for the backend, to stringify as json in the record being edited                           //
+      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      setFrontendQueryFilter(view.queryFilter);
+      const filter = FilterUtils.prepQueryFilterForBackend(tableMetaData, view.queryFilter);
+
+      onSaveCallback({queryFilterJson: JSON.stringify(filter), columnsJson: JSON.stringify(view.queryColumns)});
+
+      closeEditor();
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
+   {
+      if (reason == "backdropClick" || reason == "escapeKeyDown")
+      {
+         return;
+      }
+
+      setModalOpen(false);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderColumn(column: Column): JSX.Element
+   {
+      const [field, table] = FilterUtils.getField(tableMetaData, column.name);
+
+      if (!column || !column.isVisible || column.name == "__check__" || !field)
+      {
+         return (<React.Fragment />);
+      }
+
+      const tableLabelPart = table.name != tableMetaData.name ? table.label + ": " : "";
+
+      return (<Box mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">
+         {tableLabelPart}{field.label}
+      </Box>);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function mayShowQueryPreview(): boolean
+   {
+      if (tableMetaData)
+      {
+         if (frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
+         {
+            return (true);
+         }
+      }
+
+      return (false);
+   }
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function mayShowColumnsPreview(): boolean
+   {
+      if (tableMetaData)
+      {
+         for (let i = 0; i < columns?.columns?.length; i++)
+         {
+            if (columns.columns[i].isVisible && columns.columns[i].name != "__check__")
+            {
+               return (true);
+            }
+         }
+      }
+
+      return (false);
+   }
+
+   const helpRoles = isEditable ? [recordValues["id"] ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"] : ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function showHelp(slot: string)
+   {
+      return (helpHelpActive || hasHelpContent(widgetMetaData?.helpContent?.get(slot), helpRoles));
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getHelpContent(slot: string)
+   {
+      const key = `widget:${widgetMetaData.name};slot:${slot}`;
+      return <HelpContent helpContents={widgetMetaData?.helpContent?.get(slot)} roles={helpRoles} helpContentKey={key} />;
+   }
+
+   /////////////////////////////////////////////////
+   // add link to widget header for opening modal //
+   /////////////////////////////////////////////////
+   const selectTableFirstTooltipTitle = tableMetaData ? null : "You must select a table before you can set up your report filters and columns";
+   const labelAdditionalElementsRight: JSX.Element[] = [];
+   if (isEditable)
+   {
+      if (!hideColumns)
+      {
+         labelAdditionalElementsRight.push(<HeaderLinkButtonComponent key="filterAndColumnsHeader" label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />);
+      }
+      else
+      {
+         labelAdditionalElementsRight.push(<HeaderLinkButtonComponent key="filterAndColumnsHeader" label="Edit Filters" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />);
+      }
+   }
+
+
+   return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
+      <React.Fragment>
+         {
+            showHelp("sectionSubhead") &&
+            <Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
+               {getHelpContent("sectionSubhead")}
+            </Box>
+         }
+         <Collapse in={Boolean(alertContent)}>
+            <Alert severity="error" sx={{mt: 1.5, mb: 0.5}} onClose={() => setAlertContent(null)}>{alertContent}</Alert>
+         </Collapse>
+         <Box pt="0.5rem">
+            <Box display="flex" justifyContent="space-between" alignItems="center">
+               <h5>Query Filter</h5>
+               <Box fontSize="0.75rem" fontWeight="700">{mayShowQueryPreview() && getCurrentSortIndicator(frontendQueryFilter, tableMetaData, null)}</Box>
+            </Box>
+            {
+               mayShowQueryPreview() &&
+               <AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={frontendQueryFilter} isEditable={false} isQueryTooComplex={frontendQueryFilter.subFilters?.length > 0} removeCriteriaByIndexCallback={null} />
+            }
+            {
+               !mayShowQueryPreview() &&
+               <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.5rem"} p={"0.5rem"} pb={"0.125rem"} borderRadius="0.75rem" border={`1px solid ${colors.grayLines.main}`}>
+                  {
+                     isEditable &&
+                     <Tooltip title={selectTableFirstTooltipTitle}>
+                        <span><Button disabled={!recordValues["tableName"]} sx={{mb: "0.125rem", ...unborderedButtonSX}} onClick={openEditor}>+ Add Filters</Button></span>
+                     </Tooltip>
+                  }
+                  {
+                     !isEditable && <Box color={colors.gray.main}>No filters are configured.</Box>
+                  }
+               </Box>
+            }
+         </Box>
+         {!hideColumns && (
+            <Box pt="1rem">
+               <h5>Columns</h5>
+               <Box display="flex" flexWrap="wrap" fontSize="1rem">
+                  {
+                     mayShowColumnsPreview() &&
+                     columns.columns.map((column, i) => <React.Fragment key={`column-${i}`}>{renderColumn(column)}</React.Fragment>)
+                  }
+                  {
+                     !mayShowColumnsPreview() &&
+                     <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
+                        {
+                           isEditable &&
+                           <Tooltip title={selectTableFirstTooltipTitle}>
+                              <span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span>
+                           </Tooltip>
+                        }
+                        {
+                           !isEditable && <Box color={colors.gray.main}>No columns are selected.</Box>
+                        }
+                     </Box>
+                  }
+               </Box>
+            </Box>
+         )}
+         {
+            modalOpen &&
+            <Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
+               <div>
+                  <Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%"}}>
+                     <Card sx={{m: "2rem", p: "2rem"}}>
+                        <h3>Edit Filters and Columns</h3>
+                        {
+                           showHelp("modalSubheader") &&
+                           <Box color={colors.gray.main} pb={"0.5rem"}>
+                              {getHelpContent("modalSubheader")}
+                           </Box>
+                        }
+                        {
+                           tableMetaData && <RecordQuery
+                              allowVariables={widgetData?.allowVariables}
+                              ref={recordQueryRef}
+                              table={tableMetaData}
+                              usage="reportSetup"
+                              isModal={true}
+                              initialQueryFilter={usingDefaultEmptyFilter ? null : frontendQueryFilter}
+                              initialColumns={columns}
+                           />
+                        }
+
+                        <Box>
+                           <Box display="flex" justifyContent="flex-end">
+                              <QCancelButton disabled={false} onClickHandler={closeEditor} />
+                              <QSaveButton label="OK" iconName="check" disabled={false} onClickHandler={saveClicked} />
+                           </Box>
+                        </Box>
+                     </Card>
+                  </Box>
+               </div>
+            </Modal>
+         }
+      </React.Fragment>
+   </Widget>);
+}

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

@@ -0,0 +1,209 @@
+/*
+ * 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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Icon from "@mui/material/Icon";
+import type {Identifier, XYCoord} from "dnd-core";
+import colors from "qqq/assets/theme/base/colors";
+import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
+import {DragItemTypes, fieldAutoCompleteTextFieldSX, getSelectedFieldForAutoComplete, xIconButtonSX} from "qqq/components/widgets/misc/PivotTableSetupWidget";
+import {PivotTableDefinition, PivotTableGroupBy} from "qqq/models/misc/PivotTableDefinitionModels";
+import React, {FC, useRef} from "react";
+import {useDrag, useDrop} from "react-dnd";
+
+
+/*******************************************************************************
+ ** component props
+ *******************************************************************************/
+export interface PivotTableGroupByElementProps
+{
+   id: string;
+   index: number;
+   dragCallback: (rowsOrColumns: "rows" | "columns", dragIndex: number, hoverIndex: number) => void;
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+   pivotTableDefinition: PivotTableDefinition;
+   usedGroupByFieldNames: string[];
+   availableFieldNames: string[];
+   isEditable: boolean;
+   groupBy: PivotTableGroupBy;
+   rowsOrColumns: "rows" | "columns";
+   callback: () => void;
+   attemptedSubmit?: boolean;
+}
+
+
+/*******************************************************************************
+ ** item to support react-dnd
+ *******************************************************************************/
+interface DragItem
+{
+   index: number;
+   id: string;
+   type: string;
+}
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id, index, dragCallback, rowsOrColumns, metaData, tableMetaData, pivotTableDefinition, groupBy, usedGroupByFieldNames, availableFieldNames, isEditable, callback, attemptedSubmit}) =>
+{
+   ////////////////////////////////////////////////////////////////////////////
+   // credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
+   ////////////////////////////////////////////////////////////////////////////
+   const ref = useRef<HTMLDivElement>(null);
+   const [{handlerId}, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>(
+      {
+         accept: rowsOrColumns == "rows" ? DragItemTypes.ROW : DragItemTypes.COLUMN,
+         collect(monitor)
+         {
+            return {
+               handlerId: monitor.getHandlerId(),
+            };
+         },
+         hover(item: DragItem, monitor)
+         {
+            if (!ref.current)
+            {
+               return;
+            }
+            const dragIndex = item.index;
+            const hoverIndex = index;
+
+            // Don't replace items with themselves
+            if (dragIndex === hoverIndex)
+            {
+               return;
+            }
+
+            // Determine rectangle on screen
+            const hoverBoundingRect = ref.current?.getBoundingClientRect();
+
+            // Get vertical middle
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+            // Determine mouse position
+            const clientOffset = monitor.getClientOffset();
+
+            // Get pixels to the top
+            const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
+
+            // Only perform the move when the mouse has crossed half of the items height
+            // When dragging downwards, only move when the cursor is below 50%
+            // When dragging upwards, only move when the cursor is above 50%
+
+            // Dragging downwards
+            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY)
+            {
+               return;
+            }
+
+            // Dragging upwards
+            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY)
+            {
+               return;
+            }
+
+            // Time to actually perform the action
+            dragCallback(rowsOrColumns, dragIndex, hoverIndex);
+
+            // Note: we're mutating the monitor item here! Generally it's better to avoid mutations,
+            // but it's good here for the sake of performance to avoid expensive index searches.
+            item.index = hoverIndex;
+         },
+      });
+
+   const [{isDragging}, drag, preview] = useDrag({
+      type: rowsOrColumns == "rows" ? DragItemTypes.ROW : DragItemTypes.COLUMN,
+      item: () =>
+      {
+         return {id, index};
+      },
+      collect: (monitor: any) => ({
+         isDragging: monitor.isDragging(),
+      }),
+   });
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const handleFieldChange = (event: any, newValue: any, reason: string) =>
+   {
+      groupBy.fieldName = newValue ? newValue.fieldName : null;
+      callback();
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function removeGroupBy(index: number, rowsOrColumns: "rows" | "columns")
+   {
+      pivotTableDefinition[rowsOrColumns].splice(index, 1);
+      callback();
+   }
+
+   if (!isEditable)
+   {
+      const selectedField = getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName);
+      if (selectedField)
+      {
+         const label = selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label;
+         return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
+      }
+
+      return (<React.Fragment />);
+   }
+
+   preview(drop(ref));
+
+   const showError = attemptedSubmit && !groupBy.fieldName;
+
+   return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
+      <Box>
+         <Icon ref={drag} sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
+      </Box>
+      <Box width="100%">
+         <FieldAutoComplete
+            id={`${rowsOrColumns}-${index}`}
+            label={null}
+            variant="outlined"
+            textFieldSX={fieldAutoCompleteTextFieldSX}
+            metaData={metaData}
+            tableMetaData={tableMetaData}
+            handleFieldChange={handleFieldChange}
+            hiddenFieldNames={usedGroupByFieldNames}
+            availableFieldNames={availableFieldNames}
+            defaultValue={getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName)}
+            hasError={showError}
+            noOptionsText="There are no fields available."
+         />
+      </Box>
+      <Box>
+         <Button sx={xIconButtonSX} onClick={() => removeGroupBy(index, rowsOrColumns)}><Icon>clear</Icon></Button>
+      </Box>
+   </Box>);
+};

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

@@ -0,0 +1,870 @@
+/*
+ * 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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import Alert from "@mui/material/Alert";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import Icon from "@mui/material/Icon";
+import Modal from "@mui/material/Modal";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
+import Typography from "@mui/material/Typography";
+import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
+import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
+import {buttonSX, unborderedButtonSX} from "qqq/components/widgets/misc/FilterAndColumnsSetupWidget";
+import {PivotTableGroupByElement} from "qqq/components/widgets/misc/PivotTableGroupByElement";
+import {PivotTableValueElement} from "qqq/components/widgets/misc/PivotTableValueElement";
+import Widget, {HeaderToggleComponent} from "qqq/components/widgets/Widget";
+import {PivotObjectKey, PivotTableDefinition, PivotTableFunction, pivotTableFunctionLabels, PivotTableGroupBy, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
+import QQueryColumns from "qqq/models/query/QQueryColumns";
+import Client from "qqq/utils/qqq/Client";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import React, {useCallback, useContext, useEffect, useReducer, useState} from "react";
+import {DndProvider} from "react-dnd";
+import {HTML5Backend} from "react-dnd-html5-backend";
+
+export const DragItemTypes =
+   {
+      ROW: "row",
+      COLUMN: "column",
+      VALUE: "value"
+   };
+
+export const xIconButtonSX =
+   {
+      border: `1px solid ${colors.grayLines.main} !important`,
+      borderRadius: "0.75rem",
+      textTransform: "none",
+      fontSize: "1rem",
+      fontWeight: "400",
+      width: "40px",
+      minWidth: "40px",
+      paddingLeft: 0,
+      paddingRight: 0,
+      color: colors.error.main,
+      "&:hover": {color: colors.error.main},
+      "&:focus": {color: colors.error.main},
+      "&:focus:not(:hover)": {color: colors.error.main},
+   };
+
+export const fieldAutoCompleteTextFieldSX =
+   {
+      "& .MuiInputBase-input": {fontSize: "1rem", padding: "0 !important"}
+   };
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+export function getSelectedFieldForAutoComplete(tableMetaData: QTableMetaData, fieldName: string)
+{
+   if (fieldName)
+   {
+      let [field, fieldTable] = FilterUtils.getField(tableMetaData, fieldName);
+      if (field && fieldTable)
+      {
+         return ({field: field, table: fieldTable, fieldName: fieldName});
+      }
+   }
+
+   return (null);
+}
+
+
+/*******************************************************************************
+ ** component props
+ *******************************************************************************/
+interface PivotTableSetupWidgetProps
+{
+   isEditable: boolean;
+   widgetMetaData: QWidgetMetaData;
+   recordValues: { [name: string]: any };
+   onSaveCallback?: (values: { [name: string]: any }) => void;
+}
+
+
+/*******************************************************************************
+ ** default values for props
+ *******************************************************************************/
+PivotTableSetupWidget.defaultProps = {
+   onSaveCallback: null
+};
+
+
+const qController = Client.getInstance();
+
+/*******************************************************************************
+ ** Component to edit the setup of a Pivot Table - rows, columns, values!
+ *******************************************************************************/
+export default function PivotTableSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: PivotTableSetupWidgetProps): JSX.Element
+{
+   const [metaData, setMetaData] = useState(null as QInstance);
+   const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
+
+   const [modalOpen, setModalOpen] = useState(false);
+   const [enabled, setEnabled] = useState(!!recordValues["usePivotTable"]);
+   const [attemptedSubmit, setAttemptedSubmit] = useState(false);
+   const [errorAlert, setErrorAlert] = useState(null as string);
+
+   const [pivotTableDefinition, setPivotTableDefinition] = useState(null as PivotTableDefinition);
+
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+   ///////////////////////////////////////////////////////////////////////////////////
+   // this is a copy of pivotTableDefinition, that we'll render in the modal.       //
+   // then on-save, we'll move it to pivotTableDefinition, e.g., the actual record. //
+   ///////////////////////////////////////////////////////////////////////////////////
+   const [modalPivotTableDefinition, setModalPivotTableDefinition] = useState(null as PivotTableDefinition);
+
+   const [usedGroupByFieldNames, setUsedGroupByFieldNames] = useState([] as string[]);
+   const [usedValueFieldNames, setUsedValueByFieldNames] = useState([] as string[]);
+   const [availableFieldNames, setAvailableFieldNames] = useState([] as string[]);
+
+   const {helpHelpActive} = useContext(QContext);
+
+   //////////////////
+   // initial load //
+   //////////////////
+   useEffect(() =>
+   {
+      if (!pivotTableDefinition)
+      {
+         let originalPivotTableDefinition = recordValues["pivotTableJson"] && JSON.parse(recordValues["pivotTableJson"]) as PivotTableDefinition;
+         if (originalPivotTableDefinition)
+         {
+            setEnabled(true);
+         }
+         else if (!originalPivotTableDefinition)
+         {
+            originalPivotTableDefinition = new PivotTableDefinition();
+         }
+
+         for (let i = 0; i < originalPivotTableDefinition?.rows?.length; i++)
+         {
+            if (!originalPivotTableDefinition?.rows[i].key)
+            {
+               originalPivotTableDefinition.rows[i].key = PivotObjectKey.next();
+            }
+         }
+
+         for (let i = 0; i < originalPivotTableDefinition?.columns?.length; i++)
+         {
+            if (!originalPivotTableDefinition?.columns[i].key)
+            {
+               originalPivotTableDefinition.columns[i].key = PivotObjectKey.next();
+            }
+         }
+
+         for (let i = 0; i < originalPivotTableDefinition?.values?.length; i++)
+         {
+            if (!originalPivotTableDefinition?.values[i].key)
+            {
+               originalPivotTableDefinition.values[i].key = PivotObjectKey.next();
+            }
+         }
+
+         setPivotTableDefinition(originalPivotTableDefinition);
+         updateUsedGroupByFieldNames(originalPivotTableDefinition);
+         updateUsedValueFieldNames(modalPivotTableDefinition);
+      }
+
+      if (recordValues["columnsJson"])
+      {
+         updateAvailableFieldNames(JSON.parse(recordValues["columnsJson"]) as QQueryColumns);
+      }
+
+      (async () =>
+      {
+         setMetaData(await qController.loadMetaData());
+      })();
+   });
+
+   /////////////////////////////////////////////////////////////////////
+   // handle the table name changing - load current table's meta-data //
+   /////////////////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
+      {
+         (async () =>
+         {
+            const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"]);
+            setTableMetaData(tableMetaData);
+         })();
+      }
+   }, [recordValues]);
+
+
+   const helpRoles = isEditable ? [recordValues["id"] ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"] : ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function showHelp(slot: string)
+   {
+      return (helpHelpActive || hasHelpContent(widgetMetaData?.helpContent?.get(slot), helpRoles));
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getHelpContent(slot: string)
+   {
+      const key = `widget:${widgetMetaData.name};slot:${slot}`;
+      return <HelpContent helpContents={widgetMetaData?.helpContent?.get(slot)} roles={helpRoles} helpContentKey={key} />;
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function toggleEnabled()
+   {
+      const newEnabled = !!!getEnabled();
+      setEnabled(newEnabled);
+      onSaveCallback({usePivotTable: newEnabled});
+
+      if (!newEnabled)
+      {
+         onSaveCallback({pivotTableJson: null});
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getEnabled()
+   {
+      return (enabled);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function addGroupBy(rowsOrColumns: "rows" | "columns")
+   {
+      if (!modalPivotTableDefinition[rowsOrColumns])
+      {
+         modalPivotTableDefinition[rowsOrColumns] = [];
+      }
+
+      modalPivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
+      validateForm();
+      forceUpdate();
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function childElementChangedCallback()
+   {
+      updateUsedGroupByFieldNames(modalPivotTableDefinition);
+      updateUsedValueFieldNames(modalPivotTableDefinition);
+      validateForm();
+      forceUpdate();
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function addValue()
+   {
+      if (!modalPivotTableDefinition.values)
+      {
+         modalPivotTableDefinition.values = [];
+      }
+
+      modalPivotTableDefinition.values.push(new PivotTableValue());
+      validateForm();
+      forceUpdate();
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function removeValue(index: number)
+   {
+      modalPivotTableDefinition.values.splice(index, 1);
+      validateForm();
+      forceUpdate();
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function updateUsedGroupByFieldNames(ptd: PivotTableDefinition = pivotTableDefinition)
+   {
+      const usedFieldNames: string[] = [];
+
+      for (let i = 0; i < ptd?.rows?.length; i++)
+      {
+         usedFieldNames.push(ptd?.rows[i].fieldName);
+      }
+
+      for (let i = 0; i < ptd?.columns?.length; i++)
+      {
+         usedFieldNames.push(ptd?.columns[i].fieldName);
+      }
+
+      setUsedGroupByFieldNames(usedFieldNames);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function updateUsedValueFieldNames(ptd: PivotTableDefinition = pivotTableDefinition)
+   {
+      const usedFieldNames: string[] = [];
+
+      for (let i = 0; i < ptd?.values?.length; i++)
+      {
+         usedFieldNames.push(ptd?.values[i].fieldName);
+      }
+
+      setUsedValueByFieldNames(usedFieldNames);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function updateAvailableFieldNames(columns: QQueryColumns)
+   {
+      const fieldNames: string[] = [];
+      for (let i = 0; i < columns?.columns?.length; i++)
+      {
+         if (columns.columns[i].isVisible)
+         {
+            fieldNames.push(columns.columns[i].name);
+         }
+      }
+      setAvailableFieldNames(fieldNames);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderOneValue(value: PivotTableValue, index: number)
+   {
+      if (!isEditable)
+      {
+         const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
+         if (selectedField && value.function)
+         {
+            const label = selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label;
+            return (<Box mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{pivotTableFunctionLabels[value.function]} of {label}</Box>);
+         }
+
+         return (<React.Fragment />);
+      }
+
+      const handleFieldChange = (event: any, newValue: any, reason: string) =>
+      {
+         value.fieldName = newValue ? newValue.fieldName : null;
+      };
+
+      const handleFunctionChange = (event: any, newValue: any, reason: string) =>
+      {
+         value.function = newValue ? newValue.id : null;
+      };
+
+      const functionOptions: any[] = [];
+      let defaultFunctionValue = null;
+      for (let pivotTableFunctionKey in PivotTableFunction)
+      {
+         // @ts-ignore any?
+         const label = "" + pivotTableFunctionLabels[pivotTableFunctionKey];
+         const option = {id: pivotTableFunctionKey, label: label};
+         functionOptions.push(option);
+
+         if (option.id == value.function)
+         {
+            defaultFunctionValue = option;
+         }
+      }
+
+      // maybe cursor:grab (and then change to "grabbing")
+      return (<Box display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center">
+         <Box>
+            <Icon sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
+         </Box>
+         <Box width="100%">
+            <FieldAutoComplete
+               id={`values-field-${index}`}
+               label={null}
+               variant="outlined"
+               textFieldSX={fieldAutoCompleteTextFieldSX}
+               metaData={metaData}
+               tableMetaData={tableMetaData}
+               handleFieldChange={handleFieldChange}
+               defaultValue={getSelectedFieldForAutoComplete(tableMetaData, value.fieldName)}
+            />
+         </Box>
+         <Box width="330px">
+            <Autocomplete
+               id={`values-field-${index}`}
+               renderInput={(params) => (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
+               // @ts-ignore
+               defaultValue={defaultFunctionValue}
+               options={functionOptions}
+               onChange={handleFunctionChange}
+               isOptionEqualToValue={(option, value) => option.id === value.id}
+               getOptionLabel={(option) => option.label}
+               // todo? renderOption={(props, option, state) => renderFieldOption(props, option, state)}
+               autoSelect={true}
+               autoHighlight={true}
+               disableClearable
+               // slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
+               // {...alsoOpen}
+            />
+         </Box>
+         <Box>
+            <Button sx={xIconButtonSX} onClick={() => removeValue(index)}><Icon>clear</Icon></Button>
+         </Box>
+      </Box>);
+   }
+
+
+   /*******************************************************************************
+    ** drag & drop callback to move one of the pivot-table group-bys (rows/columns)
+    *******************************************************************************/
+   const moveGroupBy = useCallback((rowsOrColumns: "rows" | "columns", dragIndex: number, hoverIndex: number) =>
+   {
+      const array = modalPivotTableDefinition[rowsOrColumns];
+      const dragItem = array[dragIndex];
+      array.splice(dragIndex, 1);
+      array.splice(hoverIndex, 0, dragItem);
+
+      forceUpdate();
+   }, [modalPivotTableDefinition]);
+
+
+   /*******************************************************************************
+    ** drag & drop callback to move one of the pivot-table values
+    *******************************************************************************/
+   const moveValue = useCallback((dragIndex: number, hoverIndex: number) =>
+   {
+      const array = modalPivotTableDefinition.values;
+      const dragItem = array[dragIndex];
+      array.splice(dragIndex, 1);
+      array.splice(hoverIndex, 0, dragItem);
+
+      forceUpdate();
+   }, [modalPivotTableDefinition]);
+
+
+   const noTable = (tableMetaData == null);
+   const noColumns = (!availableFieldNames || availableFieldNames.length == 0);
+
+   const selectTableFirstTooltipTitle = noTable ? "You must select a table before you can set up your pivot table" : null;
+   const selectColumnsFirstTooltipTitle = noColumns ? "You must set up your report's Columns before you can set up your Pivot Table" : null;
+   const editPopupDisabled = noTable || noColumns;
+
+   /////////////////////////////////////////////////////////////
+   // add toggle component to widget header for editable mode //
+   /////////////////////////////////////////////////////////////
+   const labelAdditionalElementsRight: JSX.Element[] = [];
+   if (isEditable)
+   {
+      labelAdditionalElementsRight.push(<HeaderToggleComponent key="pivotTableHeader" disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
+   }
+
+
+   /*******************************************************************************
+    ** render a group-by (row or column)
+    *******************************************************************************/
+   const renderGroupBy = useCallback((groupBy: PivotTableGroupBy, rowsOrColumns: "rows" | "columns", index: number, forModal: boolean) =>
+   {
+      return (
+         <PivotTableGroupByElement
+            key={groupBy.fieldName}
+            index={index}
+            id={`${groupBy.key}`}
+            dragCallback={moveGroupBy}
+            metaData={metaData}
+            tableMetaData={tableMetaData}
+            pivotTableDefinition={forModal ? modalPivotTableDefinition : pivotTableDefinition}
+            usedGroupByFieldNames={[...usedGroupByFieldNames, ...usedValueFieldNames]}
+            availableFieldNames={availableFieldNames}
+            isEditable={isEditable && forModal}
+            groupBy={groupBy}
+            rowsOrColumns={rowsOrColumns}
+            callback={childElementChangedCallback}
+            attemptedSubmit={attemptedSubmit}
+         />
+      );
+   },
+   [tableMetaData, usedGroupByFieldNames, availableFieldNames],
+   );
+
+
+   /*******************************************************************************
+    ** render a pivot-table value (row or column)
+    *******************************************************************************/
+   const renderValue = useCallback((value: PivotTableValue, index: number, forModal: boolean) =>
+   {
+      return (
+         <PivotTableValueElement
+            key={value.key}
+            index={index}
+            id={`${value.key}`}
+            dragCallback={moveValue}
+            metaData={metaData}
+            tableMetaData={tableMetaData}
+            pivotTableDefinition={forModal ? modalPivotTableDefinition : pivotTableDefinition}
+            availableFieldNames={availableFieldNames}
+            usedGroupByFieldNames={usedGroupByFieldNames}
+            isEditable={isEditable && forModal}
+            value={value}
+            callback={childElementChangedCallback}
+            attemptedSubmit={attemptedSubmit}
+         />
+      );
+   },
+   [tableMetaData, usedGroupByFieldNames, availableFieldNames],
+   );
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openEditor()
+   {
+      if (recordValues["tableName"])
+      {
+         setModalPivotTableDefinition(Object.assign({}, pivotTableDefinition));
+         setModalOpen(true);
+         setAttemptedSubmit(false);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
+   {
+      if (reason == "backdropClick" || reason == "escapeKeyDown")
+      {
+         return;
+      }
+
+      setModalOpen(false);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderGroupBys(forModal: boolean, rowsOrColumns: "rows" | "columns")
+   {
+      const ptd = forModal ? modalPivotTableDefinition : pivotTableDefinition;
+
+      return <>
+         <h5>{rowsOrColumns == "rows" ? "Rows" : "Columns"}</h5>
+         <Box fontSize="1rem">
+            {
+               tableMetaData && (<div>{ptd[rowsOrColumns]?.map((groupBy, i) => renderGroupBy(groupBy, rowsOrColumns, i, forModal))}</div>)
+            }
+         </Box>
+         {
+            (forModal || (isEditable && !ptd[rowsOrColumns]?.length)) &&
+            <Box mt={forModal ? "0.5rem" : "0"} mb="1rem">
+               <Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
+                  <span><Button disabled={editPopupDisabled} sx={forModal ? buttonSX : unborderedButtonSX} onClick={() => forModal ? addGroupBy(rowsOrColumns) : openEditor()}>+ Add new {rowsOrColumns == "rows" ? "row" : "column"}</Button></span>
+               </Tooltip>
+            </Box>
+         }
+         {
+            !isEditable && !forModal && !ptd[rowsOrColumns]?.length &&
+            <Box color={colors.gray.main} fontSize="1rem">Your pivot table has no {rowsOrColumns}.</Box>
+         }
+      </>;
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderValues(forModal: boolean)
+   {
+      const ptd = forModal ? modalPivotTableDefinition : pivotTableDefinition;
+
+      return <>
+         <h5>Values</h5>
+         <Box fontSize="1rem">
+            {
+               tableMetaData && (<div>{ptd?.values?.map((value, i) => renderValue(value, i, forModal))}</div>)
+            }
+         </Box>
+         {
+            (forModal || (isEditable && !ptd?.values?.length)) &&
+            <Box mt={forModal ? "0.5rem" : "0"} mb="1rem">
+               <Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
+                  <span><Button disabled={editPopupDisabled} sx={forModal ? buttonSX : unborderedButtonSX} onClick={() => forModal ? addValue() : openEditor()}>+ Add new value</Button></span>
+               </Tooltip>
+            </Box>
+         }
+         {
+            !isEditable && !forModal && !ptd?.values?.length &&
+            <Box color={colors.gray.main} fontSize="1rem">Your pivot table has no values.</Box>
+         }
+      </>;
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function validateForm(submitting: boolean = false)
+   {
+      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // if this isn't a call from the on-submit handler, and we haven't previously attempted a submit, then return w/o setting any alerts //
+      // this is like a version of considering "touched"...                                                                                //
+      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      if (!submitting && !attemptedSubmit)
+      {
+         return;
+      }
+
+      let missingValues = 0;
+
+      for (let i = 0; i < modalPivotTableDefinition?.rows?.length; i++)
+      {
+         if (!modalPivotTableDefinition.rows[i].fieldName)
+         {
+            missingValues++;
+         }
+      }
+
+      for (let i = 0; i < modalPivotTableDefinition?.columns?.length; i++)
+      {
+         if (!modalPivotTableDefinition.columns[i].fieldName)
+         {
+            missingValues++;
+         }
+      }
+
+      for (let i = 0; i < modalPivotTableDefinition?.values?.length; i++)
+      {
+         if (!modalPivotTableDefinition.values[i].fieldName)
+         {
+            missingValues++;
+         }
+         if (!modalPivotTableDefinition.values[i].function)
+         {
+            missingValues++;
+         }
+      }
+
+      if (missingValues == 0)
+      {
+         setErrorAlert(null);
+
+         ////////////////////////////////////////////////////////////////////////////////////
+         // this is to catch the case of - user attempted to submit, and there were errors //
+         // now they've fixed 'em - so go back to a 'clean' state - so if they add more    //
+         // boxes, they won't immediately show errors, until a re-submit                   //
+         ////////////////////////////////////////////////////////////////////////////////////
+         if (attemptedSubmit)
+         {
+            setAttemptedSubmit(false);
+         }
+         return (false);
+      }
+
+      setErrorAlert(`Missing value in ${missingValues} field${missingValues == 1 ? "" : "s"}.`);
+      return (true);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function saveClicked()
+   {
+      setAttemptedSubmit(true);
+
+      if (validateForm(true))
+      {
+         return;
+      }
+
+      if (!onSaveCallback)
+      {
+         console.log("onSaveCallback was not defined");
+         return;
+      }
+
+      setPivotTableDefinition(Object.assign({}, modalPivotTableDefinition));
+      updateUsedGroupByFieldNames(modalPivotTableDefinition);
+      updateUsedValueFieldNames(modalPivotTableDefinition);
+
+      onSaveCallback({pivotTableJson: JSON.stringify(modalPivotTableDefinition)});
+
+      closeEditor();
+   }
+
+
+   ////////////
+   // render //
+   ////////////
+   return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
+      {
+         <React.Fragment>
+            <DndProvider backend={HTML5Backend}>
+               {
+                  enabled &&
+                  <Box display="flex" justifyContent="space-between">
+                     <Box>
+                        {
+                           showHelp("sectionSubhead") &&
+                           <Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
+                              {getHelpContent("sectionSubhead")}
+                           </Box>
+                        }
+                     </Box>
+                     {
+                        isEditable &&
+                        <Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
+                           <span>
+                              <Button disabled={editPopupDisabled} onClick={() => openEditor()} sx={{p: 0}} disableRipple>
+                                 <Typography display="inline" textTransform="none" fontSize={"1.125rem"}>
+                                    Edit Pivot Table
+                                 </Typography>
+                              </Button>
+                           </span>
+                        </Tooltip>
+                     }
+                  </Box>
+               }
+               {
+                  (!enabled || !pivotTableDefinition) && !isEditable &&
+                  <Box fontSize="1rem">Your report does not use a Pivot Table.</Box>
+               }
+               {
+                  enabled && pivotTableDefinition &&
+                  <>
+                     <Grid container spacing="16">
+
+                        <Grid item lg={4} md={6} xs={12}>{renderGroupBys(false, "rows")}</Grid>
+                        <Grid item lg={4} md={6} xs={12}>{renderGroupBys(false, "columns")}</Grid>
+                        <Grid item lg={4} md={6} xs={12}>{renderValues(false)}</Grid>
+
+                     </Grid>
+                     {
+                        modalOpen &&
+                        <Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
+                           <div>
+                              <Box sx={{position: "absolute", width: "100%"}}>
+                                 <Card sx={{m: "2rem", p: "2rem", overflowY: "auto", height: "calc(100vh - 4rem)"}}>
+                                    <h3>Edit Pivot Table</h3>
+                                    {
+                                       showHelp("modalSubheader") &&
+                                       <Box color={colors.gray.main}>
+                                          {getHelpContent("modalSubheader")}
+                                       </Box>
+                                    }
+                                    {
+                                       errorAlert && <Alert icon={<Icon>error_outline</Icon>} color="error" onClose={() => setErrorAlert(null)}>{errorAlert}</Alert>
+                                    }
+                                    <Grid container spacing="16" overflow="auto" mt="0.5rem" mb="1rem" height="100%">
+
+                                       <Grid item lg={4} md={6} xs={12}>{renderGroupBys(true, "rows")}</Grid>
+                                       <Grid item lg={4} md={6} xs={12}>{renderGroupBys(true, "columns")}</Grid>
+                                       <Grid item lg={4} md={6} xs={12}>{renderValues(true)}</Grid>
+
+                                    </Grid>
+                                    <Box>
+                                       <Box display="flex" justifyContent="flex-end">
+                                          <QCancelButton disabled={false} onClickHandler={closeEditor} />
+                                          <QSaveButton label="OK" iconName="check" disabled={false} onClickHandler={saveClicked} />
+                                       </Box>
+                                    </Box>
+                                 </Card>
+                              </Box>
+                           </div>
+                        </Modal>
+                     }
+                  </>
+               }
+            </DndProvider>
+         </React.Fragment>
+      }
+   </Widget>);
+}
+
+/* this was a rough-draft of what a preview of a pivot could look like...
+   <Box mt={"1rem"}>
+      <h5>Preview</h5>
+      <table>
+         <tr>
+            <th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
+            <th style={{textAlign: "left", fontSize: "0.875rem"}}>Column Labels</th>
+         </tr>
+         {
+            pivotTableDefinition?.columns?.map((column, i) =>
+               (
+                  <tr key={column.key}>
+                     <th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
+                     <th style={{textAlign: "left", fontSize: "0.875rem"}}>{column.fieldName}</th>
+                  </tr>
+               ))
+         }
+         <tr>
+            <th style={{textAlign: "left", fontSize: "0.875rem"}}>Row Labels</th>
+            {
+               pivotTableDefinition?.values?.map((value, i) =>
+                  (
+                     <th key={value.key} style={{textAlign: "left", fontSize: "0.875rem"}}>{value.function} of {value.fieldName}</th>
+                  ))
+            }
+         </tr>
+         {
+            pivotTableDefinition?.rows?.map((row, i) =>
+               (
+                  <tr key={row.key}>
+                     <th style={{textAlign: "left", fontSize: "0.875rem", paddingLeft: (i * 1) + "rem"}}>{row.fieldName}</th>
+                  </tr>
+               ))
+         }
+      </table>
+   </Box>
+*/

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

@@ -0,0 +1,319 @@
+/*
+ * 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 Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Icon from "@mui/material/Icon";
+import TextField from "@mui/material/TextField";
+import type {Identifier, XYCoord} from "dnd-core";
+import colors from "qqq/assets/theme/base/colors";
+import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
+import {DragItemTypes, fieldAutoCompleteTextFieldSX, getSelectedFieldForAutoComplete, xIconButtonSX} from "qqq/components/widgets/misc/PivotTableSetupWidget";
+import {functionsPerFieldType, PivotTableDefinition, pivotTableFunctionLabels, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
+import React, {FC, useReducer, useRef, useState} from "react";
+import {useDrag, useDrop} from "react-dnd";
+
+
+/*******************************************************************************
+ ** component props
+ *******************************************************************************/
+export interface PivotTableValueElementProps
+{
+   id: string;
+   index: number;
+   dragCallback: (dragIndex: number, hoverIndex: number) => void;
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+   pivotTableDefinition: PivotTableDefinition;
+   availableFieldNames: string[];
+   usedGroupByFieldNames: string[];
+   isEditable: boolean;
+   value: PivotTableValue;
+   callback: () => void;
+   attemptedSubmit?: boolean;
+}
+
+
+/*******************************************************************************
+ ** item to support react-dnd
+ *******************************************************************************/
+interface DragItem
+{
+   index: number;
+   id: string;
+   type: string;
+}
+
+
+/*******************************************************************************
+ ** Element to render 1 pivot-table value.
+ *******************************************************************************/
+export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, index, dragCallback, metaData, tableMetaData, pivotTableDefinition, availableFieldNames, usedGroupByFieldNames, value, isEditable, callback, attemptedSubmit}) =>
+{
+   const [defaultFunctionValue, setDefaultFunctionValue] = useState(null);
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+   ////////////////////////////////////////////////////////////////////////////
+   // credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
+   ////////////////////////////////////////////////////////////////////////////
+   const ref = useRef<HTMLDivElement>(null);
+   const [{handlerId}, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>(
+      {
+         accept: DragItemTypes.VALUE,
+         collect(monitor)
+         {
+            return {
+               handlerId: monitor.getHandlerId(),
+            };
+         },
+         hover(item: DragItem, monitor)
+         {
+            if (!ref.current)
+            {
+               return;
+            }
+            const dragIndex = item.index;
+            const hoverIndex = index;
+
+            // Don't replace items with themselves
+            if (dragIndex === hoverIndex)
+            {
+               return;
+            }
+
+            // Determine rectangle on screen
+            const hoverBoundingRect = ref.current?.getBoundingClientRect();
+
+            // Get vertical middle
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+            // Determine mouse position
+            const clientOffset = monitor.getClientOffset();
+
+            // Get pixels to the top
+            const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
+
+            // Only perform the move when the mouse has crossed half of the items height
+            // When dragging downwards, only move when the cursor is below 50%
+            // When dragging upwards, only move when the cursor is above 50%
+
+            // Dragging downwards
+            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY)
+            {
+               return;
+            }
+
+            // Dragging upwards
+            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY)
+            {
+               return;
+            }
+
+            // Time to actually perform the action
+            dragCallback(dragIndex, hoverIndex);
+
+            // Note: we're mutating the monitor item here! Generally it's better to avoid mutations,
+            // but it's good here for the sake of performance to avoid expensive index searches.
+            item.index = hoverIndex;
+         },
+      });
+
+   const [{isDragging}, drag] = useDrag({
+      type: DragItemTypes.VALUE,
+      item: () =>
+      {
+         return {id, index};
+      },
+      collect: (monitor: any) => ({
+         isDragging: monitor.isDragging(),
+      }),
+   });
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getFunctionsForField(field: QFieldMetaData)
+   {
+      if(field)
+      {
+         let type = field.type;
+         if (field.possibleValueSourceName)
+         {
+            type = QFieldType.STRING;
+         }
+
+         if(functionsPerFieldType[type])
+         {
+            return (functionsPerFieldType[type]);
+         }
+      }
+
+      //////////////////////////////////////
+      // return broadest list if no field //
+      //////////////////////////////////////
+      return (functionsPerFieldType[QFieldType.INTEGER]);
+   }
+
+
+   /*******************************************************************************
+    ** event handler for user selecting a field
+    *******************************************************************************/
+   function handleFieldChange(event: any, newValue: any, reason: string)
+   {
+      value.fieldName = newValue ? newValue.fieldName : null;
+
+      if(newValue)
+      {
+         /////////////////////////////////////////////////////////////////////////////////////////
+         // if newly selected field doesn't have the currently selected function, then clear it //
+         /////////////////////////////////////////////////////////////////////////////////////////
+         const newSelectedField = getSelectedFieldForAutoComplete(tableMetaData, newValue.fieldName);
+         if (newSelectedField)
+         {
+            if(getFunctionsForField(newSelectedField.field).indexOf(value.function) == -1)
+            {
+               setDefaultFunctionValue(null);
+               handleFunctionChange(null, null, null);
+               forceUpdate();
+            }
+         }
+      }
+
+      callback();
+   }
+
+
+   /*******************************************************************************
+    ** event handler for user selecting a function
+    *******************************************************************************/
+   function handleFunctionChange(event: any, newValue: any, reason: string)
+   {
+      value.function = newValue ? newValue.id : null;
+      callback();
+   }
+
+
+   /*******************************************************************************
+    ** event handler for clicking remove button
+    *******************************************************************************/
+   function removeValue(index: number)
+   {
+      pivotTableDefinition.values.splice(index, 1);
+      callback();
+   }
+
+   const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
+
+   /////////////////////////////////////////////////////////////////////
+   // if we're not on an edit screen, return a simpler read-only view //
+   /////////////////////////////////////////////////////////////////////
+   if (!isEditable)
+   {
+      let label = "--";
+      if (selectedField && value.function)
+      {
+         label = pivotTableFunctionLabels[value.function] + " of " + (selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label);
+      }
+
+      return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
+   }
+
+   ///////////////////////////////////////////////////////////////////////////////
+   // figure out functions to display in drop down, plus selected/default value //
+   ///////////////////////////////////////////////////////////////////////////////
+   const functionOptions: any[] = [];
+   const availableFunctions = getFunctionsForField(selectedField?.field);
+   for (let pivotTableFunction of availableFunctions)
+   {
+      const label = pivotTableFunctionLabels[pivotTableFunction];
+      const option = {id: pivotTableFunction, label: label};
+      functionOptions.push(option);
+
+      if (option.id == value.function && JSON.stringify(option) != JSON.stringify(defaultFunctionValue))
+      {
+         setDefaultFunctionValue(option);
+      }
+   }
+
+   drag(drop(ref));
+
+   const showValueError = attemptedSubmit && !value.fieldName;
+   const showFunctionError = attemptedSubmit && !value.function;
+
+   return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
+      <Box>
+         <Icon sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
+      </Box>
+      <Box width="100%">
+         <FieldAutoComplete
+            id={`values-field-${index}`}
+            label={null}
+            variant="outlined"
+            textFieldSX={fieldAutoCompleteTextFieldSX}
+            metaData={metaData}
+            tableMetaData={tableMetaData}
+            handleFieldChange={handleFieldChange}
+            availableFieldNames={availableFieldNames}
+            hiddenFieldNames={usedGroupByFieldNames}
+            defaultValue={selectedField}
+            hasError={showValueError}
+            noOptionsText="There are no fields available."
+         />
+      </Box>
+      <Box width="370px">
+         <Autocomplete
+            id={`values-function-${index}`}
+            renderInput={(params) =>
+            {
+               const inputProps = params.InputProps;
+               const originalEndAdornment = inputProps.endAdornment;
+               inputProps.endAdornment = <Box>
+                  {showFunctionError && <Icon color="error">error_outline</Icon>}
+                  {originalEndAdornment}
+               </Box>;
+
+               return (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={inputProps} />)
+            }}
+            // @ts-ignore
+            value={defaultFunctionValue}
+            inputValue={defaultFunctionValue?.label ?? ""}
+            options={functionOptions}
+            onChange={handleFunctionChange}
+            isOptionEqualToValue={(option, value) => option.id === value.id}
+            getOptionLabel={(option) => option.label}
+            autoSelect={true}
+            autoHighlight={true}
+            disableClearable
+         />
+      </Box>
+      <Box>
+         <Button sx={xIconButtonSX} onClick={() => removeValue(index)}><Icon>clear</Icon></Button>
+      </Box>
+   </Box>);
+
+};

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

@@ -25,35 +25,63 @@ import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
-import {DataGridPro, GridCallbackDetails, GridRowParams, MuiEvent} from "@mui/x-data-grid-pro";
-import React, {useEffect, useState} from "react";
-import {useNavigate, Link} from "react-router-dom";
-import Widget, {AddNewRecordButton, LabelComponent} from "qqq/components/widgets/Widget";
+import {DataGridPro, GridCallbackDetails, GridEventListener, GridRenderCellParams, GridRowParams, GridToolbarContainer, MuiEvent, useGridApiContext, useGridApiEventHandler} from "@mui/x-data-grid-pro";
+import Widget, {AddNewRecordButton, LabelComponent, WidgetData} from "qqq/components/widgets/Widget";
 import DataGridUtils from "qqq/utils/DataGridUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useEffect, useRef, useState} from "react";
+import {Link, useNavigate} from "react-router-dom";
+
+export interface ChildRecordListData extends WidgetData
+{
+   title: string;
+   queryOutput: { records: { values: any }[] };
+   childTableMetaData: QTableMetaData;
+   tablePath: string;
+   viewAllLink: string;
+   totalRows: number;
+   canAddChildRecord: boolean;
+   defaultValuesForNewChildRecords: { [fieldName: string]: any };
+   disabledFieldsForNewChildRecords: { [fieldName: string]: any };
+}
 
 interface Props
 {
    widgetMetaData: QWidgetMetaData;
-   data: any;
+   data: ChildRecordListData;
+   addNewRecordCallback?: () => void;
+   disableRowClick: boolean;
+   allowRecordEdit: boolean;
+   editRecordCallback?: (rowIndex: number) => void;
+   allowRecordDelete: boolean;
+   deleteRecordCallback?: (rowIndex: number) => void;
 }
 
-RecordGridWidget.defaultProps = {};
+RecordGridWidget.defaultProps =
+   {
+      disableRowClick: false,
+      allowRecordEdit: false,
+      allowRecordDelete: false
+   };
 
 const qController = Client.getInstance();
 
-function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
+function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRowClick, allowRecordEdit, editRecordCallback, allowRecordDelete, deleteRecordCallback}: Props): JSX.Element
 {
+   const instance = useRef({timer: null});
    const [rows, setRows] = useState([]);
-   const [records, setRecords] = useState([] as QRecord[])
+   const [records, setRecords] = useState([] as QRecord[]);
    const [columns, setColumns] = useState([]);
-   const [allColumns, setAllColumns] = 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(() =>
@@ -71,7 +99,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          }
 
          const tableMetaData = new QTableMetaData(data.childTableMetaData);
-         const rows = DataGridUtils.makeRows(records, tableMetaData);
+         const rows = DataGridUtils.makeRows(records, tableMetaData, true);
 
          /////////////////////////////////////////////////////////////////////////////////
          // note - tablePath may be null, if the user doesn't have access to the table. //
@@ -82,32 +110,54 @@ 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];
+         const allColumns = [...columns];
          setAllColumns(JSON.parse(JSON.stringify(columns)));
 
          ////////////////////////////////////////////////////////////////
          // do not not show the foreign-key column of the parent table //
          ////////////////////////////////////////////////////////////////
-         if(data.defaultValuesForNewChildRecords)
+         if (data.defaultValuesForNewChildRecords)
          {
             for (let i = 0; i < columns.length; i++)
             {
-               if(data.defaultValuesForNewChildRecords[columns[i].field])
+               if (data.defaultValuesForNewChildRecords[columns[i].field])
                {
                   columns.splice(i, 1);
-                  i--
+                  i--;
                }
             }
          }
 
+         ////////////////////////////////////
+         // add actions cell, if available //
+         ////////////////////////////////////
+         if (allowRecordEdit || allowRecordDelete)
+         {
+            columns.unshift({
+               field: "_actions",
+               type: "string",
+               headerName: "Actions",
+               sortable: false,
+               filterable: false,
+               width: allowRecordEdit && allowRecordDelete ? 80 : 50,
+               renderCell: ((params: GridRenderCellParams) =>
+               {
+                  return <Box>
+                     {allowRecordEdit && <IconButton onClick={() => editRecordCallback(params.row.__rowIndex)}><Icon>edit</Icon></IconButton>}
+                     {allowRecordDelete && <IconButton onClick={() => deleteRecordCallback(params.row.__rowIndex)}><Icon>delete</Icon></IconButton>}
+                  </Box>;
+               })
+            });
+         }
+
          setRows(rows);
-         setRecords(records)
+         setRecords(records);
          setColumns(columns);
 
          let csv = "";
          for (let i = 0; i < allColumns.length; i++)
          {
-            csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`
+            csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`;
          }
          csv += "\n";
 
@@ -115,8 +165,8 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          {
             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)}"`
+               const value = records[i].displayValues.get(allColumns[j].field) ?? records[i].values.get(allColumns[j].field);
+               csv += `${j > 0 ? "," : ""}"${ValueUtils.cleanForCsv(value)}"`;
             }
             csv += "\n";
          }
@@ -132,13 +182,13 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
    // view all link //
    ///////////////////
    const labelAdditionalElementsLeft: JSX.Element[] = [];
-   if(data && data.viewAllLink)
+   if (data && data.viewAllLink)
    {
       labelAdditionalElementsLeft.push(
-         <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative" top="-0.25rem">
+         <Typography key={"viewAllLink"} variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
             <Link to={data.viewAllLink}>View All</Link>
          </Typography>
-      )
+      );
    }
 
    ///////////////////
@@ -150,10 +200,10 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
    {
       isExportDisabled = false;
 
-      if(data.totalRows && data.queryOutput.records.length < data.totalRows)
+      if (data.totalRows && data.queryOutput.records.length < data.totalRows)
       {
-         tooltipTitle = "Export these " + data.queryOutput.records.length + " records."
-         if(data.viewAllLink)
+         tooltipTitle = "Export these " + data.queryOutput.records.length + " records.";
+         if (data.viewAllLink)
          {
             tooltipTitle += "\nClick View All to export all records.";
          }
@@ -162,21 +212,21 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
 
    const onExportClick = () =>
    {
-      if(csv)
+      if (csv)
       {
          HtmlUtils.download(fileName, csv);
       }
       else
       {
-         alert("There is no data available to export.")
+         alert("There is no data available to export.");
       }
-   }
+   };
 
-   if(widgetMetaData?.showExportButton)
+   if (widgetMetaData?.showExportButton)
    {
       labelAdditionalElementsLeft.push(
-         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative" top="-0.25rem">
-            <Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.125}}>save_alt</Icon></Button></Tooltip>
+         <Typography key={"exportButton"} variant="body2" px={0} display="inline" position="relative">
+            <Tooltip title={tooltipTitle}><span><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></span></Tooltip>
          </Typography>
       );
    }
@@ -184,31 +234,67 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
    ////////////////////
    // add new button //
    ////////////////////
-   const labelAdditionalComponentsRight: LabelComponent[] = []
-   if(data && data.canAddChildRecord)
+   const labelAdditionalComponentsRight: LabelComponent[] = [];
+   if (data && data.canAddChildRecord)
    {
       let disabledFields = data.disabledFieldsForNewChildRecords;
-      if(!disabledFields)
+      if (!disabledFields)
       {
          disabledFields = data.defaultValuesForNewChildRecords;
       }
-      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields))
+      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback));
    }
 
 
+   /////////////////////////////////////////////////////////////////
+   // if a grid preference window is open, ignore and reset timer //
+   /////////////////////////////////////////////////////////////////
    const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
    {
+      if (disableRowClick)
+      {
+         return;
+      }
+
       (async () =>
       {
-         const qInstance = await qController.loadMetaData()
-         const tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
-         if(tablePath)
+         const qInstance = await qController.loadMetaData();
+         let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name);
+         if (tablePath)
          {
-            navigate(`${tablePath}/${params.id}`);
+            tablePath = `${tablePath}/${params.row[data.childTableMetaData.primaryKeyField]}`;
+            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
@@ -216,47 +302,53 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          widgetData={data}
          labelAdditionalElementsLeft={labelAdditionalElementsLeft}
          labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+         labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
       >
-         <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, 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={-3} mb={-3}>
+            <Box>
+               <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}
+                  getRowId={(row) => row.__rowIndex}
+                  // 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>
          </Box>
       </Widget>
    );

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

@@ -46,9 +46,6 @@ import Snackbar from "@mui/material/Snackbar";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
-import React, {useReducer, useState} from "react";
-import AceEditor from "react-ace";
-import {Link} from "react-router-dom";
 import TabPanel from "qqq/components/misc/TabPanel";
 import ScriptDocsForm from "qqq/components/scripts/ScriptDocsForm";
 import ScriptEditor, {ScriptEditorProps} from "qqq/components/scripts/ScriptEditor";
@@ -65,6 +62,9 @@ import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-velocity";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-github";
+import React, {useReducer, useState} from "react";
+import AceEditor from "react-ace";
+import {Link} from "react-router-dom";
 import "ace-builds/src-noconflict/ext-language_tools";
 
 const qController = Client.getInstance();
@@ -97,16 +97,16 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
    const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
    const [scriptLogs, setScriptLogs] = useState({} as any);
-   const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord)
-   const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[])
+   const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord);
+   const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[]);
    const [availableFileNames, setAvailableFileNames] = useState([] as string[]);
    const [selectedFileName, setSelectedFileName] = useState("");
-   const [currentVersionId , setCurrentVersionId] = useState(null as number);
+   const [currentVersionId, setCurrentVersionId] = useState(null as number);
    const [notFoundMessage, setNotFoundMessage] = useState(null);
    const [selectedTab, setSelectedTab] = useState(0);
    const [editorProps, setEditorProps] = useState(null as ScriptEditorProps);
    const [successText, setSuccessText] = useState(null as string);
-   const [failText, setFailText] = useState(null as string)
+   const [failText, setFailText] = useState(null as string);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading"));
@@ -129,13 +129,13 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
 
             let fileMode = scriptTypeRecord.values.get("fileMode");
             let scriptTypeFileSchemaList: QRecord[] = null;
-            if(fileMode == 1) // SINGLE
+            if (fileMode == 1) // SINGLE
             {
                scriptTypeFileSchemaList = [new QRecord({values: {name: "Script.js", fileType: "javascript"}})];
             }
-            else if(fileMode == 2) // MULTI_PRE_DEFINED
+            else if (fileMode == 2) // MULTI_PRE_DEFINED
             {
-               const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")])
+               const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")]);
                scriptTypeFileSchemaList = await qController.query("scriptTypeFileSchema", filter);
             }
             else // MULTI AD_HOC
@@ -145,22 +145,22 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
             }
 
             setScriptTypeFileSchemaList(scriptTypeFileSchemaList);
-            if(scriptTypeFileSchemaList)
+            if (scriptTypeFileSchemaList)
             {
-               const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"))
+               const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"));
                setAvailableFileNames(availableFileNames);
-               setSelectedFileName(availableFileNames[0])
+               setSelectedFileName(availableFileNames[0]);
             }
 
             const criteria = [new QFilterCriteria("scriptId", QCriteriaOperator.EQUALS, [scriptId])];
             const orderBys = [new QFilterOrderBy("sequenceNo", false)];
-            const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25);
+            const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
             const versions = await qController.query("scriptRevision", filter);
             console.log("Fetched versions:");
             console.log(versions);
             setVersionRecordList(versions);
 
-            if(versions && versions.length > 0)
+            if (versions && versions.length > 0)
             {
                selectVersion(versions[0]);
             }
@@ -169,7 +169,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
          {
             if (e instanceof QException)
             {
-               if ((e as QException).status === "404")
+               if ((e as QException).status === 404)
                {
                   setNotFoundMessage("Script code could not be found.");
                   return;
@@ -253,31 +253,31 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    const handleSelectFile = (event: SelectChangeEvent) =>
    {
       setSelectedFileName(event.target.value);
-   }
+   };
 
    const getSelectedFileCode = (): string =>
    {
       return (getSelectedVersionCode()[selectedFileName] ?? "");
-   }
+   };
 
    const getSelectedFileType = (): string =>
    {
       for (let i = 0; i < scriptTypeFileSchemaList.length; i++)
       {
          let name = scriptTypeFileSchemaList[i].values.get("name");
-         if(name == selectedFileName)
+         if (name == selectedFileName)
          {
             return (scriptTypeFileSchemaList[i].values.get("fileType"));
          }
       }
 
       return ("javascript"); // have some default...
-   }
+   };
 
-   const getSelectedVersionCode = (): {[name: string]: string} =>
+   const getSelectedVersionCode = (): { [name: string]: string } =>
    {
-      let rs: {[name: string]: string} = {}
-      let files = selectedVersionRecord?.associatedRecords?.get("files")
+      let rs: { [name: string]: string } = {};
+      let files = selectedVersionRecord?.associatedRecords?.get("files");
 
       for (let j = 0; j < files?.length; j++)
       {
@@ -286,7 +286,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       }
 
       return (rs);
-   }
+   };
 
    function getVersionsList(versionRecordList: QRecord[], selectedVersionRecord: QRecord)
    {
@@ -344,11 +344,11 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
 
    const getScriptLogs = (scriptRevisionId: number) =>
    {
-      if(!scriptLogs[scriptRevisionId])
+      if (!scriptLogs[scriptRevisionId])
       {
          (async () =>
          {
-            let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], "AND", 0, 100);
+            let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], null, "AND", 0, 100);
             scriptLogs[scriptRevisionId] = await qController.query("scriptLog", filter);
             setScriptLogs(scriptLogs);
             forceUpdate();
@@ -368,7 +368,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       }
 
       return (<ScriptLogsView logs={logs} />);
-   }
+   };
 
    let editButtonTooltip = "";
    let editButtonText = "Create New Version";
@@ -556,7 +556,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                            <Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}>
                               <ScriptEditor
                                  closeCallback={closeEditingScript}
-                                 {... editorProps}
+                                 {...editorProps}
                               />
                            </Modal>
                         }

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

@@ -18,28 +18,28 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {tooltipClasses, TooltipProps} from "@mui/material";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {Box, tooltipClasses, TooltipProps} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import {styled} from "@mui/material/styles";
 import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
 import TableContainer from "@mui/material/TableContainer";
-import TableRow from "@mui/material/TableRow";
 import Tooltip from "@mui/material/Tooltip";
 import parse from "html-react-parser";
-import {useEffect, useMemo, useState} from "react";
-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";
+import CompositeWidget from "qqq/components/widgets/CompositeWidget";
 import DataTableBodyCell from "qqq/components/widgets/tables/cells/DataTableBodyCell";
 import DataTableHeadCell from "qqq/components/widgets/tables/cells/DataTableHeadCell";
 import DefaultCell from "qqq/components/widgets/tables/cells/DefaultCell";
 import ImageCell from "qqq/components/widgets/tables/cells/ImageCell";
 import {TableDataInput} from "qqq/components/widgets/tables/TableCard";
+import WidgetBlock from "qqq/components/widgets/WidgetBlock";
+import React, {useEffect, useMemo, useState} from "react";
+import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
 
 interface Props
 {
@@ -57,6 +57,7 @@ interface Props
    };
    isSorted?: boolean;
    noEndBorder?: boolean;
+   widgetMetaData: QWidgetMetaData;
 }
 
 DataTable.defaultProps = {
@@ -92,6 +93,7 @@ function DataTable({
    pagination,
    isSorted,
    noEndBorder,
+   widgetMetaData
 }: Props): JSX.Element
 {
    let defaultValue: any;
@@ -101,17 +103,17 @@ function DataTable({
    entries = entriesPerPageOptions ? entriesPerPageOptions : ["10", "25", "50", "100"];
 
    let widths = [];
-   for(let i = 0; i<table.columns.length; i++)
+   for (let i = 0; i < table.columns.length; i++)
    {
       const column = table.columns[i];
-      if(column.type !== "hidden")
+      if (column.type !== "hidden")
       {
          widths.push(table.columns[i].width ?? "1fr");
       }
    }
 
    let showExpandColumn = false;
-   if(table.rows)
+   if (table.rows)
    {
       for (let i = 0; i < table.rows.length; i++)
       {
@@ -124,7 +126,7 @@ function DataTable({
    }
 
    const columnsToMemo = [...table.columns];
-   if(showExpandColumn)
+   if (showExpandColumn)
    {
       widths.push("60px");
       columnsToMemo.push(
@@ -161,13 +163,24 @@ function DataTable({
                      })}
                   >
                      {/* 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>
+                     <Icon fontSize="medium" sx={{float: "left"}}>{row.isExpanded ? "expand_less" : "chevron_left"}</Icon>
                   </span>
                ) : null,
          },
       );
    }
 
+   if (table.columnHeaderTooltips)
+   {
+      for (let column of columnsToMemo)
+      {
+         if (table.columnHeaderTooltips[column.accessor])
+         {
+            column.tooltip = table.columnHeaderTooltips[column.accessor];
+         }
+      }
+   }
+
    const columns = useMemo<any>(() => columnsToMemo, [table]);
    const data = useMemo<any>(() => table.rows, [table]);
    const gridTemplateColumns = widths.join(" ");
@@ -280,128 +293,164 @@ function DataTable({
       entriesEnd = pageSize * (pageIndex + 1);
    }
 
+   let visibleFooterRows = 1;
+   if (expanded && expanded[`${table.rows.length - 1}`])
+   {
+      //////////////////////////////////////////////////
+      // todo - should count how many are expanded... //
+      //////////////////////////////////////////////////
+      visibleFooterRows = 2;
+   }
+
    function getTable(includeHead: boolean, rows: any, isFooter: boolean)
    {
       let boxStyle = {};
-      if(fixedStickyLastRow)
+      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"};
+            ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"}
+            : {height: fixedHeight ? `${fixedHeight}px` : "auto", flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
       }
 
-      return <Box sx={boxStyle}>
-         <Table {...getTableProps()}>
+      let innerBoxStyle = {};
+      if (fixedStickyLastRow && isFooter)
+      {
+         innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
+      }
+
+      ///////////////////////////////////////////////////////////////////////////////////
+      // note - at one point, we had the table's sx including: whiteSpace: "nowrap"... //
+      ///////////////////////////////////////////////////////////////////////////////////
+      return <Box sx={boxStyle}><Box sx={innerBoxStyle}>
+         <Table {...getTableProps()} component="div" sx={{display: "grid", gridTemplateRows: "auto", gridTemplateColumns: gridTemplateColumns}}>
             {
                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>
+                  headerGroups.map((headerGroup: any, i: number) => (
+                     headerGroup.headers.map((column: any) => (
+                        column.type !== "hidden" && (
+                           <DataTableHeadCell
+                              sx={{position: "sticky", top: 0, background: "white", zIndex: 10, alignItems: "flex-end"}}
+                              key={i++}
+                              {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
+                              align={column.align ? column.align : "left"}
+                              sorted={setSortedValue(column)}
+                              tooltip={column.tooltip}
+                           >
+                              {column.render("header")}
+                           </DataTableHeadCell>
+                        )
+                     ))
+                  ))
                )
             }
-            <TableBody {...getTableBodyProps()}>
-               {rows.map((row: any, key: any) =>
+            {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)
                {
-                  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 = true;
-                     if(key + 1 < rows.length && rows[key + 1].depth == 0)
-                     {
-                        overrideNoEndBorder = false;
-                     }
+                     overrideNoEndBorder = false;
                   }
+               }
 
-                  ///////////////////////////////////////
-                  // don't do end-border on the footer //
-                  ///////////////////////////////////////
-                  if(isFooter)
-                  {
-                     overrideNoEndBorder = true;
-                  }
+               ///////////////////////////////////////
+               // 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>
-                  );
-               })}
+               let background = "initial";
+               if (isFooter)
+               {
+                  background = "#EEEEEE";
+               }
+               else if (row.depth > 0 || row.isExpanded)
+               {
+                  background = "#FAFAFA";
+               }
 
-            </TableBody>
+               return (
+                  row.cells.map((cell: any) => (
+                     cell.column.type !== "hidden" && (
+                        <DataTableBodyCell
+                           key={key}
+                           sx={{verticalAlign: "top", background: background}}
+                           noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
+                           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 === "composite" && (
+                                 <DefaultCell isFooter={isFooter}>
+                                    <CompositeWidget widgetMetaData={widgetMetaData} data={cell.value} />
+                                 </DefaultCell>
+                              )
+                           }
+                           {
+                              cell.column.type === "block" && (
+                                 <DefaultCell isFooter={isFooter}>
+                                    <WidgetBlock widgetMetaData={widgetMetaData} block={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>
+                     )
+                  ))
+               );
+            })}
          </Table>
-      </Box>
+      </Box></Box>;
    }
 
    return (
-      <TableContainer sx={{boxShadow: "none"}}>
+      <TableContainer sx={{boxShadow: "none", height: (fixedHeight && !fixedStickyLastRow) ? `${fixedHeight}px` : "auto"}}>
          {entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? (
             <Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
                {entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && (
@@ -448,14 +497,16 @@ function DataTable({
             </Box>
          ) : null}
 
-         {
-            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" justifyContent="space-between" flexDirection="column" height="100%">
+            {
+               fixedStickyLastRow ? (
+                  <>
+                     {getTable(true, page.slice(0, page.length - visibleFooterRows), false)}
+                     {getTable(false, page.slice(page.length - visibleFooterRows), true)}
+                  </>
+               ) : getTable(true, page, false)
+            }
+         </Box>
 
          <Box
             display="flex"

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

@@ -20,6 +20,7 @@
  */
 
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Table from "@mui/material/Table";
@@ -27,13 +28,13 @@ import TableBody from "@mui/material/TableBody";
 import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
 import parse from "html-react-parser";
-import React, {useEffect, useState} from "react";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import DataTableBodyCell from "qqq/components/widgets/tables/cells/DataTableBodyCell";
 import DataTableHeadCell from "qqq/components/widgets/tables/cells/DataTableHeadCell";
 import DefaultCell from "qqq/components/widgets/tables/cells/DefaultCell";
 import DataTable from "qqq/components/widgets/tables/DataTable";
 import Client from "qqq/utils/qqq/Client";
+import React, {useEffect, useState} from "react";
 
 
 //////////////////////////////////////
@@ -42,6 +43,7 @@ import Client from "qqq/utils/qqq/Client";
 export interface TableDataInput
 {
    columns: { [key: string]: any }[];
+   columnHeaderTooltips?: { [columnName: string]: string | JSX.Element };
    rows: { [key: string]: any }[];
 }
 
@@ -57,10 +59,12 @@ interface Props
    fixedStickyLastRow?: boolean;
    fixedHeight?: number;
    data: TableDataInput;
+   widgetMetaData: QWidgetMetaData;
 }
 
 const qController = Client.getInstance();
-function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight}: Props): JSX.Element
+
+function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight, widgetMetaData}: Props): JSX.Element
 {
    const [qInstance, setQInstance] = useState(null as QInstance);
 
@@ -74,7 +78,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
    }, []);
 
    return (
-      <Box py={1} mx={-2}>
+      <Box className="tableCard" mx={-2} mb="-28px" pt="11px" pb="0.25rem">
          {
             data && data.columns && !noRowsFoundHTML ?
                <DataTable
@@ -85,44 +89,29 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
                   fixedHeight={fixedHeight}
                   showTotalEntries={false}
                   isSorted={false}
+                  widgetMetaData={widgetMetaData}
                />
                : noRowsFoundHTML ?
-                  <Box p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
-                     <MDTypography
-                        variant="subtitle2"
-                        color="secondary"
-                        fontWeight="regular"
-                     >
-                        {
-                           noRowsFoundHTML ? (
-                              parse(noRowsFoundHTML)
-                           ) : "No rows found"
-                        }
+                  <Box p={3} pt={0} pb={3} sx={{textAlign: "center"}}>
+                     <MDTypography variant="subtitle2" color="secondary" fontWeight="regular">
+                        {noRowsFoundHTML ? (parse(noRowsFoundHTML)) : "No rows found"}
                      </MDTypography>
                   </Box>
                   :
                   <TableContainer sx={{boxShadow: "none"}}>
-                     <Table>
-                        <Box component="thead">
-                           <TableRow key="header">
-                              {Array(8).fill(0).map((_, i) =>
-                                 <DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
-                                    <Skeleton width="100%" />
-                                 </DataTableHeadCell>
-                              )}
-                           </TableRow>
-                        </Box>
-                        <TableBody>
-                           {Array(5).fill(0).map((_, i) =>
-                              <TableRow sx={{verticalAlign: "top"}} key={`row-${i}`}>
-                                 {Array(8).fill(0).map((_, j) =>
-                                    <DataTableBodyCell key={`cell-${i}-${j}`} align="center">
-                                       <DefaultCell isFooter={false}><Skeleton /></DefaultCell>
-                                    </DataTableBodyCell>
-                                 )}
-                              </TableRow>
-                           )}
-                        </TableBody>
+                     <Table component="div" sx={{display: "grid", gridTemplateRows: "auto", gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"}}>
+                        {Array(8).fill(0).map((_, i) =>
+                           <DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
+                              <Skeleton width="100%" />
+                           </DataTableHeadCell>
+                        )}
+                        {Array(5).fill(0).map((_, i) =>
+                           Array(8).fill(0).map((_, j) =>
+                              <DataTableBodyCell key={`cell-${i}-${j}`} align="center">
+                                 <DefaultCell isFooter={false}><Skeleton /></DefaultCell>
+                              </DataTableBodyCell>
+                           )
+                        )}
                      </Table>
                   </TableContainer>
          }

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

@@ -21,18 +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 QContext from "QContext";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import TableCard from "qqq/components/widgets/tables/TableCard";
 import Widget, {WidgetData} from "qqq/components/widgets/Widget";
+import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useState} from "react";
 
 interface Props
 {
@@ -42,14 +40,14 @@ interface Props
    isChild?: boolean;
 }
 
-TableWidget.defaultProps = {
-};
+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 {helpHelpActive} = useContext(QContext);
 
    const rows = props.widgetData?.rows;
    const columns = props.widgetData?.columns;
@@ -86,14 +84,18 @@ 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";
@@ -101,8 +103,8 @@ function TableWidget(props: Props): JSX.Element
 
          setCsv(csv);
 
-         const fileName = (props.widgetData.label ?? props.widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
-         setFileName(fileName)
+         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
+         setFileName(fileName);
 
          console.log(`useEffect, setting fileName ${fileName}`);
       }
@@ -111,24 +113,47 @@ function TableWidget(props: Props): JSX.Element
 
    const onExportClick = () =>
    {
-      if(csv)
+      if (props.widgetData?.csvData)
+      {
+         const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
+         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
+         HtmlUtils.download(fileName, csv);
+      }
+      else 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)
+   if (props.widgetData?.linkText && props.widgetData?.linkURL)
    {
-      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>
-      );
+      labelAdditionalElementsLeft.push(WidgetUtils.generateLabelLink(props.widgetData?.linkText, props.widgetData?.linkURL));
+   }
+   if (props.widgetMetaData?.showExportButton)
+   {
+      labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
+   }
+
+   //////////////////////////////////////////////////////
+   // look for column-header tooltips from helpContent //
+   //////////////////////////////////////////////////////
+   const columnHeaderTooltips: { [columnName: string]: JSX.Element } = {};
+   for (let column of props.widgetData?.columns ?? [])
+   {
+      const helpRoles = ["ALL_SCREENS"];
+      const slotName = `columnHeader=${column.accessor}`;
+      const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
+
+      if (showHelp)
+      {
+         const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
+         columnHeaderTooltips[column.accessor] = formattedHelpContent;
+      }
    }
 
    return (
@@ -146,7 +171,8 @@ function TableWidget(props: Props): JSX.Element
             hidePaginationDropdown={props.widgetData?.hidePaginationDropdown}
             fixedStickyLastRow={props.widgetData?.fixedStickyLastRow}
             fixedHeight={props.widgetData?.fixedHeight}
-            data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows}}
+            data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows, columnHeaderTooltips: columnHeaderTooltips}}
+            widgetMetaData={props.widgetMetaData}
          />
       </Widget>
    );

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

@@ -19,10 +19,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import Box from "@mui/material/Box";
+import {Box} from "@mui/material";
 import {Theme} from "@mui/material/styles";
-import {ReactNode} from "react";
 import colors from "qqq/assets/theme/base/colors";
+import {ReactNode} from "react";
 
 // Declaring prop types for DataTableBodyCell
 interface Props
@@ -30,16 +30,17 @@ interface Props
    children: ReactNode;
    noBorder?: boolean;
    align?: "left" | "right" | "center";
+   sx?: any;
 }
 
-function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
+function DataTableBodyCell({noBorder, align, sx, children}: Props): JSX.Element
 {
    return (
       <Box
-         component="td"
+         component="div"
          textAlign={align}
          py={1.5}
-         px={3}
+         px={1.5}
          sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({
             borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${colors.grayLines.main}`,
             fontSize: "0.875rem",
@@ -49,12 +50,12 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
             "@media (max-width: 1440px)": {
                fontSize: "0.875rem"
             },
-            "&:nth-child(1)": {
+            "&:nth-of-type(1)": {
                paddingLeft: "1rem"
             },
             "&:last-child": {
                paddingRight: "1rem"
-            }
+            }, ...sx
          })}
       >
          <Box
@@ -72,6 +73,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
 DataTableBodyCell.defaultProps = {
    noBorder: false,
    align: "left",
+   sx: {}
 };
 
 export default DataTableBodyCell;

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

@@ -22,9 +22,10 @@
 import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
-import {ReactNode} from "react";
+import Tooltip from "@mui/material/Tooltip";
 import colors from "qqq/assets/theme/base/colors";
 import {useMaterialUIController} from "qqq/context";
+import {ReactNode} from "react";
 
 // Declaring props types for DataTableHeadCell
 interface Props
@@ -33,27 +34,24 @@ interface Props
    children: ReactNode;
    sorted?: false | "none" | "asce" | "desc";
    align?: "left" | "right" | "center";
+   tooltip?: string | JSX.Element;
 }
 
-function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JSX.Element
+function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: Props): JSX.Element
 {
    const [controller] = useMaterialUIController();
    const {darkMode} = controller;
 
    return (
       <Box
-         component="th"
+         component="div"
          width={width}
          py={1.5}
-         px={3}
+         px={1.5}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
             borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
-            "&:nth-child(1)": {
-               paddingLeft: "1rem"
-            },
-            "&:last-child": {
-               paddingRight: "1rem"
-            },
+            position: "sticky", top: 0, background: "white",
+            zIndex: 1 // so if body rows scroll behind it, they don't show through
          })}
       >
          <Box
@@ -73,39 +71,43 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
                userSelect: sorted && "none",
             })}
          >
-            {children}
-            {sorted && (
-               <Box
-                  position="absolute"
-                  top={0}
-                  right={align !== "right" ? "16px" : 0}
-                  left={align === "right" ? "-5px" : "unset"}
-                  sx={({typography: {size}}: any) => ({
-                     fontSize: size.lg,
-                  })}
-               >
+            <>
+               {
+                  tooltip ? <Tooltip title={tooltip}><span style={{cursor: "default"}}>{children}</span></Tooltip> : children
+               }
+               {sorted && (
                   <Box
-                     sx={{
-                        position: "absolute",
-                        top: -6,
-                        color: sorted === "asce" ? "text" : "secondary",
-                        opacity: sorted === "asce" ? 1 : 0.5
-                     }}
+                     position="absolute"
+                     top={0}
+                     right={align !== "right" ? "16px" : 0}
+                     left={align === "right" ? "-5px" : "unset"}
+                     sx={({typography: {size}}: any) => ({
+                        fontSize: size.lg,
+                     })}
                   >
-                     <Icon>arrow_drop_up</Icon>
+                     <Box
+                        sx={{
+                           position: "absolute",
+                           top: -6,
+                           color: sorted === "asce" ? "text" : "secondary",
+                           opacity: sorted === "asce" ? 1 : 0.5
+                        }}
+                     >
+                        <Icon>arrow_drop_up</Icon>
+                     </Box>
+                     <Box
+                        sx={{
+                           position: "absolute",
+                           top: 0,
+                           color: sorted === "desc" ? "text" : "secondary",
+                           opacity: sorted === "desc" ? 1 : 0.5
+                        }}
+                     >
+                        <Icon>arrow_drop_down</Icon>
+                     </Box>
                   </Box>
-                  <Box
-                     sx={{
-                        position: "absolute",
-                        top: 0,
-                        color: sorted === "desc" ? "text" : "secondary",
-                        opacity: sorted === "desc" ? 1 : 0.5
-                     }}
-                  >
-                     <Icon>arrow_drop_down</Icon>
-                  </Box>
-               </Box>
-            )}
+               )}
+            </>
          </Box>
       </Box>
    );

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/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/fields/FieldRules.ts

@@ -0,0 +1,52 @@
+/*
+ * 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/>.
+ */
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+export interface FieldRule
+{
+   trigger: FieldRuleTrigger;
+   sourceField: string;
+   action: FieldRuleAction;
+   targetField: string;
+   targetWidget: string;
+}
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+export enum FieldRuleTrigger
+{
+   ON_CHANGE = "ON_CHANGE"
+}
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+export enum FieldRuleAction
+{
+   CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD",
+   RELOAD_WIDGET = "RELOAD_WIDGET"
+}

src/qqq/models/misc/PivotTableDefinitionModels.ts

@@ -0,0 +1,159 @@
+/*
+ * 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 {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+
+
+/*******************************************************************************
+ ** put a unique key value in all the pivot table group-by and value objects,
+ ** to help react rendering be sane.
+ *******************************************************************************/
+export class PivotObjectKey
+{
+   private static value = new Date().getTime();
+
+   static next(): number
+   {
+      return PivotObjectKey.value++;
+   }
+}
+
+
+/*******************************************************************************
+ ** Full definition of pivot table
+ *******************************************************************************/
+export class PivotTableDefinition
+{
+   rows: PivotTableGroupBy[];
+   columns: PivotTableGroupBy[];
+   values: PivotTableValue[];
+}
+
+
+/*******************************************************************************
+ ** A field that the pivot table is grouped by, either as a row or column
+ *******************************************************************************/
+export class PivotTableGroupBy
+{
+   fieldName: string;
+   key: number;
+
+   constructor()
+   {
+      this.key = PivotObjectKey.next();
+   }
+}
+
+
+/*******************************************************************************
+ ** A field & function that serves as the computed values in the pivot table
+ *******************************************************************************/
+export class PivotTableValue
+{
+   fieldName: string;
+   function: PivotTableFunction;
+
+   key: number;
+
+   constructor()
+   {
+      this.key = PivotObjectKey.next();
+   }
+}
+
+
+/*******************************************************************************
+ ** Functions that can be applied to pivot table values
+ *******************************************************************************/
+export enum PivotTableFunction
+{
+   SUM = "SUM",
+   COUNT = "COUNT",
+   AVERAGE = "AVERAGE",
+   MAX = "MAX",
+   MIN = "MIN",
+   PRODUCT = "PRODUCT",
+
+   ///////////////////////////////////////////////////////////////////////////////
+   // i don't think we have a useful version of count-nums --unless we allowed  //
+   // it on string fields, and counted if they looked like numbers? is that     //
+   // what we should do? ... leave here as zombie in case that request comes in //
+   ///////////////////////////////////////////////////////////////////////////////
+   // COUNT_NUMS = "COUNT_NUMS",
+
+   STD_DEV = "STD_DEV",
+   STD_DEVP = "STD_DEVP",
+   VAR = "VAR",
+   VARP = "VARP",
+}
+
+const allFunctions = [
+   PivotTableFunction.SUM,
+   PivotTableFunction.COUNT,
+   PivotTableFunction.AVERAGE,
+   PivotTableFunction.MAX,
+   PivotTableFunction.MIN,
+   PivotTableFunction.PRODUCT,
+   // PivotTableFunction.COUNT_NUMS,
+   PivotTableFunction.STD_DEV,
+   PivotTableFunction.STD_DEVP,
+   PivotTableFunction.VAR,
+   PivotTableFunction.VARP
+];
+
+const onlyCount = [PivotTableFunction.COUNT];
+
+const functionsForDates = [PivotTableFunction.COUNT, PivotTableFunction.AVERAGE, PivotTableFunction.MAX, PivotTableFunction.MIN];
+
+export const functionsPerFieldType: { [type: string]: PivotTableFunction[] } = {};
+functionsPerFieldType[QFieldType.STRING] = onlyCount;
+functionsPerFieldType[QFieldType.BOOLEAN] = onlyCount;
+functionsPerFieldType[QFieldType.BLOB] = onlyCount;
+functionsPerFieldType[QFieldType.HTML] = onlyCount;
+functionsPerFieldType[QFieldType.PASSWORD] = onlyCount;
+functionsPerFieldType[QFieldType.TEXT] = onlyCount;
+functionsPerFieldType[QFieldType.TIME] = onlyCount;
+
+functionsPerFieldType[QFieldType.INTEGER] = allFunctions;
+functionsPerFieldType[QFieldType.DECIMAL] = allFunctions;
+// functionsPerFieldType[QFieldType.LONG] = allFunctions;
+
+functionsPerFieldType[QFieldType.DATE] = functionsForDates;
+functionsPerFieldType[QFieldType.DATE_TIME] = functionsForDates;
+
+
+//////////////////////////////////////
+// labels for pivot table functions //
+//////////////////////////////////////
+export const pivotTableFunctionLabels =
+   {
+      "SUM": "Sum",
+      "COUNT": "Count",
+      "AVERAGE": "Average",
+      "MAX": "Max",
+      "MIN": "Min",
+      "PRODUCT": "Product",
+      // "COUNT_NUMS": "Count Numbers",
+      "STD_DEV": "StdDev",
+      "STD_DEVP": "StdDevp",
+      "VAR": "Var",
+      "VARP": "Varp"
+   };

src/qqq/models/query/QQueryColumns.ts

@@ -0,0 +1,449 @@
+/*
+ * 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 DataGridUtils from "qqq/utils/DataGridUtils";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+
+/*******************************************************************************
+ ** member object
+ *******************************************************************************/
+export 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)};
+
+         if (field.name == table.primaryKeyField)
+         {
+            column.pinned = "left";
+
+            //////////////////////////////////////////////////
+            // insert the primary key field after __check__ //
+            //////////////////////////////////////////////////
+            queryColumns.columns.splice(1, 0, column);
+         }
+         else
+         {
+            queryColumns.columns.push(column);
+         }
+      });
+
+      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;
+   };
+
+
+   /*******************************************************************************
+    ** sort the columns list, so that pinned columns go to the front (left) or back
+    ** (right) of the list.
+    *******************************************************************************/
+   public sortColumnsFixingPinPositions = (): void =>
+   {
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      // do a sort to push pinned-left columns to the start, and pinned-right columns to the end //
+      // and otherwise, leave everything alone                                                   //
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      this.columns = this.columns.sort((a: Column, b: Column) =>
+      {
+         if(a.pinned == "left" && b.pinned != "left")
+         {
+            return -1;
+         }
+         else if(b.pinned == "left" && a.pinned != "left")
+         {
+            return 1;
+         }
+         else if(a.pinned == "right" && b.pinned != "right")
+         {
+            return 1;
+         }
+         else if(b.pinned == "right" && a.pinned != "right")
+         {
+            return -1;
+         }
+         else
+         {
+            return (0);
+         }
+      });
+   }
+
+}
+
+
+/*******************************************************************************
+ ** 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,102 @@
+/*
+ * 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;
+
+      FilterUtils.stripAwayIncompleteCriteria(view.queryFilter)
+
+      //////////////////////////////////////////////////////////////////////////////////////////
+      // 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

@@ -31,15 +31,16 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
 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";
 import MiniStatisticsCard from "qqq/components/widgets/statistics/MiniStatisticsCard";
 import BaseLayout from "qqq/layouts/BaseLayout";
 import Client from "qqq/utils/qqq/Client";
+import React, {useContext, useEffect, useState} from "react";
+import {Link, useLocation} from "react-router-dom";
 
 const qController = Client.getInstance();
 
@@ -61,7 +62,7 @@ function AppHome({app}: Props): JSX.Element
    const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date());
    const [widgets, setWidgets] = useState([] as any[]);
 
-   const {pageHeader, setPageHeader} = useContext(QContext);
+   const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext);
 
    const location = useLocation();
 
@@ -74,9 +75,20 @@ function AppHome({app}: Props): JSX.Element
       })();
    }, []);
 
+   const mdbMetaData = app?.supplementalAppMetaData?.get("materialDashboard");
+   let showAppLabelOnHomeScreen = true;
+   let includeTableCountsOnHomeScreen = true;
+   if(mdbMetaData)
+   {
+      showAppLabelOnHomeScreen = mdbMetaData.showAppLabelOnHomeScreen;
+      includeTableCountsOnHomeScreen = mdbMetaData.includeTableCountsOnHomeScreen;
+   }
+
    useEffect(() =>
    {
-      setPageHeader(app.label);
+      setPageHeader(null);
+      recordAnalytics({location: window.location, title: "App: " + app.label});
+      recordAnalytics({category: "appEvents", action: "loadAppScreen", label: app.label});
 
       if (!qInstance)
       {
@@ -120,48 +132,60 @@ function AppHome({app}: Props): JSX.Element
       const tableCountTexts = new Map<string, string>();
       newTables.forEach((table) =>
       {
-         tableCounts.set(table.name, {isLoading: true, value: null});
-
-         setTimeout(async () =>
+         if(includeTableCountsOnHomeScreen)
          {
-            const tableMetaData = await qController.loadTableMetaData(table.name);
-            let countResult = null;
-            if(tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
+            tableCounts.set(table.name, {isLoading: true, value: null});
+            setTimeout(async () =>
             {
-               try
+               const tableMetaData = await qController.loadTableMetaData(table.name);
+               let countResult = null;
+               if (tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
                {
-                  [countResult] = await qController.count(table.name);
+                  try
+                  {
+                     [countResult] = await qController.count(table.name);
 
-                  if (countResult !== null && countResult !== undefined)
-                  {
-                     tableCountNumbers.set(table.name, countResult.toLocaleString());
-                     tableCountTexts.set(table.name, countResult === 1 ? "total record" : "total records");
+                     if (countResult !== null && countResult !== undefined)
+                     {
+                        tableCountNumbers.set(table.name, countResult.toLocaleString());
+                        tableCountTexts.set(table.name, countResult === 1 ? "total record" : "total records");
+                     }
+                     else
+                     {
+                        tableCountNumbers.set(table.name, "–");
+                        tableCountTexts.set(table.name, " ");
+                     }
                   }
-                  else
+                  catch (e)
                   {
+                     console.log("Caught: " + e);
                      tableCountNumbers.set(table.name, "–");
                      tableCountTexts.set(table.name, " ");
                   }
                }
-               catch(e)
+               else
                {
-                  console.log("Caught: " + e);
                   tableCountNumbers.set(table.name, "–");
                   tableCountTexts.set(table.name, " ");
                }
-            }
-            else
-            {
-               tableCountNumbers.set(table.name, "–");
-               tableCountTexts.set(table.name, " ");
-            }
 
-            tableCounts.set(table.name, {isLoading: false, value: countResult});
+               tableCounts.set(table.name, {isLoading: false, value: countResult});
+               setTableCounts(tableCounts);
+               setTableCountNumbers(tableCountNumbers);
+               setTableCountTexts(tableCountTexts);
+               setUpdatedTableCounts(new Date());
+            }, 1);
+         }
+         else
+         {
+            tableCounts.set(table.name, {isLoading: false, value: null});
+            tableCountNumbers.set(table.name, " ");
+            tableCountTexts.set(table.name, " ");
+
             setTableCounts(tableCounts);
             setTableCountNumbers(tableCountNumbers);
             setTableCountTexts(tableCountTexts);
-            setUpdatedTableCounts(new Date());
-         }, 1);
+         }
       });
       setTableCounts(tableCounts);
 
@@ -180,9 +204,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,13 +221,80 @@ 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>
+            {
+               showAppLabelOnHomeScreen &&
+               <Typography textTransform="capitalize" variant="h3">
+                  {app.label}
+               </Typography>
+            }
+            <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>
+         {
+            showAppLabelOnHomeScreen &&
+            <Typography textTransform="capitalize" variant="h3">
+               {app.label}
+            </Typography>
+         }
          <Box>
-            {app.widgets && (
-               <DashboardWidgets widgetMetaDataList={widgets} />
+            {app.widgets && app.widgets.length > 0 && (
+               <Box pb={app.sections ? 2.375 : 4} pt={"0.5rem"}>
+                  <DashboardWidgets widgetMetaDataList={widgets} />
+               </Box>
             )}
-            <Grid container spacing={3}>
+            <Grid container spacing={3} mt={"-1rem"}>
                {
                   app.sections ? (
                      <Grid item xs={12} lg={12}>
@@ -226,7 +314,7 @@ function AppHome({app}: Props): JSX.Element
                                  </Box>
                                  {
                                     section.processes ? (
-                                       <Box p={3} pl={5} pt={0} pb={1}>
+                                       <Box p={3} pl={3} pt={0} pb={1}>
                                           <MDTypography variant="h6">Actions</MDTypography>
                                        </Box>
                                     ) : null
@@ -267,7 +355,7 @@ function AppHome({app}: Props): JSX.Element
                                  }
                                  {
                                     section.reports ? (
-                                       <Box p={3} pl={5} pt={0} pb={1}>
+                                       <Box p={3} pl={3} pt={0} pb={1}>
                                           <MDTypography variant="h6">Reports</MDTypography>
                                        </Box>
                                     ) : null
@@ -310,7 +398,7 @@ function AppHome({app}: Props): JSX.Element
                                  }
                                  {
                                     section.tables ? (
-                                       <Box p={3} pl={5} pb={1} pt={0}>
+                                       <Box p={3} pl={3} pb={1} pt={0}>
                                           <MDTypography variant="h6">Data</MDTypography>
                                        </Box>
                                     ) : null
@@ -322,6 +410,13 @@ function AppHome({app}: Props): JSX.Element
                                              section.tables.map((tableName) =>
                                              {
                                                 let table = app.childMap.get(tableName);
+                                                let count = "";
+                                                let percentage = "";
+                                                if(includeTableCountsOnHomeScreen)
+                                                {
+                                                   count = !tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name));
+                                                   percentage = !tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name));
+                                                }
                                                 return (
                                                    <Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}>
                                                       {hasTablePermission(tableName) ?
@@ -329,8 +424,8 @@ function AppHome({app}: Props): JSX.Element
                                                             <Box className="big-icon" mb={3}>
                                                                <MiniStatisticsCard
                                                                   title={{fontWeight: "bold", text: table.label}}
-                                                                  count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}
-                                                                  percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
+                                                                  count={count}
+                                                                  percentage={{color: "info", text: percentage}}
                                                                   icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
                                                                />
                                                             </Box>
@@ -338,8 +433,8 @@ function AppHome({app}: Props): JSX.Element
                                                          <Box mb={3} title="You do not have permission to access this table">
                                                             <MiniStatisticsCard
                                                                title={{fontWeight: "bold", text: table.label}}
-                                                               count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}
-                                                               percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
+                                                               count={count}
+                                                               percentage={{color: "info", text: percentage}}
                                                                icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
                                                                isDisabled={true}
                                                             />

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";
@@ -120,7 +121,7 @@ function ColumnStats({tableMetaData, fieldMetaData, fieldTableName, filter}: Pro
             }
 
             const valueCounts = [] as QRecord[];
-            for(let i = 0; i < result.values.valueCounts.length; i++)
+            for(let i = 0; i < result.values.valueCounts?.length; i++)
             {
                let valueRecord = new QRecord(result.values.valueCounts[i]);
 
@@ -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;