CE-882 Update qqq-frontend-core to 1.0.97

also (unrelated) disable delete dialog's buttons while delete is running

.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|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|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": {

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.97",
       "@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",

pom.xml

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

src/App.tsx

@@ -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,21 @@ 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 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 +71,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 +156,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 +199,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 +228,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 +351,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({
@@ -429,14 +513,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 +552,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 +577,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 +658,52 @@ export default function App()
 
    const [pageHeader, setPageHeader] = useState("" as string | JSX.Element);
    const [accentColor, setAccentColor] = useState("#0062FF");
+   const [accentColorLight, setAccentColorLight] = useState("#C0D6F7");
    const [tableMetaData, setTableMetaData] = useState(null);
    const [tableProcesses, setTableProcesses] = useState(null);
    const [dotMenuOpen, setDotMenuOpen] = useState(false);
    const [keyboardHelpOpen, setKeyboardHelpOpen] = useState(false);
+   const [helpHelpActive] = useState(queryParams.has("helpHelp"));
+   const [userId] = useState(user.email);
+
+   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 +711,6 @@ export default function App()
                   appName={branding.appName}
                   branding={branding}
                   routes={sideNavRoutes}
-                  pathToLabelMap={pathToLabelMap}
                   onMouseEnter={handleOnMouseEnter}
                   onMouseLeave={handleOnMouseLeave}
                />

src/CommandMenu.tsx

@@ -36,7 +36,7 @@ import Icon from "@mui/material/Icon";
 import Typography from "@mui/material/Typography";
 import {makeStyles} from "@mui/styles";
 import {Command} from "cmdk";
-import React, {useContext, useEffect, useRef, useState} from "react";
+import React, {useContext, useEffect, useRef} from "react";
 import {useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils";
@@ -174,7 +174,9 @@ const CommandMenu = ({metaData}: Props) =>
       })
       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 (labelA.localeCompare(labelB));
       })
 
       const path = location.pathname;
@@ -222,7 +224,9 @@ const CommandMenu = ({metaData}: Props) =>
       })
       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 (labelA.localeCompare(labelB));
       })
       return(
          <Command.Group heading="Tables">
@@ -252,7 +256,9 @@ const CommandMenu = ({metaData}: Props) =>
 
       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 (labelA.localeCompare(labelB));
       })
 
       return(
@@ -286,7 +292,9 @@ const CommandMenu = ({metaData}: Props) =>
 
       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 (labelA.localeCompare(labelB));
       })
 
       const entryMap = new Map<string, boolean>();
@@ -354,8 +362,7 @@ const CommandMenu = ({metaData}: Props) =>
                   <Grid container columnSpacing={5} rowSpacing={1}>
                      <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>n</span>Create a New Record</Grid>
                      <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>r</span>Refresh the Query</Grid>
-                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>c</span>Open the Columns Panel</Grid>
-                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>f</span>Open the Filter Panel</Grid>
+                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>f</span>Open the Filter Builder (Advanced mode only)</Grid>
                   </Grid>
 
                   <Typography variant="h6" pt={3}>Record View</Typography>

src/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,136 @@ 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))
+      {
+         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(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getTargetField()), prefix + "has a fieldRule without a targetField"))
+         {
+            qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
+         }
+      }
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   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,165 @@
+/*
+ * 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;
+
+
+
+   /*******************************************************************************
+    ** 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);
+   }
+
+}

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/fieldrules/FieldRuleAction.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 actions associated with field rules
+ *******************************************************************************/
+public enum FieldRuleAction
+{
+   CLEAR_TARGET_FIELD
+}

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

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

src/qqq/components/forms/BooleanFieldSwitch.tsx

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

src/qqq/components/forms/DynamicForm.tsx

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

src/qqq/components/forms/DynamicFormField.tsx

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

src/qqq/components/forms/DynamicFormUtils.ts

@@ -24,27 +24,38 @@ import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QF
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import * as Yup from "yup";
 
+
+type DisabledFields = { [fieldName: string]: boolean } | string[];
+
 /*******************************************************************************
  ** Meta-data to represent a single field in a table.
  **
  *******************************************************************************/
 class DynamicFormUtils
 {
-   public static getFormData(qqqFormFields: QFieldMetaData[])
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getFormData(qqqFormFields: QFieldMetaData[], disabledFields?: DisabledFields)
    {
       const dynamicFormFields: any = {};
       const formValidations: any = {};
 
       qqqFormFields.forEach((field) =>
       {
-         dynamicFormFields[field.name] = this.getDynamicField(field);
-         formValidations[field.name] = this.getValidationForField(field);
+         dynamicFormFields[field.name] = this.getDynamicField(field, disabledFields);
+         formValidations[field.name] = this.getValidationForField(field, disabledFields);
       });
 
       return {dynamicFormFields, formValidations};
    }
 
-   public static getDynamicField(field: QFieldMetaData)
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getDynamicField(field: QFieldMetaData, disabledFields?: DisabledFields)
    {
       let fieldType: string;
       switch (field.type.toString())
@@ -85,14 +96,21 @@ class DynamicFormUtils
          }
       }
 
+      ////////////////////////////////////////////////////////////
+      // this feels right, but... might be cases where it isn't //
+      ////////////////////////////////////////////////////////////
+      const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
+      const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
+
       let label = field.label ? field.label : field.name;
-      label += field.isRequired ? " *" : "";
+      label += effectivelyIsRequired ? " *" : "";
 
       return ({
+         fieldMetaData: field,
          name: field.name,
          label: label,
-         isRequired: field.isRequired,
-         isEditable: field.isEditable,
+         isRequired: effectivelyIsRequired,
+         isEditable: effectiveIsEditable,
          type: fieldType,
          displayFormat: field.displayFormat,
          // todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
@@ -100,11 +118,18 @@ class DynamicFormUtils
       });
    }
 
-   public static getValidationForField(field: QFieldMetaData)
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getValidationForField(field: QFieldMetaData, disabledFields?: DisabledFields)
    {
-      if (field.isRequired)
+      const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
+      const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
+
+      if (effectivelyIsRequired)
       {
-         if(field.possibleValueSourceName)
+         if (field.possibleValueSourceName)
          {
             ////////////////////////////////////////////////////////////////////////////////////////////
             // the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
@@ -120,6 +145,10 @@ class DynamicFormUtils
       return (null);
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
    public static addPossibleValueProps(dynamicFormFields: any, qFields: QFieldMetaData[], tableName: string, processName: string, displayValues: Map<string, string>)
    {
       for (let i = 0; i < qFields.length; i++)
@@ -158,6 +187,29 @@ class DynamicFormUtils
          }
       }
    }
+
+
+   /*******************************************************************************
+    ** 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]);
+      }
+   }
+
 }
 
 export default DynamicFormUtils;

src/qqq/components/forms/DynamicSelect.tsx

@@ -28,15 +28,17 @@ import Box from "@mui/material/Box";
 import Switch from "@mui/material/Switch";
 import TextField from "@mui/material/TextField";
 import {ErrorMessage, useFormikContext} from "formik";
-import React, {useEffect, useState} from "react";
+import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import Client from "qqq/utils/qqq/Client";
+import React, {useEffect, useState} from "react";
 
 interface Props
 {
    tableName?: string;
    processName?: string;
-   fieldName: string;
+   fieldName?: string;
+   possibleValueSourceName?: string;
    overrideId?: string;
    fieldLabel: string;
    inForm: boolean;
@@ -49,11 +51,15 @@ interface Props
    bulkEditMode?: boolean;
    bulkEditSwitchChangeHandler?: any;
    otherValues?: Map<string, any>;
+   variant: "standard" | "outlined";
+   initiallyOpen: boolean;
 }
 
 DynamicSelect.defaultProps = {
    tableName: null,
    processName: null,
+   fieldName: null,
+   possibleValueSourceName: null,
    inForm: true,
    initialValue: null,
    initialDisplayValue: null,
@@ -63,19 +69,85 @@ DynamicSelect.defaultProps = {
    isMultiple: false,
    bulkEditMode: false,
    otherValues: new Map<string, any>(),
+   variant: "outlined",
+   initiallyOpen: false,
    bulkEditSwitchChangeHandler: () =>
    {
    },
 };
 
+const {inputBorderColor} = colors;
+
+
+export const getAutocompleteOutlinedStyle = (isDisabled: boolean) =>
+{
+   return ({
+      "& .MuiOutlinedInput-root": {
+         borderRadius: "0.75rem",
+      },
+      "& .MuiInputBase-root": {
+         padding: "0.5rem",
+         background: isDisabled ? "#f0f2f5!important" : "initial",
+      },
+      "& .MuiOutlinedInput-root .MuiAutocomplete-input": {
+         padding: "0",
+         fontSize: "1rem"
+      },
+      "& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
+         borderColor: inputBorderColor
+      }
+   });
+}
+
+
 const qController = Client.getInstance();
 
-function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues}: Props)
+function DynamicSelect({tableName, processName, fieldName, possibleValueSourceName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen}: Props)
 {
-   const [open, setOpen] = useState(false);
+   const [open, setOpen] = useState(initiallyOpen);
    const [options, setOptions] = useState<readonly QPossibleValue[]>([]);
    const [searchTerm, setSearchTerm] = useState(null);
    const [firstRender, setFirstRender] = useState(true);
+   const [otherValuesWhenResultsWereLoaded, setOtherValuesWhenResultsWereLoaded] = useState(JSON.stringify(Object.fromEntries((otherValues))))
+
+   useEffect(() =>
+   {
+      if(tableName && processName)
+      {
+         console.log("DynamicSelect - you may not provide both a tableName and a processName")
+      }
+      if(tableName && !fieldName)
+      {
+         console.log("DynamicSelect - if you provide a tableName, you must also provide a fieldName");
+      }
+      if(processName && !fieldName)
+      {
+         console.log("DynamicSelect - if you provide a processName, you must also provide a fieldName");
+      }
+      if(fieldName && possibleValueSourceName)
+      {
+         console.log("DynamicSelect - if you provide a fieldName and a possibleValueSourceName, the possibleValueSourceName will be ignored");
+      }
+      if(!fieldName && !possibleValueSourceName)
+      {
+         console.log("DynamicSelect - you must provide either a fieldName (and a tableName or processName) or a possibleValueSourceName");
+      }
+      if(fieldName)
+      {
+         if(!tableName || !processName)
+         {
+            console.log("DynamicSelect - if you provide a fieldName, 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 - //
@@ -109,7 +181,14 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       {
          // console.log("First render, so not searching...");
          setFirstRender(false);
-         return;
+
+         /*
+         if(!initiallyOpen)
+         {
+            console.log("returning because not initially open?");
+            return;
+         }
+         */
       }
       // console.log("Use effect for searchTerm - searching!");
 
@@ -119,7 +198,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       (async () =>
       {
          // console.log(`doing a search with ${searchTerm}`);
-         const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName, searchTerm ?? "", null, otherValues);
+         const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName ?? possibleValueSourceName, searchTerm ?? "", null, otherValues);
 
          if(tableMetaData == null && tableName)
          {
@@ -142,6 +221,24 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       };
    }, [ searchTerm ]);
 
+   // todo - finish... call it in onOpen?
+   const reloadIfOtherValuesAreChanged = () =>
+   {
+      if(JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded)
+      {
+         (async () =>
+         {
+            setLoading(true);
+            setOptions([]);
+            console.log("Refreshing possible values...");
+            const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName ?? possibleValueSourceName, searchTerm ?? "", null, otherValues);
+            setLoading(false);
+            setOptions([ ...results ]);
+            setOtherValuesWhenResultsWereLoaded(JSON.stringify(Object.fromEntries(otherValues)));
+         })();
+      }
+   }
+
    const inputChanged = (event: React.SyntheticEvent, value: string, reason: string) =>
    {
       // console.log(`input changed.  Reason: ${reason}, setting search term to ${value}`);
@@ -174,7 +271,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
             onChange(value ? new QPossibleValue(value) : null);
          }
       }
-      else if(setFieldValueRef)
+      else if(setFieldValueRef && fieldName)
       {
          setFieldValueRef(fieldName, value ? value.id : null);
       }
@@ -230,7 +327,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       // attributes.  so, doing this, w/ key=id, seemed to fix it.                                 //
       ///////////////////////////////////////////////////////////////////////////////////////////////
       return (
-         <li {...props} key={option.id}>
+         <li {...props} key={option.id} style={{fontSize: "1rem"}}>
             {content}
          </li>
       );
@@ -244,13 +341,20 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       bulkEditSwitchChangeHandler(fieldName, newSwitchValue);
    };
 
-   // console.log(`default value: ${JSON.stringify(defaultValue)}`);
+   ////////////////////////////////////////////
+   // for outlined style, adjust some styles //
+   ////////////////////////////////////////////
+   let autocompleteSX = {};
+   if (variant == "outlined")
+   {
+      autocompleteSX = getAutocompleteOutlinedStyle(isDisabled);
+   }
 
    const autocomplete = (
       <Box>
          <Autocomplete
-            id={overrideId ?? fieldName}
-            sx={{background: isDisabled ? "#f0f2f5!important" : "initial"}}
+            id={overrideId ?? fieldName ?? possibleValueSourceName}
+            sx={autocompleteSX}
             open={open}
             fullWidth
             onOpen={() =>
@@ -267,9 +371,14 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
             {
                setOpen(false);
             }}
-            isOptionEqualToValue={(option, value) => option.id === value.id}
+            isOptionEqualToValue={(option, value) => value !== null && value !== undefined && option.id === value.id}
             getOptionLabel={(option) =>
             {
+               if(option === null || option === undefined)
+               {
+                  return ("");
+               }
+
                // @ts-ignore
                if(option && option.length)
                {
@@ -305,7 +414,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
                <TextField
                   {...params}
                   label={fieldLabel}
-                  variant="standard"
+                  variant={variant}
                   autoComplete="off"
                   type="search"
                   InputProps={{
@@ -324,7 +433,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
             inForm &&
             <Box mt={0.75}>
                <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
-                  {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={fieldName} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
+                  {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={fieldName ?? possibleValueSourceName} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
                </MDTypography>
             </Box>
          }
@@ -341,6 +450,14 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
                   id={`bulkEditSwitch-${fieldName}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
+                  sx={{top: "-4px",
+                     "& .MuiSwitch-track": {
+                        height: 20,
+                        borderRadius: 10,
+                        top: -3,
+                        position: "relative"
+                     }
+                  }}
                />
             </Box>
             <Box width="100%">

src/qqq/components/horseshoe/Breadcrumbs.tsx

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

src/qqq/components/horseshoe/NavBar.tsx

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

src/qqq/components/horseshoe/Styles.ts

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

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

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

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

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

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

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

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

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

src/qqq/components/legacy/typography.ts

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

src/qqq/components/misc/FieldAutoComplete.tsx

@@ -0,0 +1,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";
@@ -45,8 +46,10 @@ interface Props
    isOpen: boolean;
    metaData: QInstance;
    tableMetaData: QTableMetaData;
+   tableVariant?: QTableVariant;
    closeHandler: () => void;
    mayClose: boolean;
+   subHeader?: JSX.Element;
 }
 
 GotoRecordDialog.defaultProps = {
@@ -58,7 +61,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,25 +71,25 @@ function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
 
 function GotoRecordDialog(props: Props): JSX.Element
 {
-   const fields: QFieldMetaData[] = []
+   const fields: 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)
+            if (field)
             {
                fields.push(field);
 
-               if(field.name == pkey.name)
+               if (field.name == pkey.name)
                {
                   addedPkey = true;
                }
@@ -95,17 +98,17 @@ function GotoRecordDialog(props: Props): JSX.Element
       }
    }
 
-   if(pkey && !addedPkey)
+   if (pkey && !addedPkey)
    {
       fields.unshift(pkey);
    }
 
    const makeInitialValues = () =>
    {
-      const rs = {} as {[field: string]: string};
+      const rs = {} as { [field: string]: string };
       fields.forEach((field) => rs[field.name] = "");
       return (rs);
-   }
+   };
 
    const [error, setError] = useState("");
    const [values, setValues] = useState(makeInitialValues());
@@ -115,76 +118,87 @@ 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-", "");
          document.getElementById("gotoButton-" + index).click();
       }
-   }
+   };
 
    const closeRequested = () =>
    {
-      if(props.mayClose)
+      if (props.mayClose)
       {
          close();
       }
-   }
+   };
 
    const goClicked = async (fieldName: string) =>
    {
       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)
+      const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, null, "AND", null, 10);
+      try
       {
-         setError("Record not found.");
-         setTimeout(() => setError(""), 3000);
+         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)
+         {
+            navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${encodeURIComponent(queryResult[0].values.get(props.tableMetaData.primaryKeyField))}`);
+            close();
+         }
+         else
+         {
+            setError("More than 1 record found...");
+            setTimeout(() => setError(""), 3000);
+         }
       }
-      else if(queryResult.length == 1)
+      catch (e)
       {
-         navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${queryResult[0].values.get(props.tableMetaData.primaryKeyField)}`);
-         close();
+         // @ts-ignore
+         setError(`Error: ${(e && e.message) ? e.message : e}`);
+         setTimeout(() => setError(""), 6000);
       }
-      else
-      {
-         setError("More than 1 record found...");
-         setTimeout(() => setError(""), 3000);
-      }
-   }
+   };
 
-   if(props.tableMetaData)
+   if (props.tableMetaData)
    {
       if (fields.length == 0 && !error)
       {
-         setError("This table is not configured for this feature.")
+         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) =>
                   (
@@ -230,16 +244,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 +266,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 +282,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}>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,158 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2023.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QHelpContent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QHelpContent";
+import Box from "@mui/material/Box";
+import parse from "html-react-parser";
+import React, {useContext} from "react";
+import Markdown from "react-markdown";
+import QContext from "QContext";
+
+interface Props
+{
+   helpContents: 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;
+   if (helpHelpActive)
+   {
+      if (!selectedHelpContent)
+      {
+         selectedHelpContent = new QHelpContent({content: ""});
+      }
+      content = selectedHelpContent.content + ` [${helpContentKey ?? "?"}]`;
+   }
+   else if(selectedHelpContent)
+   {
+      content = selectedHelpContent.content;
+   }
+
+   ///////////////////////////////////////////////////
+   // if content was found, format it and return it //
+   ///////////////////////////////////////////////////
+   if (content)
+   {
+      return <Box display="inline" className="helpContent">
+         {heading && <span className="header">{heading}</span>}
+         {formatHelpContent(content, selectedHelpContent.format)}
+      </Box>;
+   }
+
+   return (null);
+}
+
+export default HelpContent;

src/qqq/components/misc/RecordSidebar.tsx

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

src/qqq/components/misc/SavedFilters.tsx

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

src/qqq/components/misc/SavedViews.tsx

@@ -0,0 +1,772 @@
+/*
+ * 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 [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} = 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 ReportSetupWidget).  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);
+   }
+
+
+
+   /*******************************************************************************
+    ** 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;
+
+   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={<>Save your current filters, columns and settings, for quick re-use at a later time.<br /><br />You will be prompted to enter a name if you choose this option.</>}>
+               <MenuItem onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
+                  <ListItemIcon><Icon>save</Icon></ListItemIcon>
+                  {currentSavedView ? "Save..." : "Save As..."}
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            isQueryScreen && hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Change the name for this saved view.">
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
+                  <ListItemIcon><Icon>edit</Icon></ListItemIcon>
+                  Rename...
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            isQueryScreen && hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Save a new copy this view, with a different name, separate from the original.">
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
+                  <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
+                  Save As...
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            isQueryScreen && hasDeletePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Delete this saved view.">
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
+                  <ListItemIcon><Icon>delete</Icon></ListItemIcon>
+                  Delete...
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            isQueryScreen &&
+            <Tooltip {...menuTooltipAttribs} title="Create a new view of this table, resetting the filters and columns to their defaults.">
+               <MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
+                  <ListItemIcon><Icon>monitor</Icon></ListItemIcon>
+                  New View
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            isQueryScreen && hasSavedReportsPermission &&
+            <Tooltip {...menuTooltipAttribs} title="Create a new Saved Report using your current view of this table as a starting point.">
+               <MenuItem onClick={() => handleDropdownOptionClick(NEW_REPORT_OPTION)}>
+                  <ListItemIcon><Icon>article</Icon></ListItemIcon>
+                  Create Report from Current View
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            isQueryScreen && <Divider/>
+         }
+         <MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Views</b></MenuItem>
+         {
+            savedViews && savedViews.length > 0 ? (
+               savedViews.map((record: QRecord, index: number) =>
+                  <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedViewRecordOnClick(record)}>
+                     {record.values.get("label")}
+                  </MenuItem>
+               )
+            ): (
+               <MenuItem disabled sx={{opacity: "1 !important"}}>
+                  <i>You do not have any saved views for this table.</i>
+               </MenuItem>
+            )
+         }
+      </Menu>
+   );
+
+   let buttonText = "Views";
+   let buttonBackground = "none";
+   let buttonBorder = colors.grayLines.main;
+   let buttonColor = colors.gray.main;
+
+   if(currentSavedView)
+   {
+      if (viewIsModified)
+      {
+         buttonBackground = accentColorLight;
+         buttonBorder = buttonBackground;
+         buttonColor = accentColor;
+      }
+      else
+      {
+         buttonBackground = accentColor;
+         buttonBorder = buttonBackground;
+         buttonColor = "#FFFFFF";
+      }
+   }
+
+   const buttonStyles = {
+      border: `1px solid ${buttonBorder}`,
+      backgroundColor: buttonBackground,
+      color: buttonColor,
+      "&:focus:not(:hover)": {
+         color: buttonColor,
+         backgroundColor: buttonBackground,
+      },
+      "&:hover": {
+         color: buttonColor,
+         backgroundColor: buttonBackground,
+      }
+   }
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function isSaveButtonDisabled(): boolean
+   {
+      if(isSubmitting)
+      {
+         return (true);
+      }
+
+      const haveInputText = (savedViewNameInputValue != null && savedViewNameInputValue.trim() != "")
+
+      if(isSaveFilterAs || isRenameFilter || currentSavedView == null)
+      {
+         if(!haveInputText)
+         {
+            return (true);
+         }
+      }
+
+      return (false);
+   }
+
+   const linkButtonStyle = {
+      minWidth: "unset",
+      textTransform: "none",
+      fontSize: "0.875rem",
+      fontWeight: "500",
+      padding: "0.5rem"
+   };
+
+   return (
+      hasQueryPermission && tableMetaData ? (
+         <>
+            <Box order="1" mr={"0.5rem"}>
+               <Button
+                  onClick={openSavedViewsMenu}
+                  sx={{
+                     borderRadius: "0.75rem",
+                     textTransform: "none",
+                     fontWeight: 500,
+                     fontSize: "0.875rem",
+                     p: "0.5rem",
+                     ... buttonStyles
+                  }}
+               >
+                  <Icon sx={{mr: "0.5rem"}}>save</Icon>
+                  {buttonText}
+                  <Icon sx={{ml: "0.5rem"}}>keyboard_arrow_down</Icon>
+               </Button>
+               {renderSavedViewsMenu}
+            </Box>
+            <Box order="3" display="flex" justifyContent="center" flexDirection="column">
+               <Box pl={2} pr={2} sx={{display: "flex", alignItems: "center"}}>
+                  {
+                     !currentSavedView && viewIsModified && <>
+                        {
+                           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></>}>
+                           <Box display="inline" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>{viewDiffs.length} Unsaved Change{viewDiffs.length == 1 ? "" : "s"}</Box>
+                        </Tooltip>
+
+                        <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save&hellip;</Button>
+
+                        {/* vertical rule */}
+                        <Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
+
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
+                     </>
+                  }
+                  {
+                     !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/ValidationReview.tsx

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

src/qqq/components/query/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/BasicAndAdvancedQueryControls.tsx

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

@@ -0,0 +1,122 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {TablePagination} from "@mui/material";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import {GridRowsProp} from "@mui/x-data-grid-pro";
+import React from "react";
+import CustomWidthTooltip from "qqq/components/tooltips/CustomWidthTooltip";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+interface CustomPaginationProps
+{
+   tableMetaData: QTableMetaData;
+   rows: GridRowsProp[];
+   totalRecords: number;
+   distinctRecords: number;
+   pageNumber: number;
+   rowsPerPage: number;
+   loading: boolean;
+   isJoinMany: boolean;
+   handlePageChange: (value: number) => void;
+   handleRowsPerPageChange: (value: number) => void;
+}
+
+/*******************************************************************************
+ ** DataGrid custom component - for pagination!
+ *******************************************************************************/
+export default function CustomPaginationComponent({tableMetaData, rows, totalRecords, distinctRecords, pageNumber, rowsPerPage, loading, isJoinMany, handlePageChange, handleRowsPerPageChange}: CustomPaginationProps): JSX.Element
+{
+   // @ts-ignore
+   const defaultLabelDisplayedRows = ({from, to, count}) =>
+   {
+      const tooltipHTML = <>
+         The number of rows shown on this screen may be greater than the number of {tableMetaData?.label} records
+         that match your query, because you have included fields from other tables which may have
+         more than one record associated with each {tableMetaData?.label}.
+      </>
+      let distinctPart = isJoinMany ? (<Box display="inline" component="span" textAlign="right">
+         &nbsp;({ValueUtils.safeToLocaleString(distinctRecords)} distinct<CustomWidthTooltip title={tooltipHTML}>
+            <IconButton sx={{p: 0, pl: 0.25, mb: 0.25}}><Icon fontSize="small" sx={{fontSize: "1.125rem !important", color: "#9f9f9f"}}>info_outlined</Icon></IconButton>
+         </CustomWidthTooltip>
+         )
+      </Box>) : <></>;
+
+      if (tableMetaData && !tableMetaData.capabilities.has(Capability.TABLE_COUNT))
+      {
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // to avoid a non-countable table showing (this is what data-grid did) 91-100 even if there were only 95 records, //
+         // we'll do this... not quite good enough, but better than the original                                           //
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         if (rows.length > 0 && rows.length < to - from)
+         {
+            to = from + rows.length;
+         }
+         return (`Showing ${from.toLocaleString()} to ${to.toLocaleString()}`);
+      }
+
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // treat -1 as the sentinel that it's set as below -- remember, we did that so that 'to' would have a value in here when there's no count. //
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      if (count !== null && count !== undefined && count !== -1)
+      {
+         if (count === 0)
+         {
+            return (loading ? "Counting..." : "No rows");
+         }
+
+         return <span>
+            Showing {from.toLocaleString()} to {to.toLocaleString()} of
+            {
+               count == -1 ?
+                  <>more than {to.toLocaleString()}</>
+                  : <> {count.toLocaleString()}{distinctPart}</>
+            }
+         </span>;
+      }
+      else
+      {
+         return ("Counting...");
+      }
+   };
+
+
+   return (
+      <TablePagination
+         component="div"
+         sx={{minWidth: "450px"}}
+         // note - passing null here makes the 'to' param in the defaultLabelDisplayedRows also be null,
+         // so pass a sentinel value of -1...
+         count={totalRecords === null || totalRecords === undefined ? -1 : totalRecords}
+         page={pageNumber}
+         rowsPerPageOptions={[10, 25, 50, 100, 250]}
+         rowsPerPage={rowsPerPage}
+         onPageChange={(event, value) => handlePageChange(value)}
+         onRowsPerPageChange={(event) => handleRowsPerPageChange(Number(event.target.value))}
+         labelDisplayedRows={defaultLabelDisplayedRows}
+      />
+   );
+
+}

src/qqq/components/query/ExportMenuItem.tsx

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

src/qqq/components/query/FilterCriteriaRowValues.tsx

@@ -44,9 +44,13 @@ interface Props
    field: QFieldMetaData;
    table: QTableMetaData;
    valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
+   initiallyOpenMultiValuePvs?: boolean
 }
 
-FilterCriteriaRowValues.defaultProps = {};
+FilterCriteriaRowValues.defaultProps =
+   {
+      initiallyOpenMultiValuePvs: false
+   };
 
 export const getTypeForTextField = (field: QFieldMetaData): string =>
 {
@@ -90,6 +94,24 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       document.getElementById(`${idPrefix}${criteria.id}`).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();
+         }
+      }
+   };
+
    const inputProps: any = {};
    inputProps.endAdornment = (
       <InputAdornment position="end">
@@ -106,20 +128,22 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       autoComplete="off"
       type={type}
       onChange={(event) => valueChangeHandler(event, valueIndex)}
+      onKeyDown={handleKeyDown}
       value={value}
       InputLabelProps={inputLabelProps}
       InputProps={inputProps}
       fullWidth
+      autoFocus={true}
    />;
 };
 
-function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler}: Props): JSX.Element
+function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs}: Props): JSX.Element
 {
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    if (!operatorOption)
    {
-      return <br />;
+      return null;
    }
 
    function saveNewPasterValues(newValues: any[])
@@ -148,7 +172,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
    switch (operatorOption.valueMode)
    {
       case ValueMode.NONE:
-         return <br />;
+         return null;
       case ValueMode.SINGLE:
          return makeTextField(field, criteria, valueChangeHandler);
       case ValueMode.SINGLE_DATE:
@@ -215,6 +239,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                initialDisplayValue={selectedPossibleValue?.label}
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, 0, value)}
+               variant="standard"
             />
          </Box>;
       case ValueMode.PVS_MULTI:
@@ -240,8 +265,10 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                isMultiple
                fieldLabel="Values"
                initialValues={initialValues}
+               initiallyOpen={false /*initiallyOpenMultiValuePvs*/}
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, "all", value)}
+               variant="standard"
             />
          </Box>;
    }

src/qqq/components/query/QueryScreenActionMenu.tsx

@@ -0,0 +1,134 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import React, {useState} from "react";
+import {useNavigate} from "react-router-dom";
+import {QActionsMenuButton} from "qqq/components/buttons/DefaultButtons";
+
+interface QueryScreenActionMenuProps
+{
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+   tableProcesses: QProcessMetaData[];
+   bulkLoadClicked: () => void;
+   bulkEditClicked: () => void;
+   bulkDeleteClicked: () => void;
+   processClicked: (process: QProcessMetaData) => void;
+}
+
+QueryScreenActionMenu.defaultProps = {
+};
+
+export default function QueryScreenActionMenu({metaData, tableMetaData, tableProcesses, bulkLoadClicked, bulkEditClicked, bulkDeleteClicked, processClicked}: QueryScreenActionMenuProps): JSX.Element
+{
+   const [anchorElement, setAnchorElement] = useState(null)
+
+   const navigate = useNavigate();
+
+   const openActionsMenu = (event: any) =>
+   {
+      setAnchorElement(event.currentTarget);
+   }
+
+   const closeActionsMenu = () =>
+   {
+      setAnchorElement(null);
+   }
+
+   const pushDividerIfNeeded = (menuItems: JSX.Element[]) =>
+   {
+      if (menuItems.length > 0)
+      {
+         menuItems.push(<Divider key="divider" />);
+      }
+   };
+
+   const runSomething = (handler: () => void) =>
+   {
+      closeActionsMenu();
+      handler();
+   }
+
+   const menuItems: JSX.Element[] = [];
+   if (tableMetaData.capabilities.has(Capability.TABLE_INSERT) && tableMetaData.insertPermission)
+   {
+      menuItems.push(<MenuItem key="bulkLoad" onClick={() => runSomething(bulkLoadClicked)}><ListItemIcon><Icon>library_add</Icon></ListItemIcon>Bulk Load</MenuItem>);
+   }
+   if (tableMetaData.capabilities.has(Capability.TABLE_UPDATE) && tableMetaData.editPermission)
+   {
+      menuItems.push(<MenuItem key="bulkEdit" onClick={() => runSomething(bulkEditClicked)}><ListItemIcon><Icon>edit</Icon></ListItemIcon>Bulk Edit</MenuItem>);
+   }
+   if (tableMetaData.capabilities.has(Capability.TABLE_DELETE) && tableMetaData.deletePermission)
+   {
+      menuItems.push(<MenuItem key="bulkDelete" onClick={() => runSomething(bulkDeleteClicked)}><ListItemIcon><Icon>delete</Icon></ListItemIcon>Bulk Delete</MenuItem>);
+   }
+
+   const runRecordScriptProcess = metaData?.processes.get("runRecordScript");
+   if (runRecordScriptProcess)
+   {
+      const process = runRecordScriptProcess;
+      menuItems.push(<MenuItem key={process.name} onClick={() => runSomething(() => processClicked(process))}><ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon>{process.label}</MenuItem>);
+   }
+
+   menuItems.push(<MenuItem key="developerMode" onClick={() => navigate(`${metaData.getTablePathByName(tableMetaData.name)}/dev`)}><ListItemIcon><Icon>code</Icon></ListItemIcon>Developer Mode</MenuItem>);
+
+   if (tableProcesses && tableProcesses.length)
+   {
+      pushDividerIfNeeded(menuItems);
+   }
+
+   tableProcesses.sort((a, b) => a.label.localeCompare(b.label));
+   tableProcesses.map((process) =>
+   {
+      menuItems.push(<MenuItem key={process.name} onClick={() => runSomething(() => processClicked(process))}><ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon>{process.label}</MenuItem>);
+   });
+
+   if (menuItems.length === 0)
+   {
+      menuItems.push(<MenuItem key="notAvaialableNow" disabled><ListItemIcon><Icon>block</Icon></ListItemIcon><i>No actions available</i></MenuItem>);
+   }
+
+   return (
+      <>
+         <QActionsMenuButton isOpen={anchorElement} onClickHandler={openActionsMenu} />
+         <Menu
+            anchorEl={anchorElement}
+            anchorOrigin={{vertical: "bottom", horizontal: "right",}}
+            transformOrigin={{vertical: "top", horizontal: "right",}}
+            open={anchorElement != null}
+            onClose={closeActionsMenu}
+            keepMounted
+         >
+            {menuItems}
+         </Menu>
+      </>
+   )
+}

src/qqq/components/query/QuickFilter.tsx

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

src/qqq/components/query/SelectionSubsetDialog.tsx

@@ -0,0 +1,74 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import TextField from "@mui/material/TextField";
+import React, {useState} from "react";
+import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+
+
+/*******************************************************************************
+ ** Component that is the dialog for the user to enter the selection-subset
+ *******************************************************************************/
+export default function SelectionSubsetDialog(props: { isOpen: boolean; initialValue: number; closeHandler: (value?: number) => void })
+{
+   const [value, setValue] = useState(props.initialValue);
+
+   const handleChange = (newValue: string) =>
+   {
+      setValue(parseInt(newValue));
+   };
+
+   const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
+   {
+      if (e.key == "Enter" && value)
+      {
+         props.closeHandler(value);
+      }
+   };
+
+   return (
+      <Dialog open={props.isOpen} onClose={() => props.closeHandler()} onKeyPress={(e) => keyPressed(e)}>
+         <DialogTitle>Subset of the Query Result</DialogTitle>
+         <DialogContent>
+            <DialogContentText>How many records do you want to select?</DialogContentText>
+            <TextField
+               autoFocus
+               name="selection-subset-size"
+               inputProps={{width: "100%", type: "number", min: 1}}
+               onChange={(e) => handleChange(e.target.value)}
+               value={value}
+               sx={{width: "100%"}}
+               onFocus={event => event.target.select()}
+            />
+         </DialogContent>
+         <DialogActions>
+            <QCancelButton disabled={false} onClickHandler={() => props.closeHandler()} />
+            <QSaveButton label="OK" iconName="check" disabled={value == undefined || isNaN(value)} onClickHandler={() => props.closeHandler(value)} />
+         </DialogActions>
+      </Dialog>
+   );
+}
+

src/qqq/components/query/TableVariantDialog.tsx

@@ -0,0 +1,122 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QTableVariant} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableVariant";
+import Autocomplete from "@mui/material/Autocomplete";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import TextField from "@mui/material/TextField";
+import React, {useEffect, useState} from "react";
+import {TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT} from "qqq/pages/records/query/RecordQuery";
+import Client from "qqq/utils/qqq/Client";
+
+const qController = Client.getInstance();
+
+/*******************************************************************************
+ ** Component that is the dialog for the user to select a variant on tables with variant backends //
+ *******************************************************************************/
+export default function TableVariantDialog(props: { isOpen: boolean; table: QTableMetaData; closeHandler: (value?: QTableVariant) => void })
+{
+   const [value, setValue] = useState(null);
+   const [dropDownOpen, setDropDownOpen] = useState(false);
+   const [variants, setVariants] = useState(null);
+
+   const handleVariantChange = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) =>
+   {
+      const tableVariantLocalStorageKey = `${TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT}.${props.table.name}`;
+      if (value != null)
+      {
+         localStorage.setItem(tableVariantLocalStorageKey, JSON.stringify(value));
+      }
+      else
+      {
+         localStorage.removeItem(tableVariantLocalStorageKey);
+      }
+      props.closeHandler(value);
+   };
+
+   const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
+   {
+      if (e.key == "Enter" && value)
+      {
+         props.closeHandler(value);
+      }
+   };
+
+   useEffect(() =>
+   {
+      console.log("queryVariants");
+      try
+      {
+         (async () =>
+         {
+            const variants = await qController.tableVariants(props.table.name);
+            console.log(JSON.stringify(variants));
+            setVariants(variants);
+         })();
+      }
+      catch (e)
+      {
+         console.log(e);
+      }
+   }, []);
+
+
+   return variants && (
+      <Dialog open={props.isOpen} onKeyPress={(e) => keyPressed(e)}>
+         <DialogTitle>{props.table.variantTableLabel}</DialogTitle>
+         <DialogContent>
+            <DialogContentText>Select the {props.table.variantTableLabel} to be used on this table:</DialogContentText>
+            <Autocomplete
+               id="tableVariantId"
+               sx={{width: "400px", marginTop: "10px"}}
+               open={dropDownOpen}
+               size="small"
+               onOpen={() =>
+               {
+                  setDropDownOpen(true);
+               }}
+               onClose={() =>
+               {
+                  setDropDownOpen(false);
+               }}
+               // @ts-ignore
+               onChange={handleVariantChange}
+               isOptionEqualToValue={(option, value) => option.id === value.id}
+               options={variants}
+               renderInput={(params) => <TextField {...params} label={props.table.variantTableLabel} />}
+               getOptionLabel={(option) =>
+               {
+                  if (typeof option == "object")
+                  {
+                     return (option as QTableVariant).name;
+                  }
+                  return option;
+               }}
+            />
+         </DialogContent>
+      </Dialog>
+   );
+}
+

src/qqq/components/query/XIcon.tsx

@@ -0,0 +1,92 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import React, {useContext} from "react";
+import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
+
+interface XIconProps
+{
+   onClick: (e: React.MouseEvent<HTMLSpanElement>) => void;
+   position: "forQuickFilter" | "forAdvancedQueryPreview" | "default";
+   shade: "default" | "accent" | "accentLight"
+}
+
+XIcon.defaultProps = {
+   position: "default",
+   shade: "default"
+};
+
+export default function XIcon({onClick, position, shade}: XIconProps): JSX.Element
+{
+   const {accentColor, accentColorLight} = useContext(QContext)
+
+   //////////////////////////
+   // for default position //
+   //////////////////////////
+   let rest: any = {
+      top: "-0.75rem",
+      left: "-0.5rem",
+   }
+
+   if(position == "forQuickFilter")
+   {
+      rest = {
+         left: "-1.125rem",
+      }
+   }
+   else if(position == "forAdvancedQueryPreview")
+   {
+      rest = {
+         top: "-0.5rem",
+         left: "-0.75rem",
+      }
+   }
+
+   let color;
+   switch (shade)
+   {
+      case "default":
+         color = colors.gray.main;
+         break;
+      case "accent":
+         color = accentColor;
+         break;
+      case "accentLight":
+         color = accentColorLight;
+         break;
+   }
+
+   return (
+      <span style={{position: "relative"}}><IconButton sx={{
+         fontSize: "0.75rem",
+         border: `1px solid ${color}`,
+         color: color,
+         padding: "0",
+         background: "#FFFFFF !important",
+         position: "absolute",
+         ... rest
+      }} onClick={onClick}><Icon>close</Icon></IconButton></span>
+   )
+}

src/qqq/components/sharing/ShareModal.tsx

@@ -0,0 +1,481 @@
+/*
+ * 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} from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import 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 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();
+
+/*******************************************************************************
+ ** 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 [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 [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+
+   /////////////////////////////////////////////////////////
+   // 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(event: React.SyntheticEvent, 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);
+         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);
+      }
+   }
+
+
+   // todo - need this to be real
+   const audienceOptions = [
+      {id: "user:1", label: "Darin Kelkhoff"},
+      {id: "user:2", label: "Tom Chutterloin"},
+      {id: "user:3", label: "Tylers Ample"},
+      {id: "user:4", label: "Mames Mames"},
+      {id: "group:2", label: "Cold Track Engineering"}
+   ];
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   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)
+   {
+      return (
+         <Autocomplete
+            id={id}
+            disabled={id == "new-share-scope" && submitting}
+            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={autocompleteSX}
+         />
+      );
+   }
+
+   //////////////////////
+   // 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">
+                  <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" maxWidth="590px">
+                        {/* 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} maxWidth="590px" pb={1} fontWeight="300">
+                        {alert && <Alert color="error" onClose={() => setAlert(null)}>{alert}</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="350px" pr={2}>
+                        <Autocomplete
+                           id="new-share-audience"
+                           disabled={submitting}
+                           renderInput={(params) => (<TextField {...params} label="User or Group" variant="outlined" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
+                           options={audienceOptions}
+                           onChange={handleAudienceChange}
+                           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={autocompleteSX}
+                        />
+                     </Box>
+                     <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: "auto"}} height="180px" pt="0.5rem">
+                        {
+                           currentShares.map((share) => (
+                              <Box key={share.shareId} display="flex" justifyContent="space-between" alignItems="center" p="0.25rem" fontSize="1rem">
+                                 <Box display="flex" alignItems="center">
+                                    <Box width="310px" pl="1rem">{share.audienceLabel}</Box>
+                                    <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>
+
+               {/* 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 autocompleteSX =
+   {
+      "& .MuiAutocomplete-input": {padding: "0.125rem 0.5rem !important"},
+      "& .MuiOutlinedInput-root": {borderRadius: "0.75rem !important"}
+   };
+
+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,109 @@
+/*
+ * 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 React from "react";
+import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
+import WidgetBlock from "qqq/components/widgets/WidgetBlock";
+
+
+interface CompositeData
+{
+   blocks: BlockData[];
+   styleOverrides?: any;
+   layout?: string
+}
+
+
+interface CompositeWidgetProps
+{
+   widgetMetaData: QWidgetMetaData;
+   data: CompositeData;
+}
+
+
+/*******************************************************************************
+ ** Widget which is a list of Blocks.
+ *******************************************************************************/
+export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetProps): JSX.Element
+{
+   if (!data || !data.blocks)
+   {
+      return (<Skeleton />);
+   }
+
+   ////////////////////////////////////////////////////////////////////////////////////
+   // note - these layouts are defined in qqq in the CompositeWidgetData.Layout enum //
+   ////////////////////////////////////////////////////////////////////////////////////
+   let layout = data?.layout;
+   let boxStyle: any = {};
+   if (layout == "FLEX_ROW_WRAPPED")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "row";
+      boxStyle.flexWrap = "wrap";
+      boxStyle.gap = "0.5rem";
+   }
+   else if (layout == "FLEX_ROW_SPACE_BETWEEN")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "row";
+      boxStyle.justifyContent = "space-between"
+      boxStyle.gap = "0.25rem";
+   }
+   else if (layout == "TABLE_SUB_ROW_DETAILS")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "column";
+      boxStyle.fontSize = "0.875rem";
+      boxStyle.fontWeight = 400;
+      boxStyle.borderRight = "1px solid #D0D0D0";
+   }
+   else if (layout == "BADGES_WRAPPER")
+   {
+      boxStyle.display = "flex";
+      boxStyle.gap = "0.25rem";
+      boxStyle.padding = "0 0.25rem";
+      boxStyle.fontSize = "0.875rem";
+      boxStyle.fontWeight = 400;
+      boxStyle.border = "1px solid gray";
+      boxStyle.borderRadius = "0.5rem";
+      boxStyle.background = "#FFFFFF";
+   }
+
+   if (data?.styleOverrides)
+   {
+      boxStyle = {...boxStyle, ...data.styleOverrides};
+   }
+
+   return (<Box sx={boxStyle} className="compositeWidget">
+      {
+         data.blocks.map((block: BlockData, index) => (
+            <React.Fragment key={index}>
+               <WidgetBlock widgetMetaData={widgetMetaData} block={block} />
+            </React.Fragment>
+         ))
+      }
+   </Box>);
+
+}

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -19,34 +19,41 @@
  */
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Skeleton} from "@mui/material";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import {Alert, Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
 import parse from "html-react-parser";
-import React, {useContext, useEffect, useReducer, useState} from "react";
-import {useLocation} from "react-router-dom";
 import QContext from "QContext";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import TabPanel from "qqq/components/misc/TabPanel";
 import BarChart from "qqq/components/widgets/charts/barchart/BarChart";
 import HorizontalBarChart from "qqq/components/widgets/charts/barchart/HorizontalBarChart";
 import DefaultLineChart from "qqq/components/widgets/charts/linechart/DefaultLineChart";
 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 FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget";
+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 ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
 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} 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 +64,12 @@ 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;
 }
 
 DashboardWidgets.defaultProps = {
@@ -70,12 +79,12 @@ DashboardWidgets.defaultProps = {
    omitWrappingGridContainer: false,
    areChildren: false,
    childUrlParams: "",
-   parentWidgetMetaData: null
+   parentWidgetMetaData: null,
+   wrapWidgetsInTabPanels: false,
 };
 
-function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData}: Props): JSX.Element
+function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
 {
-   const location = useLocation();
    const [widgetData, setWidgetData] = useState([] as any[]);
    const [widgetCounter, setWidgetCounter] = useState(0);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
@@ -84,6 +93,24 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
    const [haveLoadedParams, setHaveLoadedParams] = useState(false);
    const {accentColor} = useContext(QContext);
 
+   let initialSelectedTab = 0;
+   let selectedTabKey: string = null;
+   if (parentWidgetMetaData && wrapWidgetsInTabPanels)
+   {
+      selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`;
+      if (localStorage.getItem(selectedTabKey))
+      {
+         initialSelectedTab = Number(localStorage.getItem(selectedTabKey));
+      }
+   }
+   const [selectedTab, setSelectedTab] = useState(initialSelectedTab);
+
+   const changeTab = (newValue: number) =>
+   {
+      setSelectedTab(newValue);
+      localStorage.setItem(selectedTabKey, String(newValue));
+   };
+
    useEffect(() =>
    {
       setWidgetData([]);
@@ -102,15 +129,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 +150,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    const reloadWidget = async (index: number, data: string) =>
    {
-      (async() =>
+      (async () =>
       {
          const urlParams = getQueryParams(widgetMetaDataList[index], data);
          setCurrentUrlParams(urlParams);
@@ -140,7 +167,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                widgetData[index]["errorLoading"] = false;
             }
          }
-         catch(e)
+         catch (e)
          {
             console.error(e);
             if (widgetData[index])
@@ -151,7 +178,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
          forceUpdate();
       })();
-   }
+   };
 
    function getQueryParams(widgetMetaData: QWidgetMetaData, extraParams: string): string
    {
@@ -168,7 +195,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 +205,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,8 +252,45 @@ 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.values)
+      {
+         record.values.forEach((value, key) => rs[key] = value);
+      }
+
+      return (rs);
+   }
+
    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%"}}>
             {
@@ -238,11 +302,26 @@ 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 && (
+                  <Widget
+                     omitPadding={true}
+                     widgetMetaData={widgetMetaData}
+                     widgetData={widgetData[i]}
+                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
+                  >
+                     <Alert severity={widgetData[i]?.alertType?.toLowerCase()}>{parse(widgetData[i]?.html)}</Alert>
+                  </Widget>
+               )
+            }
             {
                widgetMetaData.type === "usaMap" && (
                   <USMapWidget
@@ -270,8 +349,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 +363,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 +378,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 +395,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 +428,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 +471,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>
@@ -415,6 +508,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}
@@ -436,11 +531,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]} />
+                  </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 +582,92 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                   </Widget>
                )
             }
+            {
+               widgetMetaData.type === "reportSetup" && (
+                  widgetData && widgetData[i] && widgetData[i].queryParams &&
+                  <ReportSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
+                  {}} />
+               )
+            }
+            {
+               widgetMetaData.type === "pivotTableSetup" && (
+                  widgetData && widgetData[i] && widgetData[i].queryParams &&
+                  <PivotTableSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
+                  {}} />
+               )
+            }
          </Box>
       );
+   };
+
+   if (wrapWidgetsInTabPanels)
+   {
+      omitWrappingGridContainer = true;
    }
 
    const body: JSX.Element =
       (
          <>
             {
-               widgetMetaDataList.map((widgetMetaData, i) => (
-                  omitWrappingGridContainer
-                     ? widgetMetaData && renderWidget(widgetMetaData, i)
-                     :
-                     widgetMetaData && <Grid id={widgetMetaData.name} key={`${widgetMetaData.name}-${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
-                        {renderWidget(widgetMetaData, i)}
-                     </Grid>
-               ))
+               widgetMetaDataList.map((widgetMetaData, i) =>
+               {
+                  let renderedWidget = widgetMetaData ? renderWidget(widgetMetaData, i) : (<></>);
+
+                  if (!omitWrappingGridContainer)
+                  {
+                     // @ts-ignore
+                     renderedWidget = (<Grid id={widgetMetaData.name} item xxl={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
+                        {renderedWidget}
+                     </Grid>);
+                  }
+
+                  if (wrapWidgetsInTabPanels)
+                  {
+                     renderedWidget = (<TabPanel index={i} value={selectedTab} style={{
+                        padding: 0,
+                        margin: "-1rem",
+                        width: "calc(100% + 2rem)"
+                     }}>
+                        {renderedWidget}
+                     </TabPanel>);
+                  }
+
+                  return (<React.Fragment key={`${widgetMetaData.name}-${i}`}>{renderedWidget}</React.Fragment>);
+               })
             }
          </>
       );
 
+   const tabs = widgetMetaDataList && wrapWidgetsInTabPanels ?
+      <Tabs
+         sx={{
+            m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
+            "& .MuiTabs-scroller": {
+               ml: 0
+            }
+         }}
+         value={selectedTab}
+         onChange={(event, newValue) => changeTab(newValue)}
+         variant="standard"
+      >
+         {widgetMetaDataList.map((widgetMetaData, i) => (
+            <Tab key={widgetMetaData.name} label={widgetMetaData.label} />
+         ))}
+      </Tabs>
+      : <></>;
+
    return (
       widgetCount > 0 ? (
-         omitWrappingGridContainer ? body :
-            (
-               <Grid container spacing={3} pb={4}>
-                  {body}
-               </Grid>
-            )
+         <>
+            {tabs}
+            {
+               omitWrappingGridContainer ? body : (
+                  <Grid container spacing={2.5}>
+                     {body}
+                  </Grid>
+               )
+            }
+         </>
       ) : null
    );
 }

src/qqq/components/widgets/ParentWidget.tsx

@@ -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,23 @@
 
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {InputLabel} from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
-import LinearProgress from "@mui/material/LinearProgress";
+import 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 +48,11 @@ export interface WidgetData
       id: string,
       label: string
    }[][];
+   dropdownDefaultValueList?: string[];
    dropdownNeedsSelectedText?: string;
    hasPermission?: boolean;
    errorLoading?: boolean;
+
    [other: string]: any;
 }
 
@@ -53,7 +60,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 +72,7 @@ interface Props
    isChild?: boolean;
    footerHTML?: string;
    storeDropdownSelections?: boolean;
+   omitPadding: boolean;
 }
 
 Widget.defaultProps = {
@@ -70,7 +81,11 @@ Widget.defaultProps = {
    widgetMetaData: {},
    widgetData: {},
    labelAdditionalComponentsLeft: [],
+   labelAdditionalElementsLeft: [],
    labelAdditionalComponentsRight: [],
+   labelAdditionalElementsRight: [],
+   labelBoxAdditionalSx: {},
+   omitPadding: false,
 };
 
 
@@ -88,37 +103,140 @@ 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 +246,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 +281,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 +417,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 +438,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 +489,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 +522,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 +569,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 +591,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
             }
          }
 
-         reloadWidget(dropdownData)
+         reloadWidget(dropdownData);
       }
    }
 
@@ -422,26 +619,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 +666,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 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 +749,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 +767,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 display="flex">
+                     {
+                        hasPermission && props.widgetData?.sublabel && (sublabelElement)
+                     }
+                  </Box>
                </Box>
                <Box>
                   {
@@ -540,11 +800,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 +820,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 +836,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,90 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {Alert, Skeleton} from "@mui/material";
+import React from "react";
+import BigNumberBlock from "qqq/components/widgets/blocks/BigNumberBlock";
+import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
+import DividerBlock from "qqq/components/widgets/blocks/DividerBlock";
+import NumberIconBadgeBlock from "qqq/components/widgets/blocks/NumberIconBadgeBlock";
+import ProgressBarBlock from "qqq/components/widgets/blocks/ProgressBarBlock";
+import TableSubRowDetailRowBlock from "qqq/components/widgets/blocks/TableSubRowDetailRowBlock";
+import TextBlock from "qqq/components/widgets/blocks/TextBlock";
+import UpOrDownNumberBlock from "qqq/components/widgets/blocks/UpOrDownNumberBlock";
+import CompositeWidget from "qqq/components/widgets/CompositeWidget";
+
+
+interface WidgetBlockProps
+{
+   widgetMetaData: QWidgetMetaData;
+   block: BlockData;
+}
+
+
+/*******************************************************************************
+ ** Component to render a single Block in the widget framework!
+ *******************************************************************************/
+export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps): JSX.Element
+{
+   if(!block)
+   {
+      return (<Skeleton />);
+   }
+
+   if(!block.values)
+   {
+      block.values = {};
+   }
+
+   if(!block.styles)
+   {
+      block.styles = {};
+   }
+
+   if(block.blockTypeName == "COMPOSITE")
+   {
+      // @ts-ignore - special case for composite type block...
+      return (<CompositeWidget widgetMetaData={widgetMetaData} data={block} />);
+   }
+
+   switch(block.blockTypeName)
+   {
+      case "TEXT":
+         return (<TextBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "NUMBER_ICON_BADGE":
+         return (<NumberIconBadgeBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "UP_OR_DOWN_NUMBER":
+         return (<UpOrDownNumberBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "TABLE_SUB_ROW_DETAIL_ROW":
+         return (<TableSubRowDetailRowBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "PROGRESS_BAR":
+         return (<ProgressBarBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "DIVIDER":
+         return (<DividerBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "BIG_NUMBER":
+         return (<BigNumberBlock widgetMetaData={widgetMetaData} data={block} />);
+      default:
+         return (<Alert sx={{m: "0.5rem"}} color="warning">Unsupported block type: {block.blockTypeName}</Alert>)
+   }
+
+}

src/qqq/components/widgets/WidgetUtils.tsx

@@ -0,0 +1,100 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import Button from "@mui/material/Button";
+import Icon from "@mui/material/Icon";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import colors from "qqq/assets/theme/base/colors";
+import {WidgetData} from "qqq/components/widgets/Widget";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+/*******************************************************************************
+ ** 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 widgetCsvDataToString = (data: WidgetData): string =>
+   {
+      function isNumeric(x: any)
+      {
+         return !isNaN(Number(x));
+      }
+
+      let csv = "";
+      for (let i = 0; i < data.csvData.length; i++)
+      {
+         for (let j = 0; j < data.csvData[i].length; j++)
+         {
+            if (j > 0)
+            {
+               csv += ",";
+            }
+
+            let cell = data.csvData[i][j];
+            if (cell && isNumeric(String(cell)))
+            {
+               csv += cell;
+            }
+            else
+            {
+               csv += `"${ValueUtils.cleanForCsv(cell)}"`;
+            }
+         }
+         csv += "\n";
+      }
+
+      return (csv);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static makeExportFileName = (data: WidgetData, widgetMetaData: QWidgetMetaData): string =>
+   {
+      const fileName = (data?.label ?? widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
+      return (fileName);
+   };
+
+}

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

@@ -0,0 +1,67 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders ... a big number, optionally with some other stuff.
+ **
+ ** ${heading}
+ ** ${number} ${context}
+ *******************************************************************************/
+export default function BigNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   let flexJustifyContent = "normal";
+   let flexAlignItems = "baseline";
+
+   return (
+      <div style={{width: data.styles.width ?? "auto"}}>
+
+         <div style={{fontWeight: "700", fontSize: "0.875rem", color: "#3D3D3D", marginBottom: "-0.5rem"}}>
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
+               <span>{data.values.heading}</span>
+            </BlockElementWrapper>
+         </div>
+
+         <div style={{display: "flex", alignItems: flexAlignItems, justifyContent: flexJustifyContent}}>
+
+            <div style={{display: "flex", alignItems: "baseline"}}>
+               <div style={{fontWeight: "700", fontSize: "2rem", marginRight: "0.25rem"}}>
+                  <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
+                     <span style={{color: data.styles.numberColor}}>{data.values.number}</span>
+                  </BlockElementWrapper>
+               </div>
+               {
+                  data.values.context &&
+                  <div style={{fontWeight: "500", fontSize: "0.875rem", color: "#7b809a"}}>
+                     <BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
+                        <span>{data.values.context}</span>
+                     </BlockElementWrapper>
+                  </div>
+               }
+            </div>
+
+         </div>
+      </div>
+   );
+}

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

@@ -0,0 +1,106 @@
+/*
+ * 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 {Tooltip} from "@mui/material";
+import React, {ReactElement, useContext} from "react";
+import {Link} from "react-router-dom";
+import QContext from "QContext";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
+import {BlockData, BlockLink, BlockTooltip} from "qqq/components/widgets/blocks/BlockModels";
+
+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)
+   {
+      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
+      rs = <Tooltip title={tooltip.title} placement={placement}>{rs}</Tooltip>
+   }
+
+   return (rs);
+}

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

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

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

@@ -0,0 +1,33 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders a simple dividing line
+ ** margins & width are set such that it covers the padding of a card.
+ ** if we need to use it differently, a style attribute should be added to its backend data.
+ *******************************************************************************/
+export default function DividerBlock({}: StandardBlockComponentProps): JSX.Element
+{
+   return (<div style={{margin: "1rem -1rem", width: "calc(100% + 2rem)", borderBottom: "1px solid #E0E0E0"}} />);
+}

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

@@ -0,0 +1,48 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Icon from "@mui/material/Icon";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+/*******************************************************************************
+ ** Block that renders ... a number, and an icon, like a badge.
+ **
+ ** ${number} ${icon}
+ *******************************************************************************/
+export default function NumberIconBadgeBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <div style={{display: "inline-block", whiteSpace: "nowrap", color: data.styles.color}}>
+         {
+            data.values.number &&
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
+               <span style={{color: data.styles.color, fontSize: "0.875rem"}}>{data.values.number}</span>
+            </BlockElementWrapper>
+         }
+         {
+            data.values.iconName &&
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="icon">
+               <Icon style={{color: data.styles.color, fontSize: "1rem", position: "relative", top: "3px"}}>{data.values.iconName}</Icon>
+            </BlockElementWrapper>
+         }
+      </div>);
+}

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

@@ -0,0 +1,70 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Typography from "@mui/material/Typography";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders a progress bar!
+ **
+ ** Values:
+ **    ${heading}
+ **    [${percent}===___] ${value ?? percent}
+ **
+ ** Slots:
+ **    ${heading}
+ **    ${bar}             ${value}
+ *******************************************************************************/
+export default function ProgressBarBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <Typography component="div" variant="button" color="text" fontWeight="light" sx={{textTransform: "none"}}>
+         {
+            data.values.heading &&
+            <div style={{marginBottom: "0.25rem", fontWeight: 500, color: "#3D3D3D"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
+                  <span>{data.values.heading}</span>
+               </BlockElementWrapper>
+            </div>
+         }
+
+         <div style={{display: "flex", alignItems: "center", marginBottom: "0.75rem"}}>
+
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="bar" linkProps={{style: {width: "100%"}}}>
+               <div style={{background: "#E0E0E0", width: "100%", borderRadius: "0.5rem", height: "1rem"}}>
+                  {
+                     data.values.percent > 0 ? <div style={{background: data.styles.barColor ?? "#0062ff", minWidth: "1rem", width: `${data.values.percent}%`, borderRadius: "0.5rem", height: "1rem"}}></div> : <></>
+                  }
+               </div>
+            </BlockElementWrapper>
+
+            <div style={{width: "60px", textAlign: "right", fontWeight: 600, color: "#3D3D3D"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
+                  <span>{data.values.value ?? `${(data.values.percent as number).toFixed(1)}%`}</span>
+               </BlockElementWrapper>
+            </div>
+
+         </div>
+      </Typography>);
+
+}

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

@@ -0,0 +1,54 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders a label & value, meant to be used as a detail-row in a
+ ** sub-row within a table widget
+ **
+ ** ${label} ${value}
+ *******************************************************************************/
+export default function TableSubRowDetailRowBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <div style={{display: "flex", maxWidth: "calc(100% - 24px)", justifyContent: "space-between"}}>
+
+         {
+            data.values.label &&
+            <div style={{overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="label">
+                  <span style={{color: data.styles.labelColor}}>{data.values.label}</span>
+               </BlockElementWrapper>
+            </div>
+         }
+
+         {
+            data.values.value &&
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
+               <span style={{color: data.styles.valueColor}}>{data.values.value}</span>
+            </BlockElementWrapper>
+         }
+      </div>
+   );
+}

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

@@ -0,0 +1,37 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+/*******************************************************************************
+ ** Block that renders ... just some text.
+ **
+ ** ${text}
+ *******************************************************************************/
+export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+         <span style={{fontSize: "1.000rem"}}>{data.values.text}</span>
+      </BlockElementWrapper>
+   );
+}

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

@@ -0,0 +1,81 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Icon from "@mui/material/Icon";
+import React from "react";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders an up/down icon, a number, and some context
+ **
+ ** ${icon} ${number} ${context}
+ *
+ ** or, if style.isStacked:
+ *
+ ** ${icon} ${number}
+ ** ${context}
+ *******************************************************************************/
+export default function UpOrDownNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   if (!data.styles)
+   {
+      data.styles = {};
+   }
+
+   if (!data.values)
+   {
+      data.values = {};
+   }
+
+   const UP_ICON = "arrow_drop_up";
+   const DOWN_ICON = "arrow_drop_down";
+
+   const defaultGreenColor = "#2BA83F";
+   const defaultRedColor = "#FB4141";
+
+   const goodOrBadColor = data.styles.colorOverride ?? (data.values.isGood ? defaultGreenColor : defaultRedColor);
+   const iconName = data.values.isUp ? UP_ICON : DOWN_ICON;
+
+   return (
+      <>
+         <div style={{display: "flex", flexDirection: data.styles.isStacked ? "column" : "row", alignItems: data.styles.isStacked ? "flex-end" : "baseline"}}>
+
+            <div style={{display: "flex", alignItems: "baseline", fontWeight: 700, fontSize: ".875rem"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
+                  <>
+                     <Icon sx={{color: goodOrBadColor, alignSelf: "flex-end", fontSize: "2.25rem !important", lineHeight: "0.875rem", height: "1rem", width: "2rem",}}>{iconName}</Icon>
+                     <span style={{color: goodOrBadColor}}>{data.values.number}</span>
+                  </>
+               </BlockElementWrapper>
+            </div>
+
+            <div style={{fontWeight: 500, fontSize: "0.875rem", color: "#7b809a", marginLeft: "0.25rem"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
+                  <span>{data.values.context}</span>
+               </BlockElementWrapper>
+            </div>
+
+         </div>
+      </>
+   );
+}

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

@@ -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;

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

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

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

@@ -0,0 +1,209 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Icon from "@mui/material/Icon";
+import type {Identifier, XYCoord} from "dnd-core";
+import colors from "qqq/assets/theme/base/colors";
+import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
+import {DragItemTypes, fieldAutoCompleteTextFieldSX, getSelectedFieldForAutoComplete, xIconButtonSX} from "qqq/components/widgets/misc/PivotTableSetupWidget";
+import {PivotTableDefinition, PivotTableGroupBy} from "qqq/models/misc/PivotTableDefinitionModels";
+import React, {FC, useRef} from "react";
+import {useDrag, useDrop} from "react-dnd";
+
+
+/*******************************************************************************
+ ** component props
+ *******************************************************************************/
+export interface PivotTableGroupByElementProps
+{
+   id: string;
+   index: number;
+   dragCallback: (rowsOrColumns: "rows" | "columns", dragIndex: number, hoverIndex: number) => void;
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+   pivotTableDefinition: PivotTableDefinition;
+   usedGroupByFieldNames: string[];
+   availableFieldNames: string[];
+   isEditable: boolean;
+   groupBy: PivotTableGroupBy;
+   rowsOrColumns: "rows" | "columns";
+   callback: () => void;
+   attemptedSubmit?: boolean;
+}
+
+
+/*******************************************************************************
+ ** item to support react-dnd
+ *******************************************************************************/
+interface DragItem
+{
+   index: number;
+   id: string;
+   type: string;
+}
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id, index, dragCallback, rowsOrColumns, metaData, tableMetaData, pivotTableDefinition, groupBy, usedGroupByFieldNames, availableFieldNames, isEditable, callback, attemptedSubmit}) =>
+{
+   ////////////////////////////////////////////////////////////////////////////
+   // credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
+   ////////////////////////////////////////////////////////////////////////////
+   const ref = useRef<HTMLDivElement>(null);
+   const [{handlerId}, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>(
+      {
+         accept: rowsOrColumns == "rows" ? DragItemTypes.ROW : DragItemTypes.COLUMN,
+         collect(monitor)
+         {
+            return {
+               handlerId: monitor.getHandlerId(),
+            };
+         },
+         hover(item: DragItem, monitor)
+         {
+            if (!ref.current)
+            {
+               return;
+            }
+            const dragIndex = item.index;
+            const hoverIndex = index;
+
+            // Don't replace items with themselves
+            if (dragIndex === hoverIndex)
+            {
+               return;
+            }
+
+            // Determine rectangle on screen
+            const hoverBoundingRect = ref.current?.getBoundingClientRect();
+
+            // Get vertical middle
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+            // Determine mouse position
+            const clientOffset = monitor.getClientOffset();
+
+            // Get pixels to the top
+            const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
+
+            // Only perform the move when the mouse has crossed half of the items height
+            // When dragging downwards, only move when the cursor is below 50%
+            // When dragging upwards, only move when the cursor is above 50%
+
+            // Dragging downwards
+            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY)
+            {
+               return;
+            }
+
+            // Dragging upwards
+            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY)
+            {
+               return;
+            }
+
+            // Time to actually perform the action
+            dragCallback(rowsOrColumns, dragIndex, hoverIndex);
+
+            // Note: we're mutating the monitor item here! Generally it's better to avoid mutations,
+            // but it's good here for the sake of performance to avoid expensive index searches.
+            item.index = hoverIndex;
+         },
+      });
+
+   const [{isDragging}, drag, preview] = useDrag({
+      type: rowsOrColumns == "rows" ? DragItemTypes.ROW : DragItemTypes.COLUMN,
+      item: () =>
+      {
+         return {id, index};
+      },
+      collect: (monitor: any) => ({
+         isDragging: monitor.isDragging(),
+      }),
+   });
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const handleFieldChange = (event: any, newValue: any, reason: string) =>
+   {
+      groupBy.fieldName = newValue ? newValue.fieldName : null;
+      callback();
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function removeGroupBy(index: number, rowsOrColumns: "rows" | "columns")
+   {
+      pivotTableDefinition[rowsOrColumns].splice(index, 1);
+      callback();
+   }
+
+   if (!isEditable)
+   {
+      const selectedField = getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName);
+      if (selectedField)
+      {
+         const label = selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label;
+         return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
+      }
+
+      return (<React.Fragment />);
+   }
+
+   preview(drop(ref));
+
+   const showError = attemptedSubmit && !groupBy.fieldName;
+
+   return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
+      <Box>
+         <Icon ref={drag} sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
+      </Box>
+      <Box width="100%">
+         <FieldAutoComplete
+            id={`${rowsOrColumns}-${index}`}
+            label={null}
+            variant="outlined"
+            textFieldSX={fieldAutoCompleteTextFieldSX}
+            metaData={metaData}
+            tableMetaData={tableMetaData}
+            handleFieldChange={handleFieldChange}
+            hiddenFieldNames={usedGroupByFieldNames}
+            availableFieldNames={availableFieldNames}
+            defaultValue={getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName)}
+            hasError={showError}
+            noOptionsText="There are no fields available."
+         />
+      </Box>
+      <Box>
+         <Button sx={xIconButtonSX} onClick={() => removeGroupBy(index, rowsOrColumns)}><Icon>clear</Icon></Button>
+      </Box>
+   </Box>);
+};

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

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

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

@@ -0,0 +1,319 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Icon from "@mui/material/Icon";
+import TextField from "@mui/material/TextField";
+import type {Identifier, XYCoord} from "dnd-core";
+import colors from "qqq/assets/theme/base/colors";
+import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
+import {DragItemTypes, fieldAutoCompleteTextFieldSX, getSelectedFieldForAutoComplete, xIconButtonSX} from "qqq/components/widgets/misc/PivotTableSetupWidget";
+import {functionsPerFieldType, PivotTableDefinition, pivotTableFunctionLabels, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
+import React, {FC, useReducer, useRef, useState} from "react";
+import {useDrag, useDrop} from "react-dnd";
+
+
+/*******************************************************************************
+ ** component props
+ *******************************************************************************/
+export interface PivotTableValueElementProps
+{
+   id: string;
+   index: number;
+   dragCallback: (dragIndex: number, hoverIndex: number) => void;
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+   pivotTableDefinition: PivotTableDefinition;
+   availableFieldNames: string[];
+   usedGroupByFieldNames: string[];
+   isEditable: boolean;
+   value: PivotTableValue;
+   callback: () => void;
+   attemptedSubmit?: boolean;
+}
+
+
+/*******************************************************************************
+ ** item to support react-dnd
+ *******************************************************************************/
+interface DragItem
+{
+   index: number;
+   id: string;
+   type: string;
+}
+
+
+/*******************************************************************************
+ ** Element to render 1 pivot-table value.
+ *******************************************************************************/
+export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, index, dragCallback, metaData, tableMetaData, pivotTableDefinition, availableFieldNames, usedGroupByFieldNames, value, isEditable, callback, attemptedSubmit}) =>
+{
+   const [defaultFunctionValue, setDefaultFunctionValue] = useState(null);
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+   ////////////////////////////////////////////////////////////////////////////
+   // credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
+   ////////////////////////////////////////////////////////////////////////////
+   const ref = useRef<HTMLDivElement>(null);
+   const [{handlerId}, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>(
+      {
+         accept: DragItemTypes.VALUE,
+         collect(monitor)
+         {
+            return {
+               handlerId: monitor.getHandlerId(),
+            };
+         },
+         hover(item: DragItem, monitor)
+         {
+            if (!ref.current)
+            {
+               return;
+            }
+            const dragIndex = item.index;
+            const hoverIndex = index;
+
+            // Don't replace items with themselves
+            if (dragIndex === hoverIndex)
+            {
+               return;
+            }
+
+            // Determine rectangle on screen
+            const hoverBoundingRect = ref.current?.getBoundingClientRect();
+
+            // Get vertical middle
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+            // Determine mouse position
+            const clientOffset = monitor.getClientOffset();
+
+            // Get pixels to the top
+            const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
+
+            // Only perform the move when the mouse has crossed half of the items height
+            // When dragging downwards, only move when the cursor is below 50%
+            // When dragging upwards, only move when the cursor is above 50%
+
+            // Dragging downwards
+            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY)
+            {
+               return;
+            }
+
+            // Dragging upwards
+            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY)
+            {
+               return;
+            }
+
+            // Time to actually perform the action
+            dragCallback(dragIndex, hoverIndex);
+
+            // Note: we're mutating the monitor item here! Generally it's better to avoid mutations,
+            // but it's good here for the sake of performance to avoid expensive index searches.
+            item.index = hoverIndex;
+         },
+      });
+
+   const [{isDragging}, drag] = useDrag({
+      type: DragItemTypes.VALUE,
+      item: () =>
+      {
+         return {id, index};
+      },
+      collect: (monitor: any) => ({
+         isDragging: monitor.isDragging(),
+      }),
+   });
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getFunctionsForField(field: QFieldMetaData)
+   {
+      if(field)
+      {
+         let type = field.type;
+         if (field.possibleValueSourceName)
+         {
+            type = QFieldType.STRING;
+         }
+
+         if(functionsPerFieldType[type])
+         {
+            return (functionsPerFieldType[type]);
+         }
+      }
+
+      //////////////////////////////////////
+      // return broadest list if no field //
+      //////////////////////////////////////
+      return (functionsPerFieldType[QFieldType.INTEGER]);
+   }
+
+
+   /*******************************************************************************
+    ** event handler for user selecting a field
+    *******************************************************************************/
+   function handleFieldChange(event: any, newValue: any, reason: string)
+   {
+      value.fieldName = newValue ? newValue.fieldName : null;
+
+      if(newValue)
+      {
+         /////////////////////////////////////////////////////////////////////////////////////////
+         // if newly selected field doesn't have the currently selected function, then clear it //
+         /////////////////////////////////////////////////////////////////////////////////////////
+         const newSelectedField = getSelectedFieldForAutoComplete(tableMetaData, newValue.fieldName);
+         if (newSelectedField)
+         {
+            if(getFunctionsForField(newSelectedField.field).indexOf(value.function) == -1)
+            {
+               setDefaultFunctionValue(null);
+               handleFunctionChange(null, null, null);
+               forceUpdate();
+            }
+         }
+      }
+
+      callback();
+   }
+
+
+   /*******************************************************************************
+    ** event handler for user selecting a function
+    *******************************************************************************/
+   function handleFunctionChange(event: any, newValue: any, reason: string)
+   {
+      value.function = newValue ? newValue.id : null;
+      callback();
+   }
+
+
+   /*******************************************************************************
+    ** event handler for clicking remove button
+    *******************************************************************************/
+   function removeValue(index: number)
+   {
+      pivotTableDefinition.values.splice(index, 1);
+      callback();
+   }
+
+   const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
+
+   /////////////////////////////////////////////////////////////////////
+   // if we're not on an edit screen, return a simpler read-only view //
+   /////////////////////////////////////////////////////////////////////
+   if (!isEditable)
+   {
+      let label = "--";
+      if (selectedField && value.function)
+      {
+         label = pivotTableFunctionLabels[value.function] + " of " + (selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label);
+      }
+
+      return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
+   }
+
+   ///////////////////////////////////////////////////////////////////////////////
+   // figure out functions to display in drop down, plus selected/default value //
+   ///////////////////////////////////////////////////////////////////////////////
+   const functionOptions: any[] = [];
+   const availableFunctions = getFunctionsForField(selectedField?.field);
+   for (let pivotTableFunction of availableFunctions)
+   {
+      const label = pivotTableFunctionLabels[pivotTableFunction];
+      const option = {id: pivotTableFunction, label: label};
+      functionOptions.push(option);
+
+      if (option.id == value.function && JSON.stringify(option) != JSON.stringify(defaultFunctionValue))
+      {
+         setDefaultFunctionValue(option);
+      }
+   }
+
+   drag(drop(ref));
+
+   const showValueError = attemptedSubmit && !value.fieldName;
+   const showFunctionError = attemptedSubmit && !value.function;
+
+   return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
+      <Box>
+         <Icon sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
+      </Box>
+      <Box width="100%">
+         <FieldAutoComplete
+            id={`values-field-${index}`}
+            label={null}
+            variant="outlined"
+            textFieldSX={fieldAutoCompleteTextFieldSX}
+            metaData={metaData}
+            tableMetaData={tableMetaData}
+            handleFieldChange={handleFieldChange}
+            availableFieldNames={availableFieldNames}
+            hiddenFieldNames={usedGroupByFieldNames}
+            defaultValue={selectedField}
+            hasError={showValueError}
+            noOptionsText="There are no fields available."
+         />
+      </Box>
+      <Box width="370px">
+         <Autocomplete
+            id={`values-function-${index}`}
+            renderInput={(params) =>
+            {
+               const inputProps = params.InputProps;
+               const originalEndAdornment = inputProps.endAdornment;
+               inputProps.endAdornment = <Box>
+                  {showFunctionError && <Icon color="error">error_outline</Icon>}
+                  {originalEndAdornment}
+               </Box>;
+
+               return (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={inputProps} />)
+            }}
+            // @ts-ignore
+            value={defaultFunctionValue}
+            inputValue={defaultFunctionValue?.label ?? ""}
+            options={functionOptions}
+            onChange={handleFunctionChange}
+            isOptionEqualToValue={(option, value) => option.id === value.id}
+            getOptionLabel={(option) => option.label}
+            autoSelect={true}
+            autoHighlight={true}
+            disableClearable
+         />
+      </Box>
+      <Box>
+         <Button sx={xIconButtonSX} onClick={() => removeValue(index)}><Icon>clear</Icon></Button>
+      </Box>
+   </Box>);
+
+};

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

@@ -22,31 +22,66 @@
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {DataGridPro, GridCallbackDetails, GridRowParams, MuiEvent} from "@mui/x-data-grid-pro";
-import React, {useEffect, useState} from "react";
-import {useNavigate} from "react-router-dom";
-import Widget, {AddNewRecordButton, ExportDataButton, HeaderLink, LabelComponent} from "qqq/components/widgets/Widget";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
+import Typography from "@mui/material/Typography";
+import {DataGridPro, GridCallbackDetails, GridEventListener, GridRenderCellParams, GridRowParams, GridToolbarContainer, MuiEvent, useGridApiContext, useGridApiEventHandler} from "@mui/x-data-grid-pro";
+import Widget, {AddNewRecordButton, LabelComponent, WidgetData} from "qqq/components/widgets/Widget";
 import DataGridUtils from "qqq/utils/DataGridUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useEffect, useRef, useState} from "react";
+import {Link, useNavigate} from "react-router-dom";
+
+export interface ChildRecordListData extends WidgetData
+{
+   title: string;
+   queryOutput: {records: {values: any}[]}
+   childTableMetaData: QTableMetaData;
+   tablePath: string;
+   viewAllLink: string;
+   totalRows: number;
+   canAddChildRecord: boolean;
+   defaultValuesForNewChildRecords: {[fieldName: string]: any};
+   disabledFieldsForNewChildRecords: {[fieldName: string]: any};
+}
 
 interface Props
 {
    widgetMetaData: QWidgetMetaData;
-   data: any;
+   data: ChildRecordListData;
+   addNewRecordCallback?: () => void;
+   disableRowClick: boolean;
+   allowRecordEdit: boolean;
+   editRecordCallback?: (rowIndex: number) => void;
+   allowRecordDelete: boolean;
+   deleteRecordCallback?: (rowIndex: number) => void;
 }
 
-RecordGridWidget.defaultProps = {};
+RecordGridWidget.defaultProps =
+   {
+      disableRowClick: false,
+      allowRecordEdit: false,
+      allowRecordDelete: false
+   };
 
 const qController = Client.getInstance();
 
-function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
+function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRowClick, allowRecordEdit, editRecordCallback, allowRecordDelete, deleteRecordCallback}: Props): JSX.Element
 {
+   const instance = useRef({timer: null});
    const [rows, setRows] = useState([]);
    const [records, setRecords] = useState([] as QRecord[])
    const [columns, setColumns] = useState([]);
    const [allColumns, setAllColumns] = useState([])
+   const [csv, setCsv] = useState(null as string);
+   const [fileName, setFileName] = useState(null as string);
+   const [gridMouseDownX, setGridMouseDownX] = useState(0);
+   const [gridMouseDownY, setGridMouseDownY] = useState(0);
    const navigate = useNavigate();
 
    useEffect(() =>
@@ -64,7 +99,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          }
 
          const tableMetaData = new QTableMetaData(data.childTableMetaData);
-         const rows = DataGridUtils.makeRows(records, tableMetaData);
+         const rows = DataGridUtils.makeRows(records, tableMetaData, true);
 
          /////////////////////////////////////////////////////////////////////////////////
          // note - tablePath may be null, if the user doesn't have access to the table. //
@@ -75,6 +110,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////
          // capture all-columns to use for the export (before we might splice some away from the on-screen display) //
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         const allColumns = [... columns];
          setAllColumns(JSON.parse(JSON.stringify(columns)));
 
          ////////////////////////////////////////////////////////////////
@@ -92,42 +128,67 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
             }
          }
 
+         ////////////////////////////////////
+         // add actions cell, if available //
+         ////////////////////////////////////
+         if(allowRecordEdit || allowRecordDelete)
+         {
+            columns.unshift({
+               field: "_actions",
+               type: "string",
+               headerName: "Actions",
+               sortable: false,
+               filterable: false,
+               width: allowRecordEdit && allowRecordDelete ? 80 : 50,
+               renderCell: ((params: GridRenderCellParams) =>
+               {
+                  return <Box>
+                     {allowRecordEdit && <IconButton onClick={() => editRecordCallback(params.row.__rowIndex)}><Icon>edit</Icon></IconButton>}
+                     {allowRecordDelete && <IconButton onClick={() => deleteRecordCallback(params.row.__rowIndex)}><Icon>delete</Icon></IconButton>}
+                  </Box>
+               })
+            })
+         }
+
          setRows(rows);
          setRecords(records)
          setColumns(columns);
-      }
-   }, [data]);
 
-   const exportCallback = () =>
-   {
-      let csv = "";
-      for (let i = 0; i < allColumns.length; i++)
-      {
-         csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`
-      }
-      csv += "\n";
-
-      for (let i = 0; i < records.length; i++)
-      {
-         for (let j = 0; j < allColumns.length; j++)
+         let csv = "";
+         for (let i = 0; i < allColumns.length; i++)
          {
-            const value = records[i].displayValues.get(allColumns[j].field) ?? records[i].values.get(allColumns[j].field)
-            csv += `${j > 0 ? "," : ""}"${ValueUtils.cleanForCsv(value)}"`
+            csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`
          }
          csv += "\n";
-      }
 
-      const fileName = (data?.label ?? widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
-      HtmlUtils.download(fileName, csv);
-   }
+         for (let i = 0; i < records.length; i++)
+         {
+            for (let j = 0; j < allColumns.length; j++)
+            {
+               const value = records[i].displayValues.get(allColumns[j].field) ?? records[i].values.get(allColumns[j].field)
+               csv += `${j > 0 ? "," : ""}"${ValueUtils.cleanForCsv(value)}"`
+            }
+            csv += "\n";
+         }
+
+         const fileName = (data?.label ?? widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
+
+         setCsv(csv);
+         setFileName(fileName);
+      }
+   }, [data]);
 
    ///////////////////
    // view all link //
    ///////////////////
-   const labelAdditionalComponentsLeft: LabelComponent[] = []
+   const labelAdditionalElementsLeft: JSX.Element[] = [];
    if(data && data.viewAllLink)
    {
-      labelAdditionalComponentsLeft.push(new HeaderLink("View All", data.viewAllLink));
+      labelAdditionalElementsLeft.push(
+         <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
+            <Link to={data.viewAllLink}>View All</Link>
+         </Typography>
+      )
    }
 
    ///////////////////
@@ -149,7 +210,26 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
       }
    }
 
-   labelAdditionalComponentsLeft.push(new ExportDataButton(() => exportCallback(), isExportDisabled, tooltipTitle))
+   const onExportClick = () =>
+   {
+      if(csv)
+      {
+         HtmlUtils.download(fileName, csv);
+      }
+      else
+      {
+         alert("There is no data available to export.")
+      }
+   }
+
+   if(widgetMetaData?.showExportButton)
+   {
+      labelAdditionalElementsLeft.push(
+         <Typography key={1} variant="body2" px={0} display="inline" position="relative">
+            <Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></Tooltip>
+         </Typography>
+      );
+   }
 
    ////////////////////
    // add new button //
@@ -162,65 +242,112 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
       {
          disabledFields = data.defaultValuesForNewChildRecords;
       }
-      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields))
+      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback))
    }
 
 
+   /////////////////////////////////////////////////////////////////
+   // if a grid preference window is open, ignore and reset timer //
+   /////////////////////////////////////////////////////////////////
    const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
    {
+      if(disableRowClick)
+      {
+         return;
+      }
+
       (async () =>
       {
          const qInstance = await qController.loadMetaData()
-         const tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
+         let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
          if(tablePath)
          {
-            navigate(`${tablePath}/${params.id}`);
+            tablePath = `${tablePath}/${params.row[data.childTableMetaData.primaryKeyField]}`;
+            DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance);
          }
       })();
    };
 
+   /*******************************************************************************
+    ** So that we can useGridApiContext to add event handlers for mouse down and
+    ** row double-click (to make it so you don't accidentally click into records),
+    ** we have to define a grid component, so even though we don't want a custom
+    ** toolbar, that's why we have this (and why it returns empty)
+    *******************************************************************************/
+   function CustomToolbar()
+   {
+      const handleMouseDown: GridEventListener<"cellMouseDown"> = ( params, event, details ) =>
+      {
+         setGridMouseDownX(event.clientX);
+         setGridMouseDownY(event.clientY);
+         clearTimeout(instance.current.timer);
+      };
+
+      const handleDoubleClick: GridEventListener<"rowDoubleClick"> = (event: any) =>
+      {
+         clearTimeout(instance.current.timer);
+      };
+
+      const apiRef = useGridApiContext();
+      useGridApiEventHandler(apiRef, "cellMouseDown", handleMouseDown);
+      useGridApiEventHandler(apiRef, "rowDoubleClick", handleDoubleClick);
+
+      return (<GridToolbarContainer />);
+   }
+
 
    return (
       <Widget
          widgetMetaData={widgetMetaData}
          widgetData={data}
-         labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
+         labelAdditionalElementsLeft={labelAdditionalElementsLeft}
          labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+         labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
       >
-         <DataGridPro
-            autoHeight
-            rows={rows}
-            disableSelectionOnClick
-            columns={columns}
-            rowBuffer={10}
-            getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
-            onRowClick={handleRowClick}
-            // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
-            // components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
-            // pinnedColumns={pinnedColumns}
-            // onPinnedColumnsChange={handlePinnedColumnsChange}
-            // pagination
-            // paginationMode="server"
-            // rowsPerPageOptions={[20]}
-            // sortingMode="server"
-            // filterMode="server"
-            // page={pageNumber}
-            // checkboxSelection
-            rowCount={data && data.totalRows}
-            // onPageSizeChange={handleRowsPerPageChange}
-            // onStateChange={handleStateChange}
-            // density={density}
-            // loading={loading}
-            // filterModel={filterModel}
-            // onFilterModelChange={handleFilterChange}
-            // columnVisibilityModel={columnVisibilityModel}
-            // onColumnVisibilityModelChange={handleColumnVisibilityChange}
-            // onColumnOrderChange={handleColumnOrderChange}
-            // onSelectionModelChange={selectionChanged}
-            // onSortModelChange={handleSortChange}
-            // sortingOrder={[ "asc", "desc" ]}
-            // sortModel={columnSortModel}
-         />
+         <Box mx={-2} mb={-3}>
+            <DataGridPro
+               autoHeight
+               sx={{
+                  borderBottom: "none",
+                  borderLeft: "none",
+                  borderRight: "none"
+               }}
+               rows={rows}
+               disableSelectionOnClick
+               columns={columns}
+               rowBuffer={10}
+               getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
+               onRowClick={handleRowClick}
+               getRowId={(row) => row.__rowIndex}
+               // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
+               components={{
+                  Toolbar: CustomToolbar
+               }}
+               // pinnedColumns={pinnedColumns}
+               // onPinnedColumnsChange={handlePinnedColumnsChange}
+               // pagination
+               // paginationMode="server"
+               // rowsPerPageOptions={[20]}
+               // sortingMode="server"
+               // filterMode="server"
+               // page={pageNumber}
+               // checkboxSelection
+               rowCount={data && data.totalRows}
+               // onPageSizeChange={handleRowsPerPageChange}
+               // onStateChange={handleStateChange}
+               // density={density}
+               // loading={loading}
+               // filterModel={filterModel}
+               // onFilterModelChange={handleFilterChange}
+               // columnVisibilityModel={columnVisibilityModel}
+               // onColumnVisibilityModelChange={handleColumnVisibilityChange}
+               // onColumnOrderChange={handleColumnOrderChange}
+               // onSelectionModelChange={selectionChanged}
+               // onSortModelChange={handleSortChange}
+               // sortingOrder={[ "asc", "desc" ]}
+               // sortModel={columnSortModel}
+            />
+         </Box>
       </Widget>
    );
 }

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

@@ -0,0 +1,374 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {Alert, Collapse} from "@mui/material";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import Modal from "@mui/material/Modal";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
+import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
+import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
+import AdvancedQueryPreview from "qqq/components/query/AdvancedQueryPreview";
+import {getCurrentSortIndicator} from "qqq/components/query/BasicAndAdvancedQueryControls";
+import Widget, {HeaderLinkButtonComponent} from "qqq/components/widgets/Widget";
+import QQueryColumns, {Column} from "qqq/models/query/QQueryColumns";
+import RecordQuery from "qqq/pages/records/query/RecordQuery";
+import Client from "qqq/utils/qqq/Client";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import React, {useContext, useEffect, useRef, useState} from "react";
+
+interface ReportSetupWidgetProps
+{
+   isEditable: boolean;
+   widgetMetaData: QWidgetMetaData;
+   recordValues: {[name: string]: any};
+   onSaveCallback?: (values: {[name: string]: any}) => void;
+}
+
+ReportSetupWidget.defaultProps = {
+   onSaveCallback: null
+};
+
+export const buttonSX =
+   {
+      border: `1px solid ${colors.grayLines.main} !important`,
+      borderRadius: "0.75rem",
+      textTransform: "none",
+      fontSize: "1rem",
+      fontWeight: "400",
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+      opacity: "1",
+      color: colors.dark.main,
+      "&:hover": {color: colors.dark.main},
+      "&:focus": {color: colors.dark.main},
+      "&:focus:not(:hover)": {color: colors.dark.main},
+   };
+
+export const unborderedButtonSX = Object.assign({}, buttonSX);
+unborderedButtonSX.border = "none !important";
+unborderedButtonSX.opacity = "0.7";
+
+
+const qController = Client.getInstance();
+
+/*******************************************************************************
+ ** Component for editing the main setup of a report - that is: filter & columns
+ *******************************************************************************/
+export default function ReportSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: ReportSetupWidgetProps): JSX.Element
+{
+   const [modalOpen, setModalOpen] = useState(false);
+   const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
+
+   const [alertContent, setAlertContent] = useState(null as string);
+
+   //////////////////////////////////////////////////////////////////////////////////////////////////
+   // we'll actually keep 2 copies of the query filter around here -                               //
+   // the one in the record (as json) is one that the backend likes (e.g., possible values as ids) //
+   // this "frontend" one is one that the frontend can use (possible values as objects w/ labels). //
+   //////////////////////////////////////////////////////////////////////////////////////////////////
+   const [frontendQueryFilter, setFrontendQueryFilter] = useState(null as QQueryFilter);
+
+   const {helpHelpActive} = useContext(QContext);
+
+   const recordQueryRef = useRef();
+
+   /////////////////////////////
+   // load values from record //
+   /////////////////////////////
+   let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
+   let usingDefaultEmptyFilter = false;
+   if(!queryFilter)
+   {
+      queryFilter = new QQueryFilter();
+      usingDefaultEmptyFilter = true;
+   }
+
+   let columns: QQueryColumns = null;
+   if(recordValues["columnsJson"])
+   {
+      columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
+   }
+
+   //////////////////////////////////////////////////////////////////////
+   // load tableMetaData initially, and if/when selected table changes //
+   //////////////////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
+      {
+         (async () =>
+         {
+            const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"])
+            setTableMetaData(tableMetaData);
+
+            const queryFilterForFrontend = Object.assign({}, queryFilter);
+            await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend)
+            setFrontendQueryFilter(queryFilterForFrontend)
+         })();
+      }
+   }, [recordValues]);
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openEditor()
+   {
+      if(recordValues["tableName"])
+      {
+         setModalOpen(true);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function saveClicked()
+   {
+      if(!onSaveCallback)
+      {
+         console.log("onSaveCallback was not defined");
+         return;
+      }
+
+      // @ts-ignore possibly 'undefined'.
+      const view = recordQueryRef?.current?.getCurrentView();
+
+      view.queryColumns.sortColumnsFixingPinPositions();
+
+      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // keep the query filter that came from the recordQuery screen as the front-end version (w/ possible value objects) //
+      // but prep a copy of it for the backend, to stringify as json in the record being edited                           //
+      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      setFrontendQueryFilter(view.queryFilter);
+      const filter = FilterUtils.prepQueryFilterForBackend(tableMetaData, view.queryFilter);
+
+      onSaveCallback({queryFilterJson: JSON.stringify(filter), columnsJson: JSON.stringify(view.queryColumns)});
+
+      closeEditor();
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
+   {
+      if(reason == "backdropClick" || reason == "escapeKeyDown")
+      {
+         return;
+      }
+
+      setModalOpen(false);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderColumn(column: Column): JSX.Element
+   {
+      const [field, table] = FilterUtils.getField(tableMetaData, column.name)
+
+      if(!column || !column.isVisible || column.name == "__check__" || !field)
+      {
+         return (<React.Fragment />);
+      }
+
+      const tableLabelPart = table.name != tableMetaData.name ? table.label + ": " : "";
+
+      return (<Box mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">
+         {tableLabelPart}{field.label}
+      </Box>);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function mayShowQueryPreview(): boolean
+   {
+      if(tableMetaData)
+      {
+         if(frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
+         {
+            return (true);
+         }
+      }
+
+      return (false);
+   }
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function mayShowColumnsPreview(): boolean
+   {
+      if(tableMetaData)
+      {
+         for(let i = 0; i<columns?.columns?.length; i++)
+         {
+            if(columns.columns[i].isVisible && columns.columns[i].name != "__check__")
+            {
+               return (true);
+            }
+         }
+      }
+
+      return (false);
+   }
+
+   const helpRoles = isEditable ? [recordValues["id"] ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"] : ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function showHelp(slot: string)
+   {
+      return (helpHelpActive || hasHelpContent(widgetMetaData?.helpContent?.get(slot), helpRoles));
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getHelpContent(slot: string)
+   {
+      const key = `widget:${widgetMetaData.name};slot:${slot}`;
+      return <HelpContent helpContents={widgetMetaData?.helpContent?.get(slot)} roles={helpRoles} helpContentKey={key} />;
+   }
+
+   /////////////////////////////////////////////////
+   // add link to widget header for opening modal //
+   /////////////////////////////////////////////////
+   const selectTableFirstTooltipTitle = tableMetaData ? null : "You must select a table before you can set up your report filters and columns";
+   const labelAdditionalElementsRight: JSX.Element[] = []
+   if(isEditable)
+   {
+      labelAdditionalElementsRight.push(<HeaderLinkButtonComponent label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />)
+   }
+
+
+   return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
+      <React.Fragment>
+         {
+            showHelp("sectionSubhead") &&
+            <Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
+               {getHelpContent("sectionSubhead")}
+            </Box>
+         }
+         <Collapse in={Boolean(alertContent)}>
+            <Alert severity="error" sx={{mt: 1.5, mb: 0.5}} onClose={() => setAlertContent(null)}>{alertContent}</Alert>
+         </Collapse>
+         <Box pt="0.5rem">
+            <Box display="flex" justifyContent="space-between" alignItems="center">
+               <h5>Query Filter</h5>
+               <Box fontSize="0.75rem" fontWeight="700">{mayShowQueryPreview() && getCurrentSortIndicator(frontendQueryFilter, tableMetaData, null)}</Box>
+            </Box>
+            {
+               mayShowQueryPreview() &&
+               <AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={frontendQueryFilter} isEditable={false} isQueryTooComplex={frontendQueryFilter.subFilters?.length > 0} removeCriteriaByIndexCallback={null} />
+            }
+            {
+               !mayShowQueryPreview() &&
+               <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.5rem"} p={"0.5rem"} pb={"0.125rem"} borderRadius="0.75rem" border={`1px solid ${colors.grayLines.main}`}>
+                  {
+                     isEditable &&
+                     <Tooltip title={selectTableFirstTooltipTitle}>
+                        <span><Button disabled={!recordValues["tableName"]} sx={{mb: "0.125rem", ...unborderedButtonSX}} onClick={openEditor}>+ Add Filters</Button></span>
+                     </Tooltip>
+                  }
+                  {
+                     !isEditable && <Box color={colors.gray.main}>Your report has no filters.</Box>
+                  }
+               </Box>
+            }
+         </Box>
+         <Box pt="1rem">
+            <h5>Columns</h5>
+            <Box display="flex" flexWrap="wrap" fontSize="1rem">
+               {
+                  mayShowColumnsPreview() &&
+                  columns.columns.map((column, i) => <React.Fragment key={i}>{renderColumn(column)}</React.Fragment>)
+               }
+               {
+                  !mayShowColumnsPreview() &&
+                  <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
+                     {
+                        isEditable &&
+                        <Tooltip title={selectTableFirstTooltipTitle}>
+                           <span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span>
+                        </Tooltip>
+                     }
+                     {
+                        !isEditable && <Box color={colors.gray.main}>Your report has no columns.</Box>
+                     }
+                  </Box>
+               }
+            </Box>
+         </Box>
+         {
+            modalOpen &&
+            <Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
+               <div>
+                  <Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%"}}>
+                     <Card sx={{m: "2rem", p: "2rem"}}>
+                        <h3>Edit Filters and Columns</h3>
+                        {
+                           showHelp("modalSubheader") &&
+                           <Box color={colors.gray.main} pb={"0.5rem"}>
+                              {getHelpContent("modalSubheader")}
+                           </Box>
+                        }
+                        {
+                           tableMetaData && <RecordQuery
+                              ref={recordQueryRef}
+                              table={tableMetaData}
+                              usage="reportSetup"
+                              isModal={true}
+                              initialQueryFilter={usingDefaultEmptyFilter ? null : frontendQueryFilter}
+                              initialColumns={columns}
+                           />
+                        }
+
+                        <Box>
+                           <Box display="flex" justifyContent="flex-end">
+                              <QCancelButton disabled={false} onClickHandler={closeEditor} />
+                              <QSaveButton label="OK" iconName="check" disabled={false} onClickHandler={saveClicked} />
+                           </Box>
+                        </Box>
+                     </Card>
+                  </Box>
+               </div>
+            </Modal>
+         }
+      </React.Fragment>
+   </Widget>);
+}

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

@@ -46,9 +46,6 @@ import Snackbar from "@mui/material/Snackbar";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
-import React, {useReducer, useState} from "react";
-import AceEditor from "react-ace";
-import {Link} from "react-router-dom";
 import TabPanel from "qqq/components/misc/TabPanel";
 import ScriptDocsForm from "qqq/components/scripts/ScriptDocsForm";
 import ScriptEditor, {ScriptEditorProps} from "qqq/components/scripts/ScriptEditor";
@@ -65,6 +62,9 @@ import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-velocity";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-github";
+import React, {useReducer, useState} from "react";
+import AceEditor from "react-ace";
+import {Link} from "react-router-dom";
 import "ace-builds/src-noconflict/ext-language_tools";
 
 const qController = Client.getInstance();
@@ -97,16 +97,16 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
    const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
    const [scriptLogs, setScriptLogs] = useState({} as any);
-   const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord)
-   const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[])
+   const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord);
+   const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[]);
    const [availableFileNames, setAvailableFileNames] = useState([] as string[]);
    const [selectedFileName, setSelectedFileName] = useState("");
-   const [currentVersionId , setCurrentVersionId] = useState(null as number);
+   const [currentVersionId, setCurrentVersionId] = useState(null as number);
    const [notFoundMessage, setNotFoundMessage] = useState(null);
    const [selectedTab, setSelectedTab] = useState(0);
    const [editorProps, setEditorProps] = useState(null as ScriptEditorProps);
    const [successText, setSuccessText] = useState(null as string);
-   const [failText, setFailText] = useState(null as string)
+   const [failText, setFailText] = useState(null as string);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading"));
@@ -129,13 +129,13 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
 
             let fileMode = scriptTypeRecord.values.get("fileMode");
             let scriptTypeFileSchemaList: QRecord[] = null;
-            if(fileMode == 1) // SINGLE
+            if (fileMode == 1) // SINGLE
             {
                scriptTypeFileSchemaList = [new QRecord({values: {name: "Script.js", fileType: "javascript"}})];
             }
-            else if(fileMode == 2) // MULTI_PRE_DEFINED
+            else if (fileMode == 2) // MULTI_PRE_DEFINED
             {
-               const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")])
+               const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")]);
                scriptTypeFileSchemaList = await qController.query("scriptTypeFileSchema", filter);
             }
             else // MULTI AD_HOC
@@ -145,22 +145,22 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
             }
 
             setScriptTypeFileSchemaList(scriptTypeFileSchemaList);
-            if(scriptTypeFileSchemaList)
+            if (scriptTypeFileSchemaList)
             {
-               const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"))
+               const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"));
                setAvailableFileNames(availableFileNames);
-               setSelectedFileName(availableFileNames[0])
+               setSelectedFileName(availableFileNames[0]);
             }
 
             const criteria = [new QFilterCriteria("scriptId", QCriteriaOperator.EQUALS, [scriptId])];
             const orderBys = [new QFilterOrderBy("sequenceNo", false)];
-            const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25);
+            const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
             const versions = await qController.query("scriptRevision", filter);
             console.log("Fetched versions:");
             console.log(versions);
             setVersionRecordList(versions);
 
-            if(versions && versions.length > 0)
+            if (versions && versions.length > 0)
             {
                selectVersion(versions[0]);
             }
@@ -169,7 +169,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
          {
             if (e instanceof QException)
             {
-               if ((e as QException).status === "404")
+               if ((e as QException).status === 404)
                {
                   setNotFoundMessage("Script code could not be found.");
                   return;
@@ -253,31 +253,31 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    const handleSelectFile = (event: SelectChangeEvent) =>
    {
       setSelectedFileName(event.target.value);
-   }
+   };
 
    const getSelectedFileCode = (): string =>
    {
       return (getSelectedVersionCode()[selectedFileName] ?? "");
-   }
+   };
 
    const getSelectedFileType = (): string =>
    {
       for (let i = 0; i < scriptTypeFileSchemaList.length; i++)
       {
          let name = scriptTypeFileSchemaList[i].values.get("name");
-         if(name == selectedFileName)
+         if (name == selectedFileName)
          {
             return (scriptTypeFileSchemaList[i].values.get("fileType"));
          }
       }
 
       return ("javascript"); // have some default...
-   }
+   };
 
-   const getSelectedVersionCode = (): {[name: string]: string} =>
+   const getSelectedVersionCode = (): { [name: string]: string } =>
    {
-      let rs: {[name: string]: string} = {}
-      let files = selectedVersionRecord?.associatedRecords?.get("files")
+      let rs: { [name: string]: string } = {};
+      let files = selectedVersionRecord?.associatedRecords?.get("files");
 
       for (let j = 0; j < files?.length; j++)
       {
@@ -286,7 +286,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       }
 
       return (rs);
-   }
+   };
 
    function getVersionsList(versionRecordList: QRecord[], selectedVersionRecord: QRecord)
    {
@@ -344,11 +344,11 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
 
    const getScriptLogs = (scriptRevisionId: number) =>
    {
-      if(!scriptLogs[scriptRevisionId])
+      if (!scriptLogs[scriptRevisionId])
       {
          (async () =>
          {
-            let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], "AND", 0, 100);
+            let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], null, "AND", 0, 100);
             scriptLogs[scriptRevisionId] = await qController.query("scriptLog", filter);
             setScriptLogs(scriptLogs);
             forceUpdate();
@@ -368,7 +368,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       }
 
       return (<ScriptLogsView logs={logs} />);
-   }
+   };
 
    let editButtonTooltip = "";
    let editButtonText = "Create New Version";
@@ -392,14 +392,8 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       return JSON.stringify(new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])]));
    }
 
-   /*
-    position: relative;
-    left: -356px;
-    width: calc(100% + 380px);
-   */
-
    return (
-      <Grid container className="scriptViewer">
+      <Grid container className="scriptViewer" m={-2} pt={4} width={"calc(100% + 2rem)"}>
          <Grid item xs={12}>
             <Box>
                {
@@ -430,20 +424,17 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                         <Grid container spacing={3}>
                            <Grid item xs={12}>
                               <>
-                                 <Box display="flex" alignItems="center" justifyContent="space-between" gap={2} mt={-6}>
-                                    <Typography variant="h5" p={2}></Typography>
-                                    <Tabs
-                                       sx={{m: 1}}
-                                       value={selectedTab}
-                                       onChange={(event, newValue) => changeTab(newValue)}
-                                       variant="standard"
-                                    >
-                                       <Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "100px"}} />
-                                       <Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" sx={{width: "100px"}} />
-                                       <Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" sx={{width: "100px"}} />
-                                       <Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" sx={{width: "100px"}} />
-                                    </Tabs>
-                                 </Box>
+                                 <Tabs
+                                    sx={{m: 0, mb: 1, mt: -3}}
+                                    value={selectedTab}
+                                    onChange={(event, newValue) => changeTab(newValue)}
+                                    variant="standard"
+                                 >
+                                    <Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" />
+                                    <Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
+                                    <Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" />
+                                    <Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" />
+                                 </Tabs>
 
                                  <TabPanel index={0} value={selectedTab}>
                                     <Grid container>
@@ -498,7 +489,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                                                       editorProps={{$blockScrolling: true}}
                                                       setOptions={{useWorker: false}}
                                                       width="100%"
-                                                      height="368px"
+                                                      height="400px"
                                                       value={getSelectedFileCode()}
                                                       style={{borderTop: "1px solid lightgray", borderBottomRightRadius: "1rem"}}
                                                    />
@@ -565,7 +556,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                            <Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}>
                               <ScriptEditor
                                  closeCallback={closeEditingScript}
-                                 {... editorProps}
+                                 {...editorProps}
                               />
                            </Modal>
                         }

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

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

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

@@ -20,6 +20,7 @@
  */
 
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Table from "@mui/material/Table";
@@ -42,6 +43,7 @@ import Client from "qqq/utils/qqq/Client";
 export interface TableDataInput
 {
    columns: { [key: string]: any }[];
+   columnHeaderTooltips?: { [columnName: string]: string | JSX.Element }
    rows: { [key: string]: any }[];
 }
 
@@ -54,11 +56,14 @@ interface Props
    noRowsFoundHTML?: string;
    rowsPerPage?: number;
    hidePaginationDropdown?: boolean;
+   fixedStickyLastRow?: boolean;
+   fixedHeight?: number;
    data: TableDataInput;
+   widgetMetaData: QWidgetMetaData;
 }
 
 const qController = Client.getInstance();
-function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown}: Props): JSX.Element
+function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight, widgetMetaData}: Props): JSX.Element
 {
    const [qInstance, setQInstance] = useState(null as QInstance);
 
@@ -72,19 +77,21 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown}:
    }, []);
 
    return (
-      <Box py={1}>
+      <Box className="tableCard" mx={-2} mb="-28px" pt="11px" pb="0.25rem">
          {
             data && data.columns && !noRowsFoundHTML ?
                <DataTable
                   table={data}
                   entriesPerPage={rowsPerPage}
                   hidePaginationDropdown={hidePaginationDropdown}
+                  fixedStickyLastRow={fixedStickyLastRow}
+                  fixedHeight={fixedHeight}
                   showTotalEntries={false}
                   isSorted={false}
-                  noEndBorder
+                  widgetMetaData={widgetMetaData}
                />
                : noRowsFoundHTML ?
-                  <Box p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
+                  <Box p={3} pt={0} pb={3} sx={{textAlign: "center"}}>
                      <MDTypography
                         variant="subtitle2"
                         color="secondary"
@@ -114,7 +121,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown}:
                               <TableRow sx={{verticalAlign: "top"}} key={`row-${i}`}>
                                  {Array(8).fill(0).map((_, j) =>
                                     <DataTableBodyCell key={`cell-${i}-${j}`} align="center">
-                                       <DefaultCell><Skeleton /></DefaultCell>
+                                       <DefaultCell isFooter={false}><Skeleton /></DefaultCell>
                                     </DataTableBodyCell>
                                  )}
                               </TableRow>

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

@@ -23,9 +23,12 @@
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 // @ts-ignore
 import {htmlToText} from "html-to-text";
-import React, {useEffect, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
+import QContext from "QContext";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import TableCard from "qqq/components/widgets/tables/TableCard";
-import Widget, {ExportDataButton, WidgetData} from "qqq/components/widgets/Widget";
+import Widget, {WidgetData} from "qqq/components/widgets/Widget";
+import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -43,6 +46,9 @@ TableWidget.defaultProps = {
 function TableWidget(props: Props): JSX.Element
 {
    const [isExportDisabled, setIsExportDisabled] = useState(false); // hmm, would like true here, but it broke...
+   const [csv, setCsv] = useState(null as string);
+   const [fileName, setFileName] = useState(null as string);
+   const {helpHelpActive} = useContext(QContext);
 
    const rows = props.widgetData?.rows;
    const columns = props.widgetData?.columns;
@@ -56,14 +62,8 @@ function TableWidget(props: Props): JSX.Element
       }
       setIsExportDisabled(isExportDisabled);
 
-   }, [props.widgetMetaData, props.widgetData]);
-
-   const exportCallback = () =>
-   {
       if (props.widgetData && rows && columns)
       {
-         console.log(props.widgetData);
-
          let csv = "";
          for (let j = 0; j < columns.length; j++)
          {
@@ -85,29 +85,73 @@ function TableWidget(props: Props): JSX.Element
                }
 
                const cell = rows[i][columns[j].accessor];
-               const text = htmlToText(cell,
-                  {
-                     selectors: [
-                        {selector: "a", format: "inline"},
-                        {selector: ".MuiIcon-root", format: "skip"},
-                        {selector: ".button", format: "skip"}
-                     ]
-                  });
+               let text = cell;
+               if(columns[j].type != "default")
+               {
+                  text = htmlToText(cell,
+                     {
+                        selectors: [
+                           {selector: "a", format: "inline"},
+                           {selector: ".MuiIcon-root", format: "skip"},
+                           {selector: ".button", format: "skip"}
+                        ]
+                     });
+               }
                csv += `"${ValueUtils.cleanForCsv(text)}"`;
             }
             csv += "\n";
          }
 
-         console.log(csv);
+         setCsv(csv);
 
-         const fileName = (props.widgetData.label ?? props.widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
+         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
+         setFileName(fileName)
+
+         console.log(`useEffect, setting fileName ${fileName}`);
+      }
+
+   }, [props.widgetMetaData, props.widgetData]);
+
+   const onExportClick = () =>
+   {
+      if(props.widgetData?.csvData)
+      {
+         const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
+         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
+         HtmlUtils.download(fileName, csv);
+      }
+      else if(csv)
+      {
          HtmlUtils.download(fileName, csv);
       }
       else
       {
-         alert("There is no data available to export.");
+         alert("There is no data available to export.")
       }
-   };
+   }
+
+   const labelAdditionalElementsLeft: JSX.Element[] = [];
+   if(props.widgetMetaData?.showExportButton)
+   {
+      labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
+   }
+
+   //////////////////////////////////////////////////////
+   // look for column-header tooltips from helpContent //
+   //////////////////////////////////////////////////////
+   const columnHeaderTooltips: {[columnName: string]: JSX.Element} = {}
+   for (let column of props.widgetData?.columns ?? [])
+   {
+      const helpRoles = ["ALL_SCREENS"]
+      const slotName = `columnHeader=${column.accessor}`;
+      const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
+
+      if(showHelp)
+      {
+         const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
+         columnHeaderTooltips[column.accessor] = formattedHelpContent;
+      }
+   }
 
    return (
       <Widget
@@ -116,13 +160,16 @@ function TableWidget(props: Props): JSX.Element
          reloadWidgetCallback={(data) => props.reloadWidgetCallback(data)}
          footerHTML={props.widgetData?.footerHTML}
          isChild={props.isChild}
-         labelAdditionalComponentsLeft={props.widgetMetaData?.showExportButton ? [new ExportDataButton(() => exportCallback(), isExportDisabled)] : []}
+         labelAdditionalElementsLeft={labelAdditionalElementsLeft}
       >
          <TableCard
             noRowsFoundHTML={props.widgetData?.noRowsFoundHTML}
             rowsPerPage={props.widgetData?.rowsPerPage}
             hidePaginationDropdown={props.widgetData?.hidePaginationDropdown}
-            data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows}}
+            fixedStickyLastRow={props.widgetData?.fixedStickyLastRow}
+            fixedHeight={props.widgetData?.fixedHeight}
+            data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows, columnHeaderTooltips: columnHeaderTooltips}}
+            widgetMetaData={props.widgetMetaData}
          />
       </Widget>
    );

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

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

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

@@ -22,8 +22,10 @@
 import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
-import {ReactNode} from "react";
+import Tooltip from "@mui/material/Tooltip";
+import colors from "qqq/assets/theme/base/colors";
 import {useMaterialUIController} from "qqq/context";
+import {ReactNode} from "react";
 
 // Declaring props types for DataTableHeadCell
 interface Props
@@ -32,9 +34,10 @@ interface Props
    children: ReactNode;
    sorted?: false | "none" | "asce" | "desc";
    align?: "left" | "right" | "center";
+   tooltip?: string | JSX.Element;
 }
 
-function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JSX.Element
+function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: Props): JSX.Element
 {
    const [controller] = useMaterialUIController();
    const {darkMode} = controller;
@@ -44,57 +47,71 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
          component="th"
          width={width}
          py={1.5}
-         px={3}
+         px={1.5}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
-            borderBottom: `${borderWidth[1]} solid ${light.main}`,
+            borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
+            "&:nth-of-type(1)": {
+               paddingLeft: "1rem"
+            },
+            "&:last-child": {
+               paddingRight: "1rem"
+            },
          })}
       >
          <Box
             {...rest}
             sx={({typography: {size, fontWeightBold}}: Theme) => ({
                position: "relative",
-               opacity: "0.7",
+               color: colors.grey[700],
                textAlign: align,
-               fontSize: size.xxs,
-               fontWeight: fontWeightBold,
-               textTransform: "uppercase",
+               "@media (min-width: 1440px)": {
+                  fontSize: "1rem"
+               },
+               "@media (max-width: 1440px)": {
+                  fontSize: "0.875rem"
+               },
+               fontWeight: 600,
                cursor: sorted && "pointer",
                userSelect: sorted && "none",
             })}
          >
-            {children}
-            {sorted && (
-               <Box
-                  position="absolute"
-                  top={0}
-                  right={align !== "right" ? "16px" : 0}
-                  left={align === "right" ? "-5px" : "unset"}
-                  sx={({typography: {size}}: any) => ({
-                     fontSize: size.lg,
-                  })}
-               >
+            <>
+               {
+                  tooltip ? <Tooltip title={tooltip}><span style={{cursor: "default"}}>{children}</span></Tooltip> : children
+               }
+               {sorted && (
                   <Box
-                     sx={{
-                        position: "absolute",
-                        top: -6,
-                        color: sorted === "asce" ? "text" : "secondary",
-                        opacity: sorted === "asce" ? 1 : 0.5
-                     }}
+                     position="absolute"
+                     top={0}
+                     right={align !== "right" ? "16px" : 0}
+                     left={align === "right" ? "-5px" : "unset"}
+                     sx={({typography: {size}}: any) => ({
+                        fontSize: size.lg,
+                     })}
                   >
-                     <Icon>arrow_drop_up</Icon>
+                     <Box
+                        sx={{
+                           position: "absolute",
+                           top: -6,
+                           color: sorted === "asce" ? "text" : "secondary",
+                           opacity: sorted === "asce" ? 1 : 0.5
+                        }}
+                     >
+                        <Icon>arrow_drop_up</Icon>
+                     </Box>
+                     <Box
+                        sx={{
+                           position: "absolute",
+                           top: 0,
+                           color: sorted === "desc" ? "text" : "secondary",
+                           opacity: sorted === "desc" ? 1 : 0.5
+                        }}
+                     >
+                        <Icon>arrow_drop_down</Icon>
+                     </Box>
                   </Box>
-                  <Box
-                     sx={{
-                        position: "absolute",
-                        top: 0,
-                        color: sorted === "desc" ? "text" : "secondary",
-                        opacity: sorted === "desc" ? 1 : 0.5
-                     }}
-                  >
-                     <Icon>arrow_drop_down</Icon>
-                  </Box>
-               </Box>
-            )}
+               )}
+            </>
          </Box>
       </Box>
    );

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

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

src/qqq/context/index.tsx

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