CE-1946: added child record widget data, minor divider styles

Feature/ce 1727 mobile first uiux

.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.82",
+      "@kingsrook/qqq-frontend-core": "1.0.110",
       "@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",
@@ -33,14 +35,19 @@
       "html-react-parser": "1.4.8",
       "html-to-text": "^9.0.5",
       "http-proxy-middleware": "2.0.6",
+      "jwt-decode": "3.1.2",
       "rapidoc": "9.3.4",
       "react": "18.0.0",
       "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",
@@ -52,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.19.0-SNAPSHOT</revision>
+      <revision>0.23.0-SNAPSHOT</revision>
 
       <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
       <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
@@ -66,7 +66,7 @@
       <dependency>
          <groupId>com.kingsrook.qqq</groupId>
          <artifactId>qqq-backend-core</artifactId>
-         <version>0.17.0-SNAPSHOT</version>
+         <version>0.21.0</version>
       </dependency>
       <dependency>
          <groupId>org.slf4j</groupId>
@@ -77,13 +77,13 @@
       <dependency>
          <groupId>org.seleniumhq.selenium</groupId>
          <artifactId>selenium-java</artifactId>
-         <version>4.10.0</version>
+         <version>4.15.0</version>
          <scope>test</scope>
       </dependency>
       <dependency>
          <groupId>io.github.bonigarcia</groupId>
          <artifactId>webdrivermanager</artifactId>
-         <version>5.4.1</version>
+         <version>5.6.2</version>
          <scope>test</scope>
       </dependency>
       <dependency>
@@ -119,7 +119,7 @@
       <dependency>
          <groupId>org.json</groupId>
          <artifactId>json</artifactId>
-         <version>20230227</version>
+         <version>20231013</version>
          <scope>test</scope>
       </dependency>
       <dependency>
@@ -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,11 +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 React, {JSXElementConstructor, Key, ReactElement, useContext, 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";
@@ -52,16 +49,22 @@ 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();
-export const SESSION_ID_COOKIE_NAME = "sessionId";
+export const SESSION_UUID_COOKIE_NAME = "sessionUUID";
 
 export default function App()
 {
-   const [, setCookie, removeCookie] = useCookies([SESSION_ID_COOKIE_NAME]);
+   const [cookies, setCookie, removeCookie] = useCookies([SESSION_UUID_COOKIE_NAME]);
    const {user, getAccessTokenSilently, logout} = useAuth0();
    const [loadingToken, setLoadingToken] = useState(false);
    const [isFullyAuthenticated, setIsFullyAuthenticated] = useState(false);
@@ -69,8 +72,70 @@ export default function App()
    const [branding, setBranding] = useState({} as QBrandingMetaData);
    const [metaData, setMetaData] = useState({} as QInstance);
    const [needLicenseKey, setNeedLicenseKey] = useState(true);
+   const [loggedInUser, setLoggedInUser] = useState({} as { name?: string, email?: string });
    const [defaultRoute, setDefaultRoute] = useState("/no-apps");
 
+   /////////////////////////////////////////////////////////
+   // tell the client how to do a logout if it sees a 401 //
+   /////////////////////////////////////////////////////////
+   Client.setUnauthorizedCallback(() =>
+   {
+      logout();
+   });
+
+   const shouldStoreNewToken = (newToken: string, oldToken: string): boolean =>
+   {
+      if (!cookies[SESSION_UUID_COOKIE_NAME])
+      {
+         console.log("No session uuid cookie - so we should store a new one.");
+         return (true);
+      }
+
+      if (!oldToken)
+      {
+         console.log("No accessToken in localStorage - so we should store a new one.");
+         return (true);
+      }
+
+      try
+      {
+         const oldJSON: any = jwt_decode(oldToken);
+         const newJSON: any = jwt_decode(newToken);
+
+         ////////////////////////////////////////////////////////////////////////////////////
+         // 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()))
+         {
+            console.log("Access token in local storage was expired - so we should store a new one.");
+            return (true);
+         }
+
+         ////////////////////////////////////////////////////////////////////////////////////////////////
+         // 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"];
+
+         const different = JSON.stringify(newJSON) !== JSON.stringify(oldJSON);
+         if (different)
+         {
+            console.log("Latest access token from auth0 has changed vs localStorage - so we should store a new one.");
+         }
+         return (different);
+      }
+      catch (e)
+      {
+         console.log("Caught in shouldStoreNewToken: " + e);
+      }
+
+      return (true);
+   };
+
    useEffect(() =>
    {
       if (loadingToken)
@@ -92,20 +157,39 @@ export default function App()
             {
                console.log("Loading token from auth0...");
                const accessToken = await getAccessTokenSilently();
-               qController.setAuthorizationHeaderValue("Bearer " + accessToken);
 
-               /////////////////////////////////////////////////////////////////////////////////
-               // we've stopped using session id cook with auth0, so make sure it is not set. //
-               /////////////////////////////////////////////////////////////////////////////////
-               removeCookie(SESSION_ID_COOKIE_NAME);
+               const lsAccessToken = localStorage.getItem("accessToken");
+               if (shouldStoreNewToken(accessToken, lsAccessToken))
+               {
+                  console.log("Sending accessToken to backend, requesting a sessionUUID...");
+                  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. //
+                  /////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  // 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
+               {
+                  console.log("Using existing sessionUUID cookie");
+               }
 
                setIsFullyAuthenticated(true);
+               qController.setGotAuthentication();
+
+               setLoggedInUser(user);
                console.log("Token load complete.");
             }
             catch (e)
             {
                console.log(`Error loading token: ${JSON.stringify(e)}`);
                qController.clearAuthenticationMetaDataLocalStorage();
+               localStorage.removeItem("accessToken");
+               removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
                logout();
                return;
             }
@@ -116,9 +200,9 @@ export default function App()
             // use a random token if anonymous or mock //
             /////////////////////////////////////////////
             console.log("Generating random token...");
-            qController.setAuthorizationHeaderValue(null);
             setIsFullyAuthenticated(true);
-            setCookie(SESSION_ID_COOKIE_NAME, Md5.hashStr(`${new Date()}`), {path: "/"});
+            qController.setGotAuthentication();
+            setCookie(SESSION_UUID_COOKIE_NAME, Md5.hashStr(`${new Date()}`), {path: "/"});
             console.log("Token generation complete.");
             return;
          }
@@ -145,11 +229,12 @@ 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([]);
    const [appRoutes, setAppRoutes] = useState(null as any);
-   const [pathToLabelMap, setPathToLabelMap] = useState({} as {[path: string]: string});
+   const [pathToLabelMap, setPathToLabelMap] = useState({} as { [path: string]: string });
 
    ////////////////////////////////////////////
    // load qqq meta data to make more routes //
@@ -267,14 +352,14 @@ export default function App()
                   name: `${app.label}`,
                   key: app.name,
                   route: path,
-                  component: <RecordQuery table={table} key={table.name}/>,
+                  component: <RecordQuery table={table} key={table.name} />,
                });
 
                routeList.push({
                   name: `${app.label}`,
                   key: app.name,
-                  route: `${path}/savedFilter/:id`,
-                  component: <RecordQuery table={table} key={table.name}/>,
+                  route: `${path}/savedView/:id`,
+                  component: <RecordQuery table={table} key={table.name} />,
                });
 
                routeList.push({
@@ -308,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`,
@@ -429,14 +521,14 @@ export default function App()
 
             let profileRoutes = {};
             const gravatarBase = "https://www.gravatar.com/avatar/";
-            const hash = Md5.hashStr(user?.email || "user");
+            const hash = Md5.hashStr(loggedInUser?.email || "user");
             const profilePicture = `${gravatarBase}${hash}`;
             profileRoutes = {
                type: "collapse",
-               name: user?.name,
+               name: loggedInUser?.name ?? "Anonymous",
                key: "username",
                noCollapse: true,
-               icon: <Avatar src={profilePicture} alt="{user?.name}" />,
+               icon: <Avatar src={profilePicture} alt="{loggedInUser?.name}" />,
             };
             setProfileRoutes(profileRoutes);
 
@@ -468,8 +560,8 @@ export default function App()
                });
             }
 
-            const pathToLabelMap: {[path: string]: string} = {}
-            for(let i =0; i<appRoutesList.length; i++)
+            const pathToLabelMap: { [path: string]: string } = {};
+            for (let i = 0; i < appRoutesList.length; i++)
             {
                const route = appRoutesList[i];
                pathToLabelMap[route.route] = route.name;
@@ -493,9 +585,12 @@ 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");
+                  removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
 
                   //////////////////////////////////////////////////////
                   // todo - this is auth0 logout... make more generic //
@@ -571,32 +666,58 @@ 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
          }}>
             <ThemeProvider theme={theme}>
                <CssBaseline />
-               <CommandMenu metaData={metaData}/>
+               <CommandMenu metaData={metaData} />
                <Sidenav
                   color={sidenavColor}
                   icon={branding.icon}
@@ -604,7 +725,6 @@ export default function App()
                   appName={branding.appName}
                   branding={branding}
                   routes={sideNavRoutes}
-                  pathToLabelMap={pathToLabelMap}
                   onMouseEnter={handleOnMouseEnter}
                   onMouseLeave={handleOnMouseLeave}
                />

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

@@ -22,7 +22,7 @@
 import {useAuth0} from "@auth0/auth0-react";
 import React, {useEffect} from "react";
 import {useCookies} from "react-cookie";
-import {SESSION_ID_COOKIE_NAME} from "App";
+import {SESSION_UUID_COOKIE_NAME} from "App";
 
 interface Props
 {
@@ -33,13 +33,13 @@ interface Props
 function HandleAuthorizationError({errorMessage}: Props)
 {
 
-   const [, , removeCookie] = useCookies([SESSION_ID_COOKIE_NAME]);
+   const [, , removeCookie] = useCookies([SESSION_UUID_COOKIE_NAME]);
    const {logout} = useAuth0();
 
    useEffect(() =>
    {
       logout();
-      removeCookie(SESSION_ID_COOKIE_NAME, {path: "/"});
+      removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
    });
 
    return (

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/qqq/components/audits/AuditBody.tsx

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

src/qqq/components/buttons/DefaultButtons.tsx

@@ -30,14 +30,17 @@ import MDButton from "qqq/components/legacy/MDButton";
 
 export const standardWidth = "150px";
 
+const standardML = {xs: 1, md: 3};
+
 interface QCreateNewButtonProps
 {
    tablePath: string;
 }
+
 export function QCreateNewButton({tablePath}: QCreateNewButtonProps): JSX.Element
 {
    return (
-      <Box ml={3} mr={2} width={standardWidth}>
+      <Box display="inline-block" ml={standardML} mr={0} width={standardWidth}>
          <Link to={`${tablePath}/create`}>
             <MDButton variant="gradient" color="info" fullWidth startIcon={<Icon>add</Icon>}>
                Create New
@@ -54,6 +57,7 @@ interface QSaveButtonProps
    onClickHandler?: any,
    disabled: boolean
 }
+
 QSaveButton.defaultProps = {
    label: "Save",
    iconName: "save"
@@ -62,7 +66,7 @@ QSaveButton.defaultProps = {
 export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveButtonProps): JSX.Element
 {
    return (
-      <Box ml={3} width={standardWidth}>
+      <Box ml={standardML} width={standardWidth}>
          <MDButton type="submit" variant="gradient" color="info" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
             {label}
          </MDButton>
@@ -72,14 +76,19 @@ export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveBu
 
 interface QDeleteButtonProps
 {
-   onClickHandler: any
+   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>}>
+      <Box ml={standardML} width={standardWidth}>
+         <MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>} disabled={disabled}>
             Delete
          </MDButton>
       </Box>
@@ -89,7 +98,7 @@ export function QDeleteButton({onClickHandler}: QDeleteButtonProps): JSX.Element
 export function QEditButton(): JSX.Element
 {
    return (
-      <Box ml={3} width={standardWidth}>
+      <Box ml={standardML} width={standardWidth}>
          <Link to="edit">
             <MDButton variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>edit</Icon>}>
                Edit
@@ -123,30 +132,12 @@ 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;
    disabled: boolean;
    label?: string;
-   iconName?: string
+   iconName?: string;
 }
 
 export function QCancelButton({
@@ -154,7 +145,7 @@ export function QCancelButton({
 }: QCancelButtonProps): JSX.Element
 {
    return (
-      <Box ml="auto" width={standardWidth}>
+      <Box ml={standardML} mb={2} width={standardWidth}>
          <MDButton type="button" variant="outlined" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} onClick={onClickHandler} disabled={disabled}>
             {label}
          </MDButton>
@@ -169,15 +160,15 @@ QCancelButton.defaultProps = {
 
 interface QSubmitButtonProps
 {
-   label?: string
-   iconName?: string
-   disabled: boolean
+   label?: string;
+   iconName?: string;
+   disabled: boolean;
 }
 
 export function QSubmitButton({label, iconName, disabled}: QSubmitButtonProps): JSX.Element
 {
    return (
-      <Box ml={3} width={standardWidth}>
+      <Box ml={standardML} width={standardWidth}>
          <MDButton type="submit" variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
             {label}
          </MDButton>

src/qqq/components/forms/BooleanFieldSwitch.tsx

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

src/qqq/components/forms/DynamicForm.tsx

@@ -32,6 +32,7 @@ import React, {useState} from "react";
 import QDynamicFormField from "qqq/components/forms/DynamicFormField";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import HelpContent from "qqq/components/misc/HelpContent";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
 interface Props
@@ -41,16 +42,13 @@ interface Props
    bulkEditMode?: boolean;
    bulkEditSwitchChangeHandler?: any;
    record?: QRecord;
+   helpRoles?: string[];
+   helpContentKeyPrefix?: string;
 }
 
-function QDynamicForm(props: Props): JSX.Element
+function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHandler, record, helpRoles, helpContentKeyPrefix}: Props): JSX.Element
 {
-   const {
-      formData, formLabel, bulkEditMode, bulkEditSwitchChangeHandler,
-   } = props;
-   const {
-      formFields, values, errors, touched,
-   } = formData;
+   const {formFields, values, errors, touched} = formData;
 
    const formikProps = useFormikContext();
    const [fileName, setFileName] = useState(null as string);
@@ -70,8 +68,8 @@ function QDynamicForm(props: Props): JSX.Element
    {
       setFileName(null);
       formikProps.setFieldValue(fieldName, null);
-      props.record?.values.delete(fieldName)
-      props.record?.displayValues.delete(fieldName)
+      record?.values.delete(fieldName)
+      record?.displayValues.delete(fieldName)
    };
 
    const bulkEditSwitchChanged = (name: string, value: boolean) =>
@@ -79,6 +77,7 @@ function QDynamicForm(props: Props): JSX.Element
       bulkEditSwitchChangeHandler(name, value);
    };
 
+
    return (
       <Box>
          <Box lineHeight={0}>
@@ -96,29 +95,38 @@ function QDynamicForm(props: Props): JSX.Element
                   && Object.keys(formFields).map((fieldName: any) =>
                   {
                      const field = formFields[fieldName];
+                     if (field.omitFromQDynamicForm)
+                     {
+                        return null;
+                     }
+
                      if (values[fieldName] === undefined)
                      {
                         values[fieldName] = "";
                      }
 
-                     if (field.omitFromQDynamicForm)
+                     let formattedHelpContent = <HelpContent helpContents={field.fieldMetaData.helpContents} roles={helpRoles} helpContentKey={`${helpContentKeyPrefix ?? ""}field:${fieldName}`} />;
+                     if(formattedHelpContent)
                      {
-                        return null;
+                        formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box>
                      }
 
+                     const labelElement = <Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
+                        <label htmlFor={field.name}>{field.label}</label>
+                     </Box>
+
                      if (field.type === "file")
                      {
                         const pseudoField = new QFieldMetaData({name: fieldName, type: QFieldType.BLOB});
                         return (
                            <Grid item xs={12} sm={6} key={fieldName}>
                               <Box mb={1.5}>
-
-                                 <InputLabel shrink={true}>{field.label}</InputLabel>
+                                 {labelElement}
                                  {
-                                    props.record && props.record.values.get(fieldName) && <Box fontSize="0.875rem" pb={1}>
+                                    record && record.values.get(fieldName) && <Box fontSize="0.875rem" pb={1}>
                                        Current File:
                                        <Box display="inline-flex" pl={1}>
-                                          {ValueUtils.getDisplayValue(pseudoField, props.record, "view")}
+                                          {ValueUtils.getDisplayValue(pseudoField, record, "view")}
                                           <Tooltip placement="bottom" title="Remove current file">
                                              <Icon className="blobIcon" fontSize="small" onClick={(e) => removeFile(fieldName)}>delete</Icon>
                                           </Tooltip>
@@ -162,18 +170,18 @@ 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}
+                                 fieldPossibleValueProps={field.possibleValueProps}
                                  isEditable={field.isEditable}
-                                 fieldLabel={field.label}
+                                 fieldLabel=""
                                  initialValue={values[fieldName]}
-                                 initialDisplayValue={field.possibleValueProps.initialDisplayValue}
                                  bulkEditMode={bulkEditMode}
                                  bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
                                  otherValues={otherValuesMap}
+                                 useCase="form"
                               />
+                              {formattedHelpContent}
                            </Grid>
                         );
                      }
@@ -182,9 +190,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 +205,7 @@ function QDynamicForm(props: Props): JSX.Element
                               success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
                               formFieldObject={field}
                            />
+                           {formattedHelpContent}
                         </Grid>
                      );
                   })}
@@ -207,6 +218,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
@@ -38,6 +40,8 @@ interface Props
    value: any;
    type: string;
    isEditable?: boolean;
+   placeholder?: string;
+   backgroundColor?: string;
 
    [key: string]: any;
 
@@ -47,11 +51,12 @@ interface Props
 }
 
 function QDynamicFormField({
-   label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, formFieldObject, ...rest
+   label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, placeholder, backgroundColor, formFieldObject, ...rest
 }: Props): JSX.Element
 {
    const [switchChecked, setSwitchChecked] = useState(false);
    const [isDisabled, setIsDisabled] = useState(!isEditable || bulkEditMode);
+   const {inputBorderColor} = colors;
 
    const {setFieldValue} = useFormikContext();
 
@@ -62,18 +67,30 @@ function QDynamicFormField({
       inputLabelProps.shrink = true;
    }
 
-   const inputProps = {};
+   const inputProps: any = {};
    if (displayFormat && displayFormat.startsWith("$"))
    {
-      // @ts-ignore
       inputProps.startAdornment = <InputAdornment position="start">$</InputAdornment>;
    }
    if (displayFormat && displayFormat.endsWith("%%"))
    {
-      // @ts-ignore
       inputProps.endAdornment = <InputAdornment position="end">%</InputAdornment>;
    }
 
+   if (placeholder)
+   {
+      inputProps.placeholder = placeholder
+   }
+
+   if(backgroundColor)
+   {
+      inputProps.sx = {
+         "&.MuiInputBase-root": {
+            backgroundColor: backgroundColor
+         }
+      };
+   }
+
    // @ts-ignore
    const handleOnWheel = (e) =>
    {
@@ -83,17 +100,69 @@ 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")
    {
       getsBulkEditHtmlLabel = false;
-      field = (<BooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} />);
+      field = (<>
+         <BooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} />
+         <Box mt={0.75}>
+            <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
+               {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={name} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
+            </MDTypography>
+         </Box>
+      </>);
    }
    else if (type === "ace")
    {
       let mode = "text";
-      if(formFieldObject && formFieldObject.languageMode)
+      if (formFieldObject && formFieldObject.languageMode)
       {
          mode = formFieldObject.languageMode;
       }
@@ -115,7 +184,7 @@ function QDynamicFormField({
                width="100%"
                height="300px"
                value={value}
-               style={{border: "1px solid gray"}}
+               style={{border: `1px solid ${inputBorderColor}`, borderRadius: "0.75rem"}}
             />
          </>
       );
@@ -124,7 +193,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")
@@ -164,6 +233,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

@@ -22,29 +22,41 @@
 import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {FieldPossibleValueProps} from "qqq/models/fields/FieldPossibleValueProps";
 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 +97,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,64 +119,143 @@ 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)
-         {
-            ////////////////////////////////////////////////////////////////////////////////////////////
-            // the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
-            // rather, it's more like "null is how empty will be treated" or some-such...             //
-            ////////////////////////////////////////////////////////////////////////////////////////////
-            return (Yup.string().required(`${field.label} is required.`).nullable(true));
-         }
-         else
-         {
-            return (Yup.string().required(`${field.label} is required.`));
-         }
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         // the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
+         // rather, it's more like "null is how empty will be treated" or some-such...             //
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         return (Yup.string().required(`${field.label ?? "This field"} is required.`).nullable(true));
       }
       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++)
       {
          const field = qFields[i];
 
+         if(!dynamicFormFields[field.name])
+         {
+            continue;
+         }
+
          /////////////////////////////////////////
          // add props for possible value fields //
          /////////////////////////////////////////
-         if (field.possibleValueSourceName && dynamicFormFields[field.name])
+         if (field.possibleValueSourceName || field.inlinePossibleValueSource)
          {
-            let initialDisplayValue = null;
+            let props: FieldPossibleValueProps =
+               {
+                  isPossibleValue: true,
+                  fieldName: field.name,
+                  initialDisplayValue: null
+               }
+
             if (displayValues)
             {
-               initialDisplayValue = displayValues.get(field.name);
+               props.initialDisplayValue = displayValues.get(field.name);
             }
 
-            if (tableName)
+            if(field.inlinePossibleValueSource)
             {
-               dynamicFormFields[field.name].possibleValueProps =
-                  {
-                     isPossibleValue: true,
-                     tableName: tableName,
-                     initialDisplayValue: initialDisplayValue,
-                  };
+               //////////////////////////////////////////////////////////////////////
+               // handle an inline PVS - which is a list of possible value objects //
+               //////////////////////////////////////////////////////////////////////
+               props.possibleValues = field.inlinePossibleValueSource;
+            }
+            else if (tableName)
+            {
+               props.tableName = tableName;
+            }
+            else if (processName)
+            {
+               props.processName = processName;
             }
             else
             {
-               dynamicFormFields[field.name].possibleValueProps =
-                  {
-                     isPossibleValue: true,
-                     processName: processName,
-                     initialDisplayValue: initialDisplayValue,
-                  };
+               props.possibleValueSourceName = field.possibleValueSourceName;
             }
+
+            dynamicFormFields[field.name].possibleValueProps = props;
          }
       }
    }
+
+
+   /*******************************************************************************
+    ** 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,20 +28,19 @@ 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 {FieldPossibleValueProps} from "qqq/models/fields/FieldPossibleValueProps";
 import Client from "qqq/utils/qqq/Client";
+import React, {useEffect, useState} from "react";
 
 interface Props
 {
-   tableName?: string;
-   processName?: string;
-   fieldName: string;
+   fieldPossibleValueProps: FieldPossibleValueProps;
    overrideId?: string;
    fieldLabel: string;
    inForm: boolean;
    initialValue?: any;
-   initialDisplayValue?: string;
    initialValues?: QPossibleValue[];
    onChange?: any;
    isEditable?: boolean;
@@ -49,33 +48,97 @@ interface Props
    bulkEditMode?: boolean;
    bulkEditSwitchChangeHandler?: any;
    otherValues?: Map<string, any>;
+   variant: "standard" | "outlined";
+   initiallyOpen: boolean;
+   useCase: "form" | "filter";
 }
 
 DynamicSelect.defaultProps = {
-   tableName: null,
-   processName: null,
    inForm: true,
    initialValue: null,
-   initialDisplayValue: null,
    initialValues: undefined,
    onChange: null,
    isEditable: true,
    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({fieldPossibleValueProps, overrideId, fieldLabel, inForm, initialValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen, useCase}: Props)
 {
-   const [open, setOpen] = useState(false);
+   const {fieldName, initialDisplayValue, possibleValueSourceName, possibleValues, processName, tableName} = fieldPossibleValueProps;
+
+   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 - //
@@ -103,13 +166,49 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       setFieldValueRef = setFieldValue;
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const filterInlinePossibleValues = (searchTerm: string, possibleValues: QPossibleValue[]): QPossibleValue[] =>
+   {
+      return possibleValues.filter(pv => pv.label?.toLowerCase().startsWith(searchTerm));
+   }
+
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   const loadResults = async (): Promise<QPossibleValue[]> =>
+   {
+      if(possibleValues)
+      {
+         return filterInlinePossibleValues(searchTerm, possibleValues)
+      }
+      else
+      {
+         return await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues, useCase);
+      }
+   }
+
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    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 +218,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 loadResults();
 
-         if(tableMetaData == null && tableName)
+         if (tableMetaData == null && tableName)
          {
             let tableMetaData: QTableMetaData = await qController.loadTableMetaData(tableName);
             setTableMetaData(tableMetaData);
@@ -132,7 +231,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
          // console.log(`${results}`);
          if (active)
          {
-            setOptions([ ...results ]);
+            setOptions([...results]);
          }
       })();
 
@@ -140,32 +239,67 @@ 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 loadResults();
+
+            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);
       }
    };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const handleBlur = (x: any) =>
    {
       setSearchTerm(null);
-   }
+   };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const handleChanged = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) =>
    {
       // console.log("handleChanged.  value is:");
       // console.log(value);
       setSearchTerm(null);
 
-      if(onChange)
+      if (onChange)
       {
-         if(isMultiple)
+         if (isMultiple)
          {
             onChange(value);
          }
@@ -174,12 +308,16 @@ 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);
       }
    };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const filterOptions = (options: { id: any; label: string; }[], state: FilterOptionsState<{ id: any; label: string; }>): { id: any; label: string; }[] =>
    {
       /////////////////////////////////////////////////////////////////////////////////
@@ -187,8 +325,12 @@ 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 +338,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,12 +373,16 @@ 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 = () =>
    {
       const newSwitchValue = !switchChecked;
@@ -244,20 +391,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 ?? "anonymous"}
+            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 +421,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 +464,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
                <TextField
                   {...params}
                   label={fieldLabel}
-                  variant="standard"
+                  variant={variant}
                   autoComplete="off"
                   type="search"
                   InputProps={{
@@ -324,7 +483,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={overrideId ?? fieldName ?? possibleValueSourceName ?? "anonymous"} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
                </MDTypography>
             </Box>
          }
@@ -341,6 +500,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 +520,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
    else
    {
       return (
-         <Box mb={1.5}>
+         <Box>
             {autocomplete}
          </Box>
       );

src/qqq/components/horseshoe/Breadcrumbs.tsx

@@ -25,6 +25,7 @@ import Icon from "@mui/material/Icon";
 import {ReactNode, useContext} from "react";
 import {Link} from "react-router-dom";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 
 interface Props
@@ -62,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;
       }
@@ -112,48 +127,31 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
       <Box mr={{xs: 0, xl: 8}}>
          <MuiBreadcrumbs
             sx={{
+               fontSize: "1.125rem",
+               fontWeight: "500",
+               color: colors.dark.main,
+               "& li": {
+                  lineHeight: "unset!important"
+               },
+               "& a": {
+                  color: colors.gray.main
+               },
                "& .MuiBreadcrumbs-separator": {
-                  color: ({palette: {white, grey}}) => (light ? white.main : grey[600]),
+                  fontSize: "1.125rem",
+                  fontWeight: "500",
+                  color: colors.dark.main
                },
             }}
          >
             <Link to="/">
-               <MDTypography
-                  component="span"
-                  variant="body2"
-                  color={light ? "white" : "dark"}
-                  opacity={light ? 0.8 : 0.5}
-                  sx={{lineHeight: 0}}
-               >
-                  <Icon>{icon}</Icon>
-               </MDTypography>
+               <Icon sx={{fontSize: "1.25rem!important", position: "relative", top: "0.25rem"}}>{icon}</Icon>
             </Link>
             {fullRoutes.map((fullRoute: string) => (
                <Link to={fullRoute} key={fullRoute}>
-                  <MDTypography
-                     component="span"
-                     variant="button"
-                     fontWeight="regular"
-                     textTransform="capitalize"
-                     color={light ? "white" : "dark"}
-                     opacity={light ? 0.8 : 0.5}
-                     sx={{lineHeight: 0}}
-                  >
-                     {fullPathToLabel(fullRoute, fullRoute.replace(/.*\//, ""))}
-                  </MDTypography>
+                  {fullPathToLabel(fullRoute, fullRoute.replace(/.*\//, ""))}
                </Link>
             ))}
          </MuiBreadcrumbs>
-         <MDTypography
-            pt={1}
-            fontWeight="bold"
-            textTransform="capitalize"
-            variant="h5"
-            color={light ? "white" : "dark"}
-            noWrap
-         >
-            {pageHeader}
-         </MDTypography>
       </Box>
    );
 }

src/qqq/components/horseshoe/Footer.tsx

@@ -64,13 +64,14 @@ function Footer({company, links}: Props): JSX.Element
       <Box
          width="100%"
          display="flex"
-         flexDirection={{xs: "column", lg: "row"}}
+         flexDirection={{xs: "column", md: "row"}}
          justifyContent="space-between"
          alignItems="center"
          px={1.5}
          style={{
             position: "fixed", bottom: "0px", zIndex: -1, marginBottom: "10px",
          }}
+         left={{xs: "0", xl: "auto"}}
       >
          {
             href && name &&

src/qqq/components/horseshoe/NavBar.tsx

@@ -19,23 +19,22 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Popper} from "@mui/material";
+import {Popper, InputAdornment, 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, navbarIconButton, navbarRow,} from "qqq/components/horseshoe/Styles";
-import {setTransparentNavbar, useMaterialUIController,} from "qqq/context";
+import {navbar, navbarContainer, navbarRow, navbarMobileMenu, recentlyViewedMenu,} from "qqq/components/horseshoe/Styles";
+import MDTypography from "qqq/components/legacy/MDTypography";
+import {setTransparentNavbar, useMaterialUIController, setMiniSidenav} from "qqq/context";
 import HistoryUtils from "qqq/utils/HistoryUtils";
 
 // Declaring prop types for NavBar
@@ -46,7 +45,8 @@ interface Props
    isMini?: boolean;
 }
 
-interface HistoryEntry {
+interface HistoryEntry
+{
    id: number;
    path: string;
    label: string;
@@ -57,7 +57,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
 {
    const [navbarType, setNavbarType] = useState<"fixed" | "absolute" | "relative" | "static" | "sticky">();
    const [controller, dispatch] = useMaterialUIController();
-   const {transparentNavbar, fixedNavbar, darkMode,} = controller;
+   const {miniSidenav, transparentNavbar, fixedNavbar, darkMode,} = controller;
    const [openMenu, setOpenMenu] = useState<any>(false);
    const [history, setHistory] = useState<any>([] as HistoryEntry[]);
    const [autocompleteValue, setAutocompleteValue] = useState<any>(null);
@@ -65,6 +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,17 +100,19 @@ 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
       return () => window.removeEventListener("scroll", handleTransparentNavbar);
    }, [dispatch, fixedNavbar]);
 
+   const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
+
    const goToHistory = (path: string) =>
    {
       navigate(path);
-   }
+   };
 
    function buildHistoryEntries()
    {
@@ -116,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);
    }
 
@@ -130,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)
    {
@@ -143,8 +147,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
          {...props}
          style={{whiteSpace: "nowrap", width: "auto"}}
          placement="bottom-end"
-      />)
-   }
+      />);
+   };
 
    const renderHistory = () =>
    {
@@ -157,12 +161,20 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             options={history}
             autoHighlight
             blurOnSelect
-            style={{width: "200px"}}
+            style={{width: "16rem"}}
             onOpen={handleHistoryOnOpen}
             onChange={handleAutocompleteOnChange}
             PopperComponent={CustomPopper}
             isOptionEqualToValue={(option, value) => option.id === value.id}
-            renderInput={(params) => <TextField {...params} label="Recently Viewed Records" />}
+            sx={recentlyViewedMenu}
+            renderInput={(params) => <TextField {...params} label="Recently Viewed Records" InputProps={{
+               ...params.InputProps,
+               endAdornment: (
+                  <InputAdornment position="end">
+                     <Icon sx={{position: "relative", right: "-1rem"}}>keyboard_arrow_down</Icon>
+                  </InputAdornment>
+               )
+            }} />}
             renderOption={(props, option: HistoryEntry) => (
                <Box {...props} component="li" key={option.id} sx={{width: "auto"}}>
                   <Box sx={{width: "auto", px: "8px", whiteSpace: "overflow"}} key={option.id}>
@@ -173,23 +185,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             )}
          />
       );
-   }
-
-
-   // Render the notifications menu
-   const renderMenu = () => (
-      <Menu
-         anchorEl={openMenu}
-         anchorReference={null}
-         anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left",
-         }}
-         open={Boolean(openMenu)}
-         onClose={handleCloseMenu}
-         sx={{mt: 2}}
-      />
-   );
+   };
 
    // Styles for the navbar icons
    const iconsStyle = ({
@@ -215,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}
@@ -240,29 +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}>
+                  <Icon sx={iconsStyle} fontSize="large">menu</Icon>
+               </IconButton>
                <QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
             </Box>
             {isMini ? null : (
-               <Box sx={(theme) => navbarRow(theme, {isMini})}>
-                  <Box pr={1}>
+               <Box sx={(theme) => navbarRowRight(theme, {isMini})}>
+                  <Box mt={"-0.25rem"} pb={"0.75rem"} pr={2} mr={-2} sx={{"& *": {cursor: "pointer !important"}}}>
                      {renderHistory()}
                   </Box>
-                  <Box color={light ? "white" : "inherit"}>
-                     <IconButton
-                        size="small"
-                        color="inherit"
-                        sx={navbarIconButton}
-                        onClick={handleOpenMenu}
-                     >
-                        <Badge badgeContent={0} color="error" variant="dot">
-                           <Icon sx={iconsStyle}>notifications</Icon>
-                        </Badge>
+                  <Box mt={"-1rem"}>
+                     <IconButton size="small" disableRipple color="inherit" onClick={() => setDotMenuOpen(true)}>
+                        <Icon sx={iconsStyle} fontSize="small">search</Icon>
                      </IconButton>
-                     {renderMenu()}
                   </Box>
                </Box>
             )}
          </Toolbar>
+         {
+            pageHeader &&
+            <Box display="flex" justifyContent="space-between">
+               <MDTypography pb="0.5rem" textTransform="capitalize" variant="h3" color={light ? "white" : "dark"} noWrap>
+                  {pageHeader}
+               </MDTypography>
+            </Box>
+         }
       </AppBar>
    );
 }

src/qqq/components/horseshoe/Styles.ts

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

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

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

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

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

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

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

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

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

src/qqq/components/legacy/typography.ts

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

src/qqq/components/misc/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

@@ -22,6 +22,7 @@
 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 {QTableVariant} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableVariant";
 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";
@@ -34,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";
@@ -45,8 +47,10 @@ interface Props
    isOpen: boolean;
    metaData: QInstance;
    tableMetaData: QTableMetaData;
+   tableVariant?: QTableVariant;
    closeHandler: () => void;
    mayClose: boolean;
+   subHeader?: JSX.Element;
 }
 
 GotoRecordDialog.defaultProps = {
@@ -58,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);
    }
@@ -68,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());
@@ -115,102 +131,176 @@ 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 queryResult = await qController.query(props.tableMetaData.name, filter)
-      if(queryResult.length == 0)
-      {
-         setError("Record not found.");
-         setTimeout(() => setError(""), 3000);
-      }
-      else if(queryResult.length == 1)
-      {
-         navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${queryResult[0].values.get(props.tableMetaData.primaryKeyField)}`);
-         close();
-      }
-      else
-      {
-         setError("More than 1 record found...");
-         setTimeout(() => setError(""), 3000);
-      }
-   }
 
-   if(props.tableMetaData)
-   {
-      if (fields.length == 0 && !error)
+      const criteria: QFilterCriteria[] = [];
+      const queryStringParts: string[] = [];
+      options[optionIndex].forEach((field) =>
       {
-         setError("This table is not configured for this feature.")
+         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);
+         if (queryResult.length == 0)
+         {
+            setError("Record not found.");
+            setTimeout(() => setError(""), 3000);
+         }
+         else if (queryResult.length == 1)
+         {
+            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 was found...");
+            setTimeout(() => setError(""), 3000);
+         }
+      }
+      catch (e)
+      {
+         // @ts-ignore
+         setError(`Error: ${(e && e.message) ? e.message : e}`);
+         setTimeout(() => setError(""), 6000);
+      }
+   };
+
+   if (props.tableMetaData)
+   {
+      if (options.length == 0 && !error)
+      {
+         setError("This table is not configured for this feature.");
       }
    }
 
    return (
       <Dialog open={props.isOpen} onClose={() => closeRequested} onKeyPress={(e) => keyPressed(e)} fullWidth maxWidth={"sm"}>
          <DialogTitle>Go To...</DialogTitle>
+
          <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 &&
@@ -230,16 +320,18 @@ function GotoRecordDialog(props: Props): JSX.Element
                : <Box>&nbsp;</Box>
          }
       </Dialog>
-   )
+   );
 }
 
 interface GotoRecordButtonProps
 {
    metaData: QInstance;
    tableMetaData: QTableMetaData;
+   tableVariant?: QTableVariant;
    autoOpen?: boolean;
    buttonVisible?: boolean;
    mayClose?: boolean;
+   subHeader?: JSX.Element;
 }
 
 GotoRecordButton.defaultProps = {
@@ -250,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()
    {
@@ -266,9 +358,9 @@ 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} isOpen={gotoIsOpen} closeHandler={closeGoto} mayClose={props.mayClose} />
+         <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/misc/TabPanel.tsx

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

src/qqq/components/processes/ProcessSummaryResults.tsx

@@ -84,7 +84,7 @@ function ProcessSummaryResults({
    );
 
    return (
-      <Box m={3} mt={6}>
+      <Box m={{xs: 0, md: 3}} mt={"3rem!important"}>
          <Grid container>
             <Grid item xs={0} lg={2} />
             <Grid item xs={12} lg={8}>

src/qqq/components/processes/ValidationReview.tsx

@@ -155,7 +155,7 @@ function ValidationReview({
                            "false",
                            "Skip Validation.  Submit the records for immediate processing", (
                               <div>
-                                 If you choose this option, the records input records will immediately be processed.
+                                 If you choose this option, the input records will immediately be processed.
                                  You will be told how many records were successfully processed, and which ones had issues after the processing is completed.
                                  <br />
                                  <br />
@@ -273,7 +273,7 @@ function ValidationReview({
    );
 
    return (
-      <Box m={3}>
+      <Box m={{xs: 0, md: 3}} mt={"3rem!important"}>
          <Grid container spacing={2}>
             <Grid item xs={12} lg={6}>
                <MDTypography color="body" variant="button">

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)
+      {
+         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.
@@ -50,13 +50,18 @@ export function EvaluatedExpression({field, expression}: EvaluatedExpressionProp
       return () => clearInterval(interval);
    }, []);
 
-   return <>{`${evaluateExpression(timeForEvaluations, field, expression)}`}</>;
+   return <span style={{fontVariantNumeric: "tabular-nums"}}>{`${evaluateExpression(timeForEvaluations, field, expression)}`}</span>;
 }
 
 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,29 @@ 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
+                        fieldPossibleValueProps={{tableName: table.name, fieldName: field.name, initialDisplayValue: selectedPossibleValue?.label}}
+                        overrideId={field.name + "-single-" + criteria.id}
+                        key={field.name + "-single-" + criteria.id}
+                        fieldLabel="Value"
+                        initialValue={selectedPossibleValue?.id}
+                        inForm={false}
+                        onChange={(value: any) => valueChangeHandler(null, 0, value)}
+                        variant="standard"
+                        useCase="filter"
+                     />
+                  </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,17 +398,19 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                initialValues = criteria.values;
             }
          }
-         return <Box mb={-1.5}>
+         return <Box>
             <DynamicSelect
-               tableName={table.name}
-               fieldName={field.name}
+               fieldPossibleValueProps={{tableName: table.name, fieldName: field.name, initialDisplayValue: null}}
                overrideId={field.name + "-multi-" + criteria.id}
                key={field.name + "-multi-" + criteria.id}
                isMultiple
                fieldLabel="Values"
                initialValues={initialValues}
+               initiallyOpen={false /*initiallyOpenMultiValuePvs*/}
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, "all", value)}
+               variant="standard"
+               useCase="filter"
             />
          </Box>;
    }
@@ -249,4 +418,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/scripts/ScriptEditor.tsx

@@ -440,10 +440,10 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
             <Box sx={{height: openTool ? "45%" : "100%"}}>
                <Grid container alignItems="flex-end">
                   <Box maxWidth={"50%"} minWidth={300}>
-                     <DynamicSelect fieldName={"apiName"} initialValue={apiName} initialDisplayValue={apiNameLabel} fieldLabel={"API Name *"} tableName={"scriptRevision"} inForm={false} onChange={changeApiName} />
+                     <DynamicSelect fieldPossibleValueProps={{tableName: "scriptRevision", fieldName: "apiName", initialDisplayValue: apiNameLabel}} initialValue={apiName} fieldLabel={"API Name *"} inForm={false} onChange={changeApiName} useCase="form" />
                   </Box>
                   <Box maxWidth={"50%"} minWidth={300} pl={2}>
-                     <DynamicSelect fieldName={"apiVersion"} initialValue={apiVersion} initialDisplayValue={apiVersionLabel} fieldLabel={"API Version *"} tableName={"scriptRevision"} inForm={false} onChange={changeApiVersion} />
+                     <DynamicSelect fieldPossibleValueProps={{tableName: "scriptRevision", fieldName: "apiVersion", initialDisplayValue: apiVersionLabel}} initialValue={apiVersion} fieldLabel={"API Version *"} inForm={false} onChange={changeApiVersion} useCase="form" />
                   </Box>
                </Grid>
                <Box display="flex" sx={{height: "100%"}}>

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
+                           fieldPossibleValueProps={{possibleValueSourceName: shareableTableMetaData.audiencePossibleValueSourceName, initialDisplayValue: selectedAudienceOption?.label}}
+                           fieldLabel="User or Group" // todo should come from shareableTableMetaData
+                           initialValue={selectedAudienceOption?.id}
+                           inForm={false}
+                           onChange={handleAudienceChange}
+                           useCase="form"
+                        />
+                     </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,217 @@
+/*
+ * 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 Card from "@mui/material/Card";
+import Modal from "@mui/material/Modal";
+import parse from "html-react-parser";
+import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
+import WidgetBlock from "qqq/components/widgets/WidgetBlock";
+import ProcessWidgetBlockUtils from "qqq/pages/processes/ProcessWidgetBlockUtils";
+import React, {useEffect, useState} from "react";
+
+
+export interface CompositeData
+{
+   blockId: string;
+   blocks: BlockData[];
+   styleOverrides?: any;
+   layout?: string;
+   overlayHtml?: string;
+   overlayStyleOverrides?: any;
+   modalMode: string;
+   styles?: any;
+}
+
+
+interface CompositeWidgetProps
+{
+   widgetMetaData: QWidgetMetaData;
+   data: CompositeData;
+   actionCallback?: (blockData: BlockData, eventValues?: { [name: string]: any }) => boolean;
+   values?: { [key: string]: any };
+}
+
+
+/*******************************************************************************
+ ** Widget which is a list of Blocks.
+ *******************************************************************************/
+export default function CompositeWidget({widgetMetaData, data, actionCallback, values}: 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")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "row";
+      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 == "FLEX_ROW_CENTER")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "row";
+      boxStyle.justifyContent = "center";
+      boxStyle.gap = "0.25rem";
+      boxStyle.flexWrap = "wrap";
+   }
+   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};
+   }
+
+   if (data.styles?.backgroundColor)
+   {
+      boxStyle.backgroundColor = ProcessWidgetBlockUtils.processColorFromStyleMap(data.styles.backgroundColor);
+   }
+
+   if (data.styles?.padding)
+   {
+      boxStyle.paddingTop = data.styles?.padding.top + "px"
+      boxStyle.paddingBottom = data.styles?.padding.bottom + "px"
+      boxStyle.paddingLeft = data.styles?.padding.left + "px"
+      boxStyle.paddingRight = data.styles?.padding.right + "px"
+   }
+
+   let overlayStyle: any = {};
+
+   if (data?.overlayStyleOverrides)
+   {
+      overlayStyle = {...overlayStyle, ...data.overlayStyleOverrides};
+   }
+
+   const content = (
+      <>
+         {
+            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} actionCallback={actionCallback} values={values} />
+                  </React.Fragment>
+               ))
+            }
+         </Box>
+      </>
+   );
+
+   if (data.modalMode)
+   {
+      const [isModalOpen, setIsModalOpen] = useState(values && (values[data.blockId] == true));
+
+      /***************************************************************************
+       **
+       ***************************************************************************/
+      const controlCallback = (newValue: boolean) =>
+      {
+         setIsModalOpen(newValue);
+      };
+
+      /***************************************************************************
+       **
+       ***************************************************************************/
+      const modalOnClose = (event: object, reason: string) =>
+      {
+         values[data.blockId] = false;
+         setIsModalOpen(false);
+         actionCallback({blockTypeName: "BUTTON", values: {}}, {controlCode: `hideModal:${data.blockId}`});
+      };
+
+      //////////////////////////////////////////////////////////////////////////////////////////
+      // register the control-callback function - so when buttons are clicked, we can be told //
+      //////////////////////////////////////////////////////////////////////////////////////////
+      useEffect(() =>
+      {
+         if (actionCallback)
+         {
+            actionCallback(null, {
+               registerControlCallbackName: data.blockId,
+               registerControlCallbackFunction: controlCallback
+            });
+         }
+      }, []);
+
+      return (<Modal open={isModalOpen} onClose={modalOnClose}>
+         <Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%"}}>
+            <Card sx={{my: 5, mx: "auto", p: "1rem", maxWidth: "1024px"}}>
+               {content}
+            </Card>
+         </Box>
+      </Modal>);
+   }
+   else
+   {
+      return content;
+   }
+
+}

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -18,35 +18,46 @@
  * 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 {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 Modal from "@mui/material/Modal";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
 import parse from "html-react-parser";
-import React, {useContext, useEffect, useReducer, useState} from "react";
-import {useLocation} from "react-router-dom";
 import QContext from "QContext";
+import EntityForm from "qqq/components/forms/EntityForm";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import TabPanel from "qqq/components/misc/TabPanel";
 import BarChart from "qqq/components/widgets/charts/barchart/BarChart";
 import HorizontalBarChart from "qqq/components/widgets/charts/barchart/HorizontalBarChart";
 import DefaultLineChart from "qqq/components/widgets/charts/linechart/DefaultLineChart";
 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 RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
 import ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
 import StepperCard from "qqq/components/widgets/misc/StepperCard";
 import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
 import ParentWidget from "qqq/components/widgets/ParentWidget";
 import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
 import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard";
-import Widget, {WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT} from "qqq/components/widgets/Widget";
+import Widget, {HeaderIcon, 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";
 
 
@@ -57,10 +68,15 @@ interface Props
    widgetMetaDataList: QWidgetMetaData[];
    tableName?: string;
    entityPrimaryKey?: string;
+   record?: QRecord;
    omitWrappingGridContainer: boolean;
-   areChildren?: boolean
-   childUrlParams?: string
-   parentWidgetMetaData?: QWidgetMetaData
+   areChildren?: boolean;
+   childUrlParams?: string;
+   parentWidgetMetaData?: QWidgetMetaData;
+   wrapWidgetsInTabPanels: boolean;
+   actionCallback?: (data: any, eventValues?: { [name: string]: any }) => boolean;
+   initialWidgetDataList: any[];
+   values?: { [key: string]: any };
 }
 
 DashboardWidgets.defaultProps = {
@@ -70,13 +86,16 @@ DashboardWidgets.defaultProps = {
    omitWrappingGridContainer: false,
    areChildren: false,
    childUrlParams: "",
-   parentWidgetMetaData: null
+   parentWidgetMetaData: null,
+   wrapWidgetsInTabPanels: false,
+   actionCallback: null,
+   initialWidgetDataList: null,
+   values: {}
 };
 
-function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData}: Props): JSX.Element
+function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels, actionCallback, initialWidgetDataList, values}: Props): JSX.Element
 {
-   const location = useLocation();
-   const [widgetData, setWidgetData] = useState([] as any[]);
+   const [widgetData, setWidgetData] = useState(initialWidgetDataList == null ? [] as any[] : initialWidgetDataList);
    const [widgetCounter, setWidgetCounter] = useState(0);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
@@ -84,9 +103,41 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
    const [haveLoadedParams, setHaveLoadedParams] = useState(false);
    const {accentColor} = useContext(QContext);
 
+   /////////////////////////
+   // modal form controls //
+   /////////////////////////
+   const [showEditChildForm, setShowEditChildForm] = useState(null as any);
+   const [modalTable, setModalTable] = useState(null as QTableMetaData);
+
+   let initialSelectedTab = 0;
+   let selectedTabKey: string = null;
+   if (parentWidgetMetaData && wrapWidgetsInTabPanels)
+   {
+      selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`;
+      if (localStorage.getItem(selectedTabKey))
+      {
+         initialSelectedTab = Number(localStorage.getItem(selectedTabKey));
+      }
+   }
+   const [selectedTab, setSelectedTab] = useState(initialSelectedTab);
+
+   const changeTab = (newValue: number) =>
+   {
+      setSelectedTab(newValue);
+      localStorage.setItem(selectedTabKey, String(newValue));
+   };
+
    useEffect(() =>
    {
+      if (initialWidgetDataList && initialWidgetDataList.length > 0)
+      {
+         // todo actually, should this check each element of the array, down in the loop?  yeah, when we need to, do it that way.
+         console.log("We already have initial widget data, so not fetching from backend.");
+         return;
+      }
+
       setWidgetData([]);
+
       for (let i = 0; i < widgetMetaDataList.length; i++)
       {
          const widgetMetaData = widgetMetaDataList[i];
@@ -102,15 +153,15 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                widgetData[i] = await qController.widget(widgetMetaData.name, urlParams);
                setWidgetData(widgetData);
                setWidgetCounter(widgetCounter + 1);
-               if(widgetData[i])
+               if (widgetData[i])
                {
                   widgetData[i]["errorLoading"] = false;
                }
             }
-            catch(e)
+            catch (e)
             {
                console.error(e);
-               if(widgetData[i])
+               if (widgetData[i])
                {
                   widgetData[i]["errorLoading"] = true;
                }
@@ -123,7 +174,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    const reloadWidget = async (index: number, data: string) =>
    {
-      (async() =>
+      await (async () =>
       {
          const urlParams = getQueryParams(widgetMetaDataList[index], data);
          setCurrentUrlParams(urlParams);
@@ -140,7 +191,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                widgetData[index]["errorLoading"] = false;
             }
          }
-         catch(e)
+         catch (e)
          {
             console.error(e);
             if (widgetData[index])
@@ -151,7 +202,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
          forceUpdate();
       })();
-   }
+   };
 
    function getQueryParams(widgetMetaData: QWidgetMetaData, extraParams: string): string
    {
@@ -168,7 +219,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)
@@ -178,36 +229,36 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
          }
       }
 
-      if(entityPrimaryKey)
+      if (entityPrimaryKey)
       {
          paramMap.set("id", entityPrimaryKey);
       }
 
-      if(tableName)
+      if (tableName)
       {
          paramMap.set("tableName", tableName);
       }
 
-      if(extraParams)
+      if (extraParams)
       {
          let pairs = extraParams.split("&");
          for (let i = 0; i < pairs.length; i++)
          {
             let nameValue = pairs[i].split("=");
-            if(nameValue.length == 2)
+            if (nameValue.length == 2)
             {
                paramMap.set(nameValue[0], nameValue[1]);
             }
          }
       }
 
-      if(childUrlParams)
+      if (childUrlParams)
       {
          let pairs = childUrlParams.split("&");
          for (let i = 0; i < pairs.length; i++)
          {
             let nameValue = pairs[i].split("=");
-            if(nameValue.length == 2)
+            if (nameValue.length == 2)
             {
                paramMap.set(nameValue[0], nameValue[1]);
             }
@@ -225,10 +276,189 @@ 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 closeEditChildForm = (event: object, reason: string) =>
+   {
+      if (reason === "backdropClick" || reason === "escapeKeyDown")
+      {
+         return;
+      }
+
+      setShowEditChildForm(null);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function deleteChildRecord(name: string, widgetIndex: number, rowIndex: number)
+   {
+      updateChildRecordList(name, "delete", rowIndex);
+      actionCallback(widgetData[widgetIndex]);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openEditChildRecord(name: string, widgetData: any, rowIndex: number)
+   {
+      let defaultValues = widgetData.queryOutput.records[rowIndex].values;
+
+      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
+      if (!disabledFields)
+      {
+         disabledFields = widgetData.defaultValuesForNewChildRecords;
+      }
+
+      doOpenEditChildForm(name, widgetData.childTableMetaData, rowIndex, defaultValues, disabledFields);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openAddChildRecord(name: string, widgetData: any)
+   {
+      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
+      if (!disabledFields)
+      {
+         disabledFields = widgetData.defaultValuesForNewChildRecords;
+      }
+
+      doOpenEditChildForm(name, widgetData.childTableMetaData, null, null, disabledFields);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function doOpenEditChildForm(widgetName: string, table: QTableMetaData, rowIndex: number, defaultValues: any, disabledFields: any)
+   {
+      const showEditChildForm: any = {};
+      showEditChildForm.widgetName = widgetName;
+      showEditChildForm.table = table;
+      showEditChildForm.rowIndex = rowIndex;
+      showEditChildForm.defaultValues = defaultValues;
+      showEditChildForm.disabledFields = disabledFields;
+      setShowEditChildForm(showEditChildForm);
+   }
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function submitEditChildForm(values: any)
+   {
+      updateChildRecordList(showEditChildForm.widgetName, showEditChildForm.rowIndex == null ? "insert" : "edit", showEditChildForm.rowIndex, values);
+      let widgetIndex = determineChildRecordListIndex(showEditChildForm.widgetName);
+      actionCallback(widgetData[widgetIndex]);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function determineChildRecordListIndex(widgetName: string): number
+   {
+      let widgetIndex = -1;
+      for (var i = 0; i < widgetMetaDataList.length; i++)
+      {
+         const widgetMetaData = widgetMetaDataList[i];
+         if (widgetMetaData.name == widgetName)
+         {
+            widgetIndex = i;
+            break;
+         }
+      }
+      return (widgetIndex);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function updateChildRecordList(widgetName: string, action: "insert" | "edit" | "delete", rowIndex?: number, values?: any)
+   {
+      ////////////////////////////////////////////////
+      // find the correct child record widget index //
+      ////////////////////////////////////////////////
+      let widgetIndex = determineChildRecordListIndex(widgetName);
+
+      if (!widgetData[widgetIndex].queryOutput.records)
+      {
+         widgetData[widgetIndex].queryOutput.records = [];
+      }
+
+      const newChildListWidgetData: ChildRecordListData = widgetData[widgetIndex];
+      if (!newChildListWidgetData.queryOutput.records)
+      {
+         newChildListWidgetData.queryOutput.records = [];
+      }
+
+      switch (action)
+      {
+         case "insert":
+            newChildListWidgetData.queryOutput.records.push({values: values});
+            break;
+         case "edit":
+            newChildListWidgetData.queryOutput.records[rowIndex] = {values: values};
+            break;
+         case "delete":
+            newChildListWidgetData.queryOutput.records.splice(rowIndex, 1);
+            break;
+      }
+      newChildListWidgetData.totalRows = newChildListWidgetData.queryOutput.records.length;
+      widgetData[widgetIndex] = newChildListWidgetData;
+      setWidgetData(widgetData);
+
+      setShowEditChildForm(null);
+   }
+
+
    const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
    {
+      const labelAdditionalComponentsRight: LabelComponent[] = [];
+      if (widgetMetaData && widgetMetaData.icons)
+      {
+         const topRightInsideCardIcon = widgetMetaData.icons.get("topRightInsideCard");
+         if (topRightInsideCardIcon)
+         {
+            labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color, "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
@@ -238,11 +468,35 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetIndex={i}
                      widgetMetaData={widgetMetaData}
                      data={widgetData[i]}
-                     reloadWidgetCallback={reloadWidget}
+                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      storeDropdownSelections={widgetMetaData.storeDropdownSelections}
                   />
                )
             }
+            {
+               widgetMetaData.type === "alert" && widgetData[i]?.html && !widgetData[i]?.hideWidget && (
+                  <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)}
+                        {widgetData[i]?.bulletList && (
+                           <div style={{fontSize: "14px"}}>
+                              {widgetData[i].bulletList.map((bullet: string, index: number) =>
+                                 <li key={`widget-${i}-${index}`}>{parse(bullet)}</li>
+                              )}
+                           </div>
+                        )}
+                     </Alert>
+                  </Widget>
+               )
+            }
             {
                widgetMetaData.type === "usaMap" && (
                   <USMapWidget
@@ -263,6 +517,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
@@ -270,8 +538,10 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
-                     <StackedBarChart data={widgetData[i]?.chartData}/>
+                     <StackedBarChart data={widgetData[i]?.chartData} chartSubheaderData={widgetData[i]?.chartSubheaderData} />
                   </Widget>
                )
             }
@@ -282,6 +552,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} />
@@ -295,6 +567,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%"}}>
@@ -310,8 +584,10 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetMetaData={widgetMetaData}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      widgetData={widgetData[i]}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
-                     <Box px={3} pt={0} pb={2}>
+                     <Box>
                         <MDTypography component="div" variant="button" color="text" fontWeight="light">
                            {
                               widgetData && widgetData[i] && widgetData[i].html ? (
@@ -341,8 +617,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}
                      />
@@ -381,10 +660,13 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <div>
                         <PieChart
                            chartData={widgetData[i]?.chartData}
+                           chartSubheaderData={widgetData[i]?.chartSubheaderData}
                            description={widgetData[i]?.description}
                         />
                      </div>
@@ -393,9 +675,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
             }
             {
                widgetMetaData.type === "divider" && (
-                  <Box>
-                     <DividerWidget />
-                  </Box>
+                  <DividerWidget />
                )
             }
             {
@@ -415,6 +695,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}
@@ -427,6 +709,12 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                widgetMetaData.type === "childRecordList" && (
                   widgetData && widgetData[i] &&
                   <RecordGridWidget
+                     disableRowClick={widgetData[i]?.disableRowClick}
+                     allowRecordEdit={widgetData[i]?.allowRecordEdit}
+                     allowRecordDelete={widgetData[i]?.allowRecordDelete}
+                     deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, i, rowIndex)}
+                     editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData[i], rowIndex)}
+                     addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData[i])}
                      widgetMetaData={widgetMetaData}
                      data={widgetData[i]}
                   />
@@ -436,11 +724,39 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
             {
                widgetMetaData.type === "fieldValueList" && (
                   widgetData && widgetData[i] &&
-                     <FieldValueListWidget
-                        widgetMetaData={widgetMetaData}
-                        data={widgetData[i]}
-                        reloadWidgetCallback={(data) => reloadWidget(i, data)}
-                     />
+                  <FieldValueListWidget
+                     widgetMetaData={widgetMetaData}
+                     data={widgetData[i]}
+                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                  />
+               )
+            }
+            {
+               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]} actionCallback={actionCallback} values={values} />
+                  </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>
                )
             }
             {
@@ -459,34 +775,136 @@ 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)
+   {
+      omitWrappingGridContainer = true;
    }
 
    const body: JSX.Element =
       (
          <>
             {
-               widgetMetaDataList.map((widgetMetaData, i) => (
-                  omitWrappingGridContainer
-                     ? widgetMetaData && renderWidget(widgetMetaData, i)
-                     :
-                     widgetMetaData && <Grid id={widgetMetaData.name} key={`${widgetMetaData.name}-${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
-                        {renderWidget(widgetMetaData, i)}
-                     </Grid>
-               ))
+               widgetMetaDataList.map((widgetMetaData, i) =>
+               {
+                  let renderedWidget = widgetMetaData ? renderWidget(widgetMetaData, i) : (<></>);
+
+                  if (!omitWrappingGridContainer)
+                  {
+                     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>);
+                  }
+
+                  if (wrapWidgetsInTabPanels)
+                  {
+                     renderedWidget = (<TabPanel index={i} value={selectedTab} style={{
+                        padding: 0,
+                        margin: "-1rem",
+                        width: "calc(100% + 2rem)"
+                     }}>
+                        {renderedWidget}
+                     </TabPanel>);
+                  }
+
+                  return (<React.Fragment key={`${widgetMetaData.name}-${i}`}>{renderedWidget}</React.Fragment>);
+               })
             }
          </>
       );
 
+   const tabs = widgetMetaDataList && wrapWidgetsInTabPanels ?
+      <Tabs
+         sx={{
+            m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
+            "& .MuiTabs-scroller": {
+               ml: 0
+            }
+         }}
+         value={selectedTab}
+         onChange={(event, newValue) => changeTab(newValue)}
+         variant="standard"
+      >
+         {widgetMetaDataList.map((widgetMetaData, i) => (
+            <Tab key={widgetMetaData.name} label={widgetMetaData.label} />
+         ))}
+      </Tabs>
+      : <></>;
+
    return (
       widgetCount > 0 ? (
-         omitWrappingGridContainer ? body :
-            (
-               <Grid container spacing={3} pb={4}>
-                  {body}
-               </Grid>
-            )
+         <>
+            {tabs}
+            {
+               omitWrappingGridContainer ? body : (
+                  <Grid container spacing={2.5}>
+                     {body}
+                  </Grid>
+               )
+            }
+            {
+               showEditChildForm &&
+               <Modal open={showEditChildForm as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
+                  <div className="modalEditForm">
+                     <EntityForm
+                        isModal={true}
+                        closeModalHandler={closeEditChildForm}
+                        table={showEditChildForm.table}
+                        defaultValues={showEditChildForm.defaultValues}
+                        disabledFields={showEditChildForm.disabledFields}
+                        onSubmitCallback={submitEditChildForm}
+                        overrideHeading={`${showEditChildForm.rowIndex != null ? "Editing" : "Creating New"} ${showEditChildForm.table.label}`}
+                     />
+                  </div>
+               </Modal>
+            }
+         </>
       ) : null
    );
 }

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

src/qqq/components/widgets/Widget.tsx

@@ -21,18 +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 LinearProgress from "@mui/material/LinearProgress";
+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 {Link, NavigateFunction, useNavigate} from "react-router-dom";
-import colors from "qqq/components/legacy/colors";
-import DropdownMenu, {DropdownOption} from "qqq/components/widgets/components/DropdownMenu";
+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
 {
@@ -43,9 +47,11 @@ export interface WidgetData
       id: string,
       label: string
    }[][];
+   dropdownDefaultValueList?: string[];
    dropdownNeedsSelectedText?: string;
    hasPermission?: boolean;
    errorLoading?: boolean;
+
    [other: string]: any;
 }
 
@@ -53,7 +59,10 @@ export interface WidgetData
 interface Props
 {
    labelAdditionalComponentsLeft: LabelComponent[];
+   labelAdditionalElementsLeft: JSX.Element[];
    labelAdditionalComponentsRight: LabelComponent[];
+   labelAdditionalElementsRight: JSX.Element[];
+   labelBoxAdditionalSx?: any;
    widgetMetaData?: QWidgetMetaData;
    widgetData?: WidgetData;
    children: JSX.Element;
@@ -62,6 +71,7 @@ interface Props
    isChild?: boolean;
    footerHTML?: string;
    storeDropdownSelections?: boolean;
+   omitPadding: boolean;
 }
 
 Widget.defaultProps = {
@@ -70,7 +80,11 @@ Widget.defaultProps = {
    widgetMetaData: {},
    widgetData: {},
    labelAdditionalComponentsLeft: [],
+   labelAdditionalElementsLeft: [],
    labelAdditionalComponentsRight: [],
+   labelAdditionalElementsRight: [],
+   labelBoxAdditionalSx: {},
+   omitPadding: false,
 };
 
 
@@ -88,34 +102,134 @@ export class LabelComponent
 {
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      return (<div>Unsupported component type</div>)
-   }
+      return (<div>Unsupported component type</div>);
+   };
 }
 
 
 /*******************************************************************************
  **
  *******************************************************************************/
-export class HeaderLink extends LabelComponent
+export class HeaderIcon extends LabelComponent
 {
-   label: string;
-   to: string
+   iconName: string;
+   iconPath: string;
+   color: string;
+   coloredBG: boolean;
+   role: string;
 
-   constructor(label: string, to: string)
+   iconColor: string;
+   bgColor: string;
+
+   constructor(iconName: string, iconPath: string, color: string, role?: string, coloredBG: boolean = true)
    {
       super();
-      this.label = label;
-      this.to = to;
+      this.iconName = iconName;
+      this.iconPath = iconPath;
+      this.color = color;
+      this.role = role;
+      this.coloredBG = coloredBG;
+
+      this.iconColor = this.coloredBG ? "#FFFFFF" : this.color;
+      this.bgColor = this.coloredBG ? this.color : "none";
    }
 
+
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      return (
-         <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative" top="-0.25rem">
-            {this.to ? <Link to={this.to}>{this.label}</Link> : null}
-         </Typography>
-      );
-   }
+      const styles: any = {
+         width: "1.75rem",
+         height: "1.75rem",
+         color: this.iconColor,
+         backgroundColor: this.bgColor,
+         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>);
+      }
+      else
+      {
+         return (<Icon sx={{padding: "0.25rem", ...styles}} fontSize="small">{this.iconName}</Icon>);
+      }
+   };
+}
+
+
+/*******************************************************************************
+ ** 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>
+   );
 }
 
 
@@ -128,58 +242,32 @@ 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) =>
    {
-      navigate(`#/createChild=${table.name}/defaultValues=${JSON.stringify(defaultValues)}/disabledFields=${JSON.stringify(disabledFields)}`)
-   }
+      navigate(`#/createChild=${table.name}/defaultValues=${JSON.stringify(defaultValues)}/disabledFields=${JSON.stringify(disabledFields)}`);
+   };
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
       return (
-         <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="0.25rem">
-            <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>
       );
-   }
-}
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-export class ExportDataButton extends LabelComponent
-{
-   callbackToExport: any;
-   tooltipTitle: string;
-   isDisabled: boolean;
-
-   constructor(callbackToExport: any, isDisabled = false, tooltipTitle: string = "Export")
-   {
-      super();
-      this.callbackToExport = callbackToExport;
-      this.isDisabled = isDisabled;
-      this.tooltipTitle = tooltipTitle;
-   }
-
-   render = (args: LabelComponentRenderArgs): JSX.Element =>
-   {
-      return (
-         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem">
-            <Tooltip title={this.tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callbackToExport()} disabled={this.isDisabled}><Icon>save_alt</Icon></Button></Tooltip>
-         </Typography>
-      );
-   }
+   };
 }
 
 
@@ -189,45 +277,124 @@ export class ExportDataButton extends LabelComponent
 export class Dropdown extends LabelComponent
 {
    label: string;
+   dropdownMetaData: any;
    options: DropdownOption[];
+   dropdownDefaultValue?: string;
    dropdownName: string;
    onChangeCallback: any;
 
-   constructor(label: string, options: DropdownOption[], dropdownName: string, onChangeCallback: any)
+   constructor(label: string, dropdownMetaData: any, options: DropdownOption[], dropdownDefaultValue: string, dropdownName: string, onChangeCallback: any)
    {
       super();
       this.label = label;
+      this.dropdownMetaData = dropdownMetaData;
       this.options = options;
+      this.dropdownDefaultValue = dropdownDefaultValue;
       this.dropdownName = dropdownName;
       this.onChangeCallback = onChangeCallback;
    }
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
+      const label = `Select ${this.label}`;
       let defaultValue = null;
       const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${args.widgetProps.widgetMetaData.name}.${this.dropdownName}`;
       if (args.widgetProps.storeDropdownSelections)
       {
-         ///////////////////////////////////////////////////////////////////////////////////////
-         // see if an existing value is stored in local storage, and if so set it in dropdown //
-         ///////////////////////////////////////////////////////////////////////////////////////
-         defaultValue = JSON.parse(localStorage.getItem(localStorageKey));
-         args.dropdownData[args.componentIndex] = defaultValue?.id;
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         // see if an existing value is stored in local storage, and if so set it in dropdown      //
+         // originally we used the full object from localStorage - but - in case the label         //
+         // changed since it was stored, we'll instead just find the option by id (or in case that //
+         // option isn't available anymore, then we'll select nothing instead of a missing value   //
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         try
+         {
+            const localStorageOption = JSON.parse(localStorage.getItem(localStorageKey));
+            if (localStorageOption)
+            {
+               const id = localStorageOption.id;
+
+               if (this.dropdownMetaData.type == "DATE_PICKER")
+               {
+                  defaultValue = id;
+               }
+               else
+               {
+                  for (let i = 0; i < this.options.length; i++)
+                  {
+                     if (this.options[i].id == id)
+                     {
+                        defaultValue = this.options[i];
+                        args.dropdownData[args.componentIndex] = defaultValue?.id;
+                     }
+                  }
+               }
+            }
+         }
+         catch (e)
+         {
+            console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e);
+         }
+      }
+
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      // if there wasn't a value selected, but there is a default from the backend, then use it. //
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      if (defaultValue == null && this.dropdownDefaultValue != null)
+      {
+         for (let i = 0; i < this.options.length; i++)
+         {
+            if (this.options[i].id == this.dropdownDefaultValue)
+            {
+               defaultValue = this.options[i];
+               args.dropdownData[args.componentIndex] = defaultValue?.id;
+
+               if (args.widgetProps.storeDropdownSelections)
+               {
+                  localStorage.setItem(localStorageKey, JSON.stringify(defaultValue));
+               }
+
+               this.onChangeCallback(label, defaultValue);
+               break;
+            }
+         }
+      }
+
+      /////////////////////////////////////////////////////////////////////////////
+      // if there's a 'label for null value' (and no default from the backend),  //
+      // then add that as an option (and select it if nothing else was selected) //
+      /////////////////////////////////////////////////////////////////////////////
+      let options = this.options;
+      if (this.dropdownMetaData.labelForNullValue && !this.dropdownDefaultValue)
+      {
+         const nullOption = {id: null as string, label: this.dropdownMetaData.labelForNullValue};
+         options = [nullOption, ...this.options];
+
+         if (!defaultValue)
+         {
+            defaultValue = nullOption;
+         }
       }
 
       return (
-         <Box my={2} sx={{float: "right"}}>
-            <DropdownMenu
+         <Box mb={2} sx={{float: "right"}}>
+            <WidgetDropdownMenu
                name={this.dropdownName}
+               type={this.dropdownMetaData.type}
                defaultValue={defaultValue}
-               sx={{width: 200, marginLeft: "15px"}}
-               label={`Select ${this.label}`}
-               dropdownOptions={this.options}
+               sx={{marginLeft: "1rem"}}
+               label={label}
+               startIcon={this.dropdownMetaData.startIconName}
+               allowBackAndForth={this.dropdownMetaData.allowBackAndForth}
+               backAndForthInverted={this.dropdownMetaData.backAndForthInverted}
+               disableClearable={this.dropdownMetaData.disableClearable}
+               dropdownOptions={options}
                onChangeCallback={this.onChangeCallback}
+               width={this.dropdownMetaData.width ?? 225}
             />
          </Box>
       );
-   }
+   };
 }
 
 
@@ -246,12 +413,14 @@ export class ReloadControl extends LabelComponent
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      return (
-         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem">
-            <Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon>refresh</Icon></Button></Tooltip>
-         </Typography>
-      );
-   }
+      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>);
+   };
 }
 
 
@@ -265,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(() =>
@@ -300,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));
@@ -333,7 +518,15 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          props.widgetData.dropdownDataList?.map((dropdownData: any, index: number) =>
          {
             // console.log(`${props.widgetMetaData.name} building a Dropdown, data is: ${dropdownData}`);
-            updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], dropdownData, props.widgetData.dropdownNameList[index], handleDataChange));
+            let defaultValue = null;
+            if (props.widgetData.dropdownDefaultValueList && props.widgetData.dropdownDefaultValueList.length >= index)
+            {
+               defaultValue = props.widgetData.dropdownDefaultValueList[index];
+            }
+            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);
       }
@@ -372,7 +565,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
 
          if (index < 0)
          {
-            throw(`Could not find table name for label ${tableName}`);
+            throw (`Could not find table name for label ${tableName}`);
          }
 
          dropdownData[index] = (changedData) ? changedData.id : null;
@@ -394,7 +587,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
             }
          }
 
-         reloadWidget(dropdownData)
+         reloadWidget(dropdownData);
       }
    }
 
@@ -422,26 +615,45 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       {
          console.log(`No reload widget callback in ${props.widgetMetaData.label}`);
       }
-   }
+   };
 
-   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 =>
    {
       return (v !== null && v !== undefined);
-   }
+   };
 
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // to avoid taking up the space of the Box with the label and icon and label-components (since it has a height), only output that box if we need any of the components //
@@ -450,26 +662,79 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
    if (hasPermission)
    {
       needLabelBox ||= (labelComponentsLeft && labelComponentsLeft.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 //
+   //////////////////////////////////////////////////////////////////////////////////////////
+   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", fontWeight: 600}} variant={isParentWidget && (props.widgetData.isLabelPageTitle || usingLabelAsTitle) ? "h3" : "h6"} display="inline">
+         {labelToUse}
+      </Typography>
+   );
+
+   let sublabelElement = (
+      <Box key="sublabel" height="20px">
+         <Typography sx={{position: "relative", top: "-18px"}} variant="caption">
+            {props.widgetData?.sublabel}
+         </Typography>
+      </Box>
+   );
+
+   if (labelToUse && labelToUse != lastSeenLabel)
+   {
+      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 pr={2} display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}} height={"3.5rem"}>
-               <Box pt={2} pb={1}>
-                  {
-                     hasPermission ?
-                        props.widgetMetaData?.icon && (
-                           <Box
-                              ml={3}
-                              mt={-4}
-                              sx={{
+            <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",
@@ -480,17 +745,14 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                                  color: "#ffffff",
                                  float: "left"
                               }}
-                           >
-                              <Icon fontSize="medium" color="inherit">
-                                 {props.widgetMetaData.icon}
-                              </Icon>
-                           </Box>
-                        ) :
-                        (
-                           <Box
-                              ml={3}
-                              mt={-4}
-                              sx={{
+                              >
+                                 <Icon fontSize="medium" color="inherit">
+                                    {props.widgetMetaData.icon}
+                                 </Icon>
+                              </Box>
+                           ) :
+                           (
+                              <Box ml={3} mt={-4} sx={{
                                  display: "flex",
                                  justifyContent: "center",
                                  alignItems: "center",
@@ -501,35 +763,29 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                                  color: "#ffffff",
                                  float: "left"
                               }}
-                           >
-                              <Icon fontSize="medium" color="inherit">lock</Icon>
-                           </Box>
+                              >
+                                 <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>);
+                           })
                         )
-                  }
-                  {
-                     //////////////////////////////////////////////////////////////////////////////////////////
-                     // first look for a label in the widget data, which would override that in the metadata //
-                     //////////////////////////////////////////////////////////////////////////////////////////
-                     hasPermission && props.widgetData?.label ? (
-                        <Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={2} display="inline-block">
-                           {props.widgetData.label}
-                        </Typography>
-                     ) : (
-                        hasPermission && props.widgetMetaData?.label && (
-                           <Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={3} display="inline-block">
-                              {props.widgetMetaData.label}
-                           </Typography>
-                        )
-                     )
-                  }
-                  {
-                     hasPermission && (
-                        labelComponentsLeft.map((component, i) =>
-                        {
-                           return (<span key={i}>{renderComponent(component, i)}</span>);
-                        })
-                     )
-                  }
+                     }
+                     {localLabelAdditionalElementsLeft}
+                  </Box>
+                  <Box key="sublabelContainer" display="flex">
+                     {
+                        hasPermission && props.widgetData?.sublabel && (sublabelElement)
+                     }
+                  </Box>
                </Box>
                <Box>
                   {
@@ -540,11 +796,17 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                         })
                      )
                   }
+                  {localLabelAdditionalElementsRight}
                </Box>
             </Box>
          }
          {
-            props.widgetMetaData?.isCard && (reloading ? <LinearProgress color="info" sx={{overflow: "hidden", borderRadius: "0"}} /> : <Box height="0.375rem" />)
+            ///////////////////////////////////////////////////////////////////
+            // turning this off... for now.  maybe make a property in future //
+            ///////////////////////////////////////////////////////////////////
+            /*
+            props.widgetMetaData?.isCard && (reloading ? <LinearProgress color="info" sx={{overflow: "hidden", borderRadius: "0", mx:-2}} /> : <Box height="0.375rem" />)
+            */
          }
          {
             errorLoading ? (
@@ -554,7 +816,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                </Box>
             ) : (
                hasPermission && props.widgetData?.dropdownNeedsSelectedText ? (
-                  <Box pb={3} pr={3} sx={{width: "100%", textAlign: "right"}}>
+                  <Box pb={3} sx={{width: "100%", textAlign: "right"}}>
                      <Typography variant="body2">
                         {props.widgetData?.dropdownNeedsSelectedText}
                      </Typography>
@@ -570,16 +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%"}} className={fullScreenWidgetClassName}>
+      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className="widget inCard">
          {widgetContent}
       </Card>
-      : widgetContent;
+      : <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,104 @@
+/*
+ * 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 ButtonBlock from "qqq/components/widgets/blocks/ButtonBlock";
+import AudioBlock from "qqq/components/widgets/blocks/AudioBlock";
+import InputFieldBlock from "qqq/components/widgets/blocks/InputFieldBlock";
+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";
+import ImageBlock from "./blocks/ImageBlock";
+
+
+interface WidgetBlockProps
+{
+   widgetMetaData: QWidgetMetaData;
+   block: BlockData;
+   actionCallback?: (blockData: BlockData, eventValues?: {[name: string]: any}) => boolean;
+   values?: { [key: string]: any };
+}
+
+
+/*******************************************************************************
+ ** Component to render a single Block in the widget framework!
+ *******************************************************************************/
+export default function WidgetBlock({widgetMetaData, block, actionCallback, values}: 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} actionCallback={actionCallback} values={values} />);
+   }
+
+   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} />);
+      case "INPUT_FIELD":
+         return (<InputFieldBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
+      case "BUTTON":
+         return (<ButtonBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
+      case "AUDIO":
+         return (<AudioBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "IMAGE":
+         return (<ImageBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
+      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/AudioBlock.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 Box from "@mui/material/Box";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+import DumpJsonBox from "qqq/utils/DumpJsonBox";
+import React from "react";
+
+/*******************************************************************************
+ ** Block that renders ... an audio tag
+ **
+ ** <audio src=${path} ${autoPlay} ${showControls} />
+ *******************************************************************************/
+export default function AudioBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+         <audio src={data.values?.path} autoPlay={data.values?.autoPlay} controls={data.values?.showControls} />
+      </BlockElementWrapper>
+   );
+}

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,64 @@
+/*
+ * 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;
+
+   conditional?: string;
+}
+
+
+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;
+   actionCallback?: (blockData: BlockData, eventValues?: {[name: string]: any}) => boolean;
+}
+

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

@@ -0,0 +1,86 @@
+/*
+ * 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 Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import {standardWidth} from "qqq/components/buttons/DefaultButtons";
+import MDButton from "qqq/components/legacy/MDButton";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+import React from "react";
+
+
+/*******************************************************************************
+ ** Block that renders ... a button...
+ **
+ *******************************************************************************/
+export default function ButtonBlock({widgetMetaData, data, actionCallback}: StandardBlockComponentProps): JSX.Element
+{
+   const startIcon = data.values.startIcon?.name ? <Icon>{data.values.startIcon.name}</Icon> : null;
+   const endIcon = data.values.endIcon?.name ? <Icon>{data.values.endIcon.name}</Icon> : null;
+
+   function onClick()
+   {
+      if (actionCallback)
+      {
+         actionCallback(data, data.values);
+      }
+      else
+      {
+         console.log("ButtonBlock onClick with no actionCallback present, so, noop");
+      }
+   }
+
+   let buttonVariant: "gradient" | "outlined" | "text" = "gradient";
+   if (data.styles?.format == "outlined")
+   {
+      buttonVariant = "outlined";
+   }
+   else if (data.styles?.format == "text")
+   {
+      buttonVariant = "text";
+   }
+   else if (data.styles?.format == "filled")
+   {
+      buttonVariant = "gradient";
+   }
+
+   // todo - button colors... but to do RGB's, might need to move away from MDButton?
+
+   return (
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+         <Box mx={1} my={1} minWidth={standardWidth}>
+            <MDButton
+               type="button"
+               variant={buttonVariant}
+               color="dark"
+               size="small"
+               fullWidth
+               startIcon={startIcon}
+               endIcon={endIcon}
+               onClick={onClick}
+            >
+               {data.values.label ?? "Button"}
+            </MDButton>
+         </Box>
+      </BlockElementWrapper>
+   );
+}

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

@@ -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/>.
+ */
+
+import Box from "@mui/material/Box";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+import DumpJsonBox from "qqq/utils/DumpJsonBox";
+import React from "react";
+
+/*******************************************************************************
+ ** Block that renders ... an image tag
+ **
+ ** <audio src=${path} ${autoPlay} ${showControls} />
+ *******************************************************************************/
+export default function AudioBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   let imageStyle: any = {};
+
+   if(data.styles?.width)
+   {
+      imageStyle.width = data.styles?.width;
+   }
+
+   if(data.styles?.height)
+   {
+      imageStyle.height = data.styles?.height;
+   }
+
+   if(data.styles?.bordered)
+   {
+      imageStyle.border = "1px solid #C0C0C0";
+      imageStyle.borderRadius = "0.5rem";
+   }
+
+
+   return (
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+         <img src={data.values?.path} alt={data.values?.alt} style={imageStyle} />
+      </BlockElementWrapper>
+   );
+}

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

@@ -0,0 +1,139 @@
+/*
+ * 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 Box from "@mui/material/Box";
+import QDynamicFormField from "qqq/components/forms/DynamicFormField";
+import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+import React, {SyntheticEvent, useState} from "react";
+
+/*******************************************************************************
+ ** Block that renders ... a text input
+ **
+ *******************************************************************************/
+export default function InputFieldBlock({widgetMetaData, data, actionCallback}: StandardBlockComponentProps): JSX.Element
+{
+   const [blurCount, setBlurCount] = useState(0)
+
+   const fieldMetaData = new QFieldMetaData(data.values.fieldMetaData);
+   const dynamicField = DynamicFormUtils.getDynamicField(fieldMetaData);
+
+   let autoFocus = data.values.autoFocus as boolean
+   let value = data.values.value;
+   if(value == null || value == undefined)
+   {
+      value = "";
+   }
+
+   ////////////////////////////////////////////////////////////////////////////////
+   // for an autoFocus field...                                                  //
+   // we're finding that if we blur it when clicking an action button, that      //
+   // an un-desirable "now it's been touched, so show an error" happens.         //
+   // so let us remove the default blur handler, for the first (auto) focus/blur //
+   // cycle, and we seem to have a better time.                                  //
+   ////////////////////////////////////////////////////////////////////////////////
+   let dynamicFormFieldRest: {onBlur?: any, sx?: any} = {}
+   if(autoFocus && blurCount == 0)
+   {
+      dynamicFormFieldRest.onBlur = (event: React.SyntheticEvent) =>
+      {
+         event.stopPropagation();
+         event.preventDefault();
+         setBlurCount(blurCount + 1);
+      }
+   }
+
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   function eventHandler(event: KeyboardEvent)
+   {
+      if(data.values.submitOnEnter && event.key == "Enter")
+      {
+         // @ts-ignore target.value...
+         const inputValue = event.target.value?.trim()
+
+         // todo - make this behavior opt-in for inputBlocks?
+         if(inputValue && `${inputValue}`.startsWith("->"))
+         {
+            const actionCode = inputValue.substring(2);
+            if(actionCallback)
+            {
+               actionCallback(data, {actionCode: actionCode, _fieldToClearIfError: fieldMetaData.name});
+
+               ///////////////////////////////////////////////////////
+               // return, so we don't submit the actionCode as text //
+               ///////////////////////////////////////////////////////
+               return;
+            }
+         }
+
+         if(fieldMetaData.isRequired && inputValue == "")
+         {
+            console.log("input field is required, but missing value, so not submitting");
+            return;
+         }
+
+         if(actionCallback)
+         {
+            console.log("InputFieldBlock calling actionCallback for submitOnEnter");
+
+            let values: {[name: string]: any} = {};
+            values[fieldMetaData.name] = inputValue;
+
+            actionCallback(data, values);
+         }
+         else
+         {
+            console.log("InputFieldBlock was set as submitOnEnter, but no actionCallback was present, so, noop");
+         }
+      }
+   }
+
+   const labelElement = <Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
+      <label htmlFor={fieldMetaData.name}>{fieldMetaData.label}</label>
+   </Box>
+
+   return (
+      <Box mt="0.5rem">
+         <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+            <>
+               {labelElement}
+               <QDynamicFormField
+                  name={fieldMetaData.name}
+                  displayFormat={null}
+                  label=""
+                  placeholder={data.values?.placeholder}
+                  backgroundColor="#FFFFFF"
+                  formFieldObject={dynamicField}
+                  type={fieldMetaData.type}
+                  value={value}
+                  autoFocus={autoFocus}
+                  onKeyUp={eventHandler}
+                  {...dynamicFormFieldRest} />
+            </>
+         </BlockElementWrapper>
+      </Box>
+   );
+}

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,164 @@
+/*
+ * 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 Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+import ProcessWidgetBlockUtils from "qqq/pages/processes/ProcessWidgetBlockUtils";
+import React from "react";
+
+/*******************************************************************************
+ ** Block that renders ... just some text.
+ **
+ ** ${text}
+ *******************************************************************************/
+export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   let color = "rgba(0, 0, 0, 0.87)";
+   if (data.styles?.color)
+   {
+      color = ProcessWidgetBlockUtils.processColorFromStyleMap(data.styles.color);
+   }
+
+   let boxStyle = {};
+   if (data.styles?.format == "alert")
+   {
+      boxStyle =
+         {
+            border: `1px solid ${color}`,
+            background: `${color}40`,
+            padding: "0.5rem",
+            borderRadius: "0.5rem",
+         };
+   }
+   else if (data.styles?.format == "banner")
+   {
+      boxStyle =
+         {
+            background: `${color}40`,
+            padding: "0.5rem",
+         };
+   }
+
+   let fontSize = "1rem";
+   if (data.styles?.size)
+   {
+      switch (data.styles.size.toLowerCase())
+      {
+         case "largest":
+            fontSize = "3rem";
+            break;
+         case "headline":
+            fontSize = "2rem";
+            break;
+         case "title":
+            fontSize = "1.5rem";
+            break;
+         case "body":
+            fontSize = "1rem";
+            break;
+         case "smallest":
+            fontSize = "0.75rem";
+            break;
+         default:
+         {
+            if (data.styles.size.match(/^\d+$/))
+            {
+               fontSize = `${data.styles.size}px`;
+            }
+            else
+            {
+               fontSize = "1rem";
+            }
+         }
+      }
+   }
+
+   let fontWeight = "400";
+   if (data.styles?.weight)
+   {
+      switch (data.styles.weight.toLowerCase())
+      {
+         case "thin":
+         case "100":
+            fontWeight = "100";
+            break;
+         case "extralight":
+         case "200":
+            fontWeight = "200";
+            break;
+         case "light":
+         case "300":
+            fontWeight = "300";
+            break;
+         case "normal":
+         case "400":
+            fontWeight = "400";
+            break;
+         case "medium":
+         case "500":
+            fontWeight = "500";
+            break;
+         case "semibold":
+         case "600":
+            fontWeight = "600";
+            break;
+         case "bold":
+         case "700":
+            fontWeight = "700";
+            break;
+         case "extrabold":
+         case "800":
+            fontWeight = "800";
+            break;
+         case "black":
+         case "900":
+            fontWeight = "900";
+            break;
+      }
+   }
+
+   const text = data.values.interpolatedText ?? data.values.text;
+   const lines = text.split("\n");
+
+   const startIcon = data.values.startIcon?.name ? <Icon>{data.values.startIcon.name}</Icon> : null;
+   const endIcon = data.values.endIcon?.name ? <Icon>{data.values.endIcon.name}</Icon> : null;
+
+   return (
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+         <Box display="inline-block" lineHeight="1.2" sx={boxStyle}>
+            <span style={{fontSize: fontSize, color: color, fontWeight: fontWeight}}>
+               {lines.map((line: string, index: number) =>
+                  (
+                     <div key={index}>
+                        <>
+                           {index == 0 && startIcon ? {startIcon} : null}
+                           {line}
+                           {index == lines.length - 1 && endIcon ? {endIcon} : null}
+                        </>
+                     </div>
+                  ))
+               }</span>
+         </Box>
+      </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", marginLeft: "auto"}}>
+
+            <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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,105 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {Skeleton} from "@mui/material";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import {Link} from "react-router-dom";
+import colors from "qqq/assets/theme/base/colors";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+export interface ChartSubheaderData
+{
+   mainNumber: number;
+   vsPreviousPercent: number;
+   vsPreviousNumber: number;
+   isUpVsPrevious: boolean;
+   isGoodVsPrevious: boolean;
+   vsDescription: string;
+   mainNumberUrl: string;
+   previousNumberUrl: string;
+}
+
+interface Props
+{
+   chartSubheaderData: ChartSubheaderData;
+}
+
+const GOOD_COLOR = colors.success.main;
+const BAD_COLOR = colors.error.main;
+const UP_ICON = "arrow_drop_up";
+const DOWN_ICON = "arrow_drop_down";
+
+function StackedBarChart({chartSubheaderData}: Props): JSX.Element
+{
+   let color = "black";
+   if (chartSubheaderData && chartSubheaderData.isGoodVsPrevious != null)
+   {
+      color = chartSubheaderData.isGoodVsPrevious ? GOOD_COLOR : BAD_COLOR;
+   }
+
+   let iconName: string = null;
+   if (chartSubheaderData && chartSubheaderData.isUpVsPrevious != null)
+   {
+      iconName = chartSubheaderData.isUpVsPrevious ? UP_ICON : DOWN_ICON;
+   }
+
+   let mainNumberElement = <Typography variant="h3" display="inline">{ValueUtils.getFormattedNumber(chartSubheaderData.mainNumber)}</Typography>;
+   if(chartSubheaderData.mainNumberUrl)
+   {
+      mainNumberElement = <Link to={chartSubheaderData.mainNumberUrl}>{mainNumberElement}</Link>
+   }
+   mainNumberElement = <Box pr={1}>{mainNumberElement}</Box>
+
+   let previousNumberElement = (
+      <>
+         <Typography display="block" variant="body2" sx={{color: colors.gray.main, fontSize: ".875rem", fontWeight: 500}}>
+            &nbsp;{chartSubheaderData.vsDescription}
+            {chartSubheaderData.vsPreviousNumber && (<>&nbsp;({ValueUtils.getFormattedNumber(chartSubheaderData.vsPreviousNumber)})</>)}
+         </Typography>
+      </>
+   )
+
+   if(chartSubheaderData.previousNumberUrl)
+   {
+      previousNumberElement = <Link to={chartSubheaderData.previousNumberUrl}>{previousNumberElement}</Link>
+   }
+
+   return chartSubheaderData ? (
+      <Box display="inline-flex" alignItems="flex-end" flexWrap="wrap">
+         {mainNumberElement}
+         {
+            chartSubheaderData.vsPreviousPercent != null && iconName != null && (
+               <Box display="inline-flex" alignItems="baseline" pb={0.5} ml={-0.5}>
+                  <Icon fontSize="medium" sx={{color: color, alignSelf: "flex-end"}}>{iconName}</Icon>
+                  <Typography display="inline" variant="body2" sx={{color: color, fontSize: ".875rem", fontWeight: 500}}>{chartSubheaderData.vsPreviousPercent}%</Typography>
+                  {previousNumberElement}
+               </Box>
+            )
+         }
+      </Box>
+   ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "12px"}} />;
+}
+
+export default StackedBarChart;

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

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

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

@@ -0,0 +1,416 @@
+/*
+ * 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 {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 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
+{
+   id: string;
+   label: string;
+}
+
+/////////////////////////
+// inputs and defaults //
+/////////////////////////
+interface Props
+{
+   name: string;
+   type?: string;
+   defaultValue?: any;
+   label?: string;
+   startIcon?: string;
+   width?: number;
+   disableClearable?: boolean;
+   allowBackAndForth?: boolean;
+   backAndForthInverted?: boolean;
+   dropdownOptions?: DropdownOption[];
+   onChangeCallback?: (dropdownLabel: string, data: any) => void;
+   sx?: SxProps<Theme>;
+}
+
+interface StartAndEndDate
+{
+   startDate?: string,
+   endDate?: string
+}
+
+function parseCustomTimeValuesFromDefaultValue(defaultValue: any): StartAndEndDate
+{
+   const customTimeValues: StartAndEndDate = {};
+   if (defaultValue && defaultValue.id)
+   {
+      var parts = defaultValue.id.split(",");
+      if (parts.length >= 2)
+      {
+         customTimeValues["startDate"] = ValueUtils.formatDateTimeValueForForm(parts[1]);
+      }
+      if (parts.length >= 3)
+      {
+         customTimeValues["endDate"] = ValueUtils.formatDateTimeValueForForm(parts[2]);
+      }
+   }
+
+   return (customTimeValues);
+}
+
+function makeBackendValuesFromFrontendValues(frontendDefaultValues: StartAndEndDate): StartAndEndDate
+{
+   const backendTimeValues: StartAndEndDate = {};
+   if (frontendDefaultValues && frontendDefaultValues.startDate)
+   {
+      backendTimeValues.startDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.startDate);
+   }
+   if (frontendDefaultValues && frontendDefaultValues.endDate)
+   {
+      backendTimeValues.endDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.endDate);
+   }
+   return (backendTimeValues);
+}
+
+function WidgetDropdownMenu({name, 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);
+   const [customTimeValuesBackend, setCustomTimeValuesBackend] = useState(makeBackendValuesFromFrontendValues(customTimeValuesFrontend) as StartAndEndDate);
+   const [debounceTimeout, setDebounceTimeout] = useState(null as any);
+
+   const [isOpen, setIsOpen] = useState(false);
+   const [value, setValue] = useState(defaultValue);
+   const [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;
+      for (let i = 0; i < dropdownOptions.length; i++)
+      {
+         if (value && dropdownOptions[i].id == value.id)
+         {
+            currentIndex = i;
+            break;
+         }
+      }
+      return currentIndex;
+   }
+
+
+   const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1, 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)
+      {
+         console.log("No current value.... TODO");
+         return;
+      }
+
+      if (currentIndex == 0 && direction == -1)
+      {
+         console.log("Can't go -1");
+         return;
+      }
+
+      if (currentIndex == dropdownOptions.length - 1 && direction == 1)
+      {
+         console.log("Can't go +1");
+         return;
+      }
+
+      handleOnChange(event, dropdownOptions[currentIndex + direction], "navigatedBackAndForth");
+   };
+
+
+   const handleDatePickerOnChange = (value: PickerValidDate, context: PickerChangeHandlerContext<DateValidationError>) =>
+   {
+      if (value.isValid())
+      {
+         handleOnChange(null, value.toDate(), null);
+      }
+   };
+
+
+   const handleOnChange = (event: any, newValue: any, reason: string) =>
+   {
+      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);
+
+      if (isTimeframeCustom)
+      {
+         callOnChangeCallbackIfCustomTimeframeHasDateValues();
+      }
+      else
+      {
+         onChangeCallback(label, newValue);
+      }
+
+      /* this had bugs (seemed to not take immediate effect?), so don't use for now.
+      let currentIndex = getSelectedIndex(value);
+      if(currentIndex == 0)
+      {
+         backAndForthInverted ? setForthDisabled(true) : setBackDisabled(true);
+      }
+      else
+      {
+         backAndForthInverted ? setForthDisabled(false) : setBackDisabled(false);
+      }
+
+      if (currentIndex == dropdownOptions.length - 1)
+      {
+         backAndForthInverted ? setBackDisabled(true) : setForthDisabled(true);
+      }
+      else
+      {
+         backAndForthInverted ? setBackDisabled(false) : setForthDisabled(false);
+      }
+      */
+   };
+
+   const handleOnInputChange = (event: any, newValue: any, reason: string) =>
+   {
+      setInputValue(newValue);
+   };
+
+   const callOnChangeCallbackIfCustomTimeframeHasDateValues = () =>
+   {
+      if (customTimeValuesBackend["startDate"] && customTimeValuesBackend["endDate"])
+      {
+         onChangeCallback(label, {id: `custom,${customTimeValuesBackend["startDate"]},${customTimeValuesBackend["endDate"]}`, label: "Custom"});
+      }
+   };
+
+   let customTimes = <></>;
+   if (name == "timeframe")
+   {
+      const handleSubmit = async (values: any, actions: any) =>
+      {
+      };
+
+      const dateChanged = (fieldName: "startDate" | "endDate", event: any) =>
+      {
+         customTimeValuesFrontend[fieldName] = event.target.value;
+         customTimeValuesBackend[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(event.target.value);
+
+         clearTimeout(debounceTimeout);
+         const newDebounceTimeout = setTimeout(() =>
+         {
+            callOnChangeCallbackIfCustomTimeframeHasDateValues();
+         }, 500);
+         setDebounceTimeout(newDebounceTimeout);
+      };
+
+      customTimes = <Box sx={{display: "inline-block", position: "relative", top: "-7px"}}>
+         <Collapse orientation="horizontal" in={customTimesVisible}>
+            <Formik initialValues={customTimeValuesFrontend} onSubmit={handleSubmit}>
+               {({}) => (
+                  <Form id="timeframe-form" autoComplete="off">
+                     <Field name="startDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe Start" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("startDate", event)} />
+                     <Field name="endDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe End" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("endDate", event)} />
+                  </Form>
+               )}
+            </Formik>
+         </Collapse>
+      </Box>;
+   }
+
+   const startAdornment = startIcon ? <Icon sx={{fontSize: "1.25rem!important", color: colors.gray.main, paddingLeft: allowBackAndForth ? "auto" : "0.25rem", width: allowBackAndForth ? "1.5rem" : "1.75rem"}}>{startIcon}</Icon> : null;
+
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // we tried this end-adornment, for a different style of down-arrow - but by using it, we then messed something else up (i forget what), so... not used right now //
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const endAdornment = <InputAdornment position="end" sx={{position: "absolute", right: allowBackAndForth ? "-0.5rem" : "0.5rem"}}><Icon sx={{fontSize: "1.75rem!important", color: colors.gray.main}}>keyboard_arrow_down</Icon></InputAdornment>;
+
+   const fontSize = "1rem";
+   let optionPaddingLeftRems = 0.75;
+   if (startIcon)
+   {
+      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75;
+   }
+   if (allowBackAndForth)
+   {
+      optionPaddingLeftRems += 2.5;
+   }
+
+   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>
+      );
+   }
+   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;