CE-1107: style updates to icon

CE-1072 return displayValue for DATE_TIME fields (if they're differen…

.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.87",
+      "@kingsrook/qqq-frontend-core": "1.0.94",
       "@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",

pom.xml

@@ -66,7 +66,7 @@
       <dependency>
          <groupId>com.kingsrook.qqq</groupId>
          <artifactId>qqq-backend-core</artifactId>
-         <version>feature-CE-876-develop-missing-widget-types-20240221.002945-1</version>
+         <version>0.20.0-20240308.165846-65</version>
       </dependency>
       <dependency>
          <groupId>org.slf4j</groupId>

src/App.tsx

@@ -79,7 +79,7 @@ export default function App()
    Client.setUnauthorizedCallback(() =>
    {
       logout();
-   })
+   });
 
    const shouldStoreNewToken = (newToken: string, oldToken: string): boolean =>
    {
@@ -104,7 +104,7 @@ export default function App()
          // if the old (local storage) token is expired, then we need to store the new one //
          ////////////////////////////////////////////////////////////////////////////////////
          const oldExp = oldJSON["exp"];
-         if(oldExp * 1000 < (new Date().getTime()))
+         if (oldExp * 1000 < (new Date().getTime()))
          {
             console.log("Access token in local storage was expired - so we should store a new one.");
             return (true);
@@ -114,21 +114,21 @@ export default function App()
          // remove the exp & iat values from what we compare - as they are always different from auth0 //
          // note, this is only deleting them from what we compare, not from what we'd store.           //
          ////////////////////////////////////////////////////////////////////////////////////////////////
-         delete newJSON["exp"]
-         delete newJSON["iat"]
-         delete oldJSON["exp"]
-         delete oldJSON["iat"]
+         delete newJSON["exp"];
+         delete newJSON["iat"];
+         delete oldJSON["exp"];
+         delete oldJSON["iat"];
 
          const different = JSON.stringify(newJSON) !== JSON.stringify(oldJSON);
-         if(different)
+         if (different)
          {
             console.log("Latest access token from auth0 has changed vs localStorage - so we should store a new one.");
          }
          return (different);
       }
-      catch(e)
+      catch (e)
       {
-         console.log("Caught in shouldStoreNewToken: " + e)
+         console.log("Caught in shouldStoreNewToken: " + e);
       }
 
       return (true);
@@ -185,7 +185,7 @@ export default function App()
             {
                console.log(`Error loading token: ${JSON.stringify(e)}`);
                qController.clearAuthenticationMetaDataLocalStorage();
-               localStorage.removeItem("accessToken")
+               localStorage.removeItem("accessToken");
                removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
                logout();
                return;
@@ -550,7 +550,7 @@ export default function App()
                });
             }
 
-            const pathToLabelMap: {[path: string]: string} = {}
+            const pathToLabelMap: { [path: string]: string } = {};
             for (let i = 0; i < appRoutesList.length; i++)
             {
                const route = appRoutesList[i];
@@ -575,11 +575,11 @@ export default function App()
             console.error(e);
             if (e instanceof QException)
             {
-               if ((e as QException).status === "401")
+               if ((e as QException).status === 401)
                {
                   console.log("Exception is a QException with status = 401.  Clearing some of localStorage & cookies");
                   qController.clearAuthenticationMetaDataLocalStorage();
-                  localStorage.removeItem("accessToken")
+                  localStorage.removeItem("accessToken");
                   removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
 
                   //////////////////////////////////////////////////////
@@ -656,7 +656,7 @@ export default function App()
 
    const [pageHeader, setPageHeader] = useState("" as string | JSX.Element);
    const [accentColor, setAccentColor] = useState("#0062FF");
-   const [accentColorLight, setAccentColorLight] = useState("#C0D6F7")
+   const [accentColorLight, setAccentColorLight] = useState("#C0D6F7");
    const [tableMetaData, setTableMetaData] = useState(null);
    const [tableProcesses, setTableProcesses] = useState(null);
    const [dotMenuOpen, setDotMenuOpen] = useState(false);
@@ -707,4 +707,4 @@ export default function App()
          </QContext.Provider>
       )
    );
-}
+}

src/qqq/components/audits/AuditBody.tsx

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

src/qqq/components/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,15 +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).",
@@ -101,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... //
@@ -121,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++)
@@ -159,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/EntityForm.tsx

@@ -22,8 +22,10 @@
 import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import {Alert} from "@mui/material";
@@ -32,22 +34,24 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
-import {Form, Formik, useFormikContext} from "formik";
-import React, {useContext, useEffect, useReducer, useState} from "react";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
-import * as Yup from "yup";
+import Modal from "@mui/material/Modal";
+import {Form, Formik, FormikErrors, FormikTouched, FormikValues, useFormikContext} from "formik";
 import QContext from "QContext";
-import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import HelpContent from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
+import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useReducer, useState} from "react";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
+import {Value} from "sass";
+import * as Yup from "yup";
 
 interface Props
 {
@@ -58,6 +62,8 @@ interface Props
    defaultValues: { [key: string]: string };
    disabledFields: { [key: string]: boolean } | string[];
    isCopy?: boolean;
+   onSubmitCallback?: (values: any) => void;
+   overrideHeading?: string
 }
 
 EntityForm.defaultProps = {
@@ -67,7 +73,8 @@ EntityForm.defaultProps = {
    closeModalHandler: null,
    defaultValues: {},
    disabledFields: {},
-   isCopy: false
+   isCopy: false,
+   onSubmitCallback: null,
 };
 
 function EntityForm(props: Props): JSX.Element
@@ -90,10 +97,15 @@ function EntityForm(props: Props): JSX.Element
 
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
    const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
+   const [metaData, setMetaData] = useState(null as QInstance);
    const [record, setRecord] = useState(null as QRecord);
    const [tableSections, setTableSections] = useState(null as QTableSection[]);
+   const [renderedWidgetSections, setRenderedWidgetSections] = useState({} as {[name: string]: JSX.Element});
+   const [childListWidgetData, setChildListWidgetData] = useState({} as {[name: string]: ChildRecordListData});
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
+   const [showEditChildForm, setShowEditChildForm] = useState(null as any);
+
    const [notAllowedError, setNotAllowedError] = useState(null as string);
 
    const {pageHeader, setPageHeader} = useContext(QContext);
@@ -101,6 +113,8 @@ function EntityForm(props: Props): JSX.Element
    const navigate = useNavigate();
    const location = useLocation();
 
+   const cardElevation = props.isModal ? 3 : 0;
+
    ////////////////////////////////////////////////////////////////////
    // first take defaultValues and disabledFields from props         //
    // but, also allow them to be sent in the hash, in the format of: //
@@ -129,7 +143,131 @@ function EntityForm(props: Props): JSX.Element
       {}
    }
 
-   function getFormSection(values: any, touched: any, formFields: any, errors: any): JSX.Element
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openAddChildRecord(name: string, widgetData: any)
+   {
+      let defaultValues = widgetData.defaultValuesForNewChildRecords;
+
+      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
+      if(!disabledFields)
+      {
+         disabledFields = widgetData.defaultValuesForNewChildRecords;
+      }
+
+      doOpenEditChildForm(name, widgetData.childTableMetaData, null, defaultValues, disabledFields);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openEditChildRecord(name: string, widgetData: any, rowIndex: number)
+   {
+      let defaultValues = widgetData.queryOutput.records[rowIndex].values;
+
+      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
+      if(!disabledFields)
+      {
+         disabledFields = widgetData.defaultValuesForNewChildRecords;
+      }
+
+      doOpenEditChildForm(name, widgetData.childTableMetaData, rowIndex, defaultValues, disabledFields);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const deleteChildRecord = (name: string, widgetData: any, rowIndex: number) =>
+   {
+      updateChildRecordList(name, "delete", rowIndex);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function doOpenEditChildForm(widgetName: string, table: QTableMetaData, rowIndex: number, defaultValues: any, disabledFields: any)
+   {
+      const showEditChildForm: any = {};
+      showEditChildForm.widgetName = widgetName;
+      showEditChildForm.table = table;
+      showEditChildForm.rowIndex = rowIndex;
+      showEditChildForm.defaultValues = defaultValues;
+      showEditChildForm.disabledFields = disabledFields;
+      setShowEditChildForm(showEditChildForm);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const closeEditChildForm = (event: object, reason: string) =>
+   {
+      if (reason === "backdropClick" || reason === "escapeKeyDown")
+      {
+         return;
+      }
+
+      setShowEditChildForm(null);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function submitEditChildForm(values: any)
+   {
+      updateChildRecordList(showEditChildForm.widgetName, showEditChildForm.rowIndex == null ? "insert" : "edit", showEditChildForm.rowIndex, values);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   async function updateChildRecordList(widgetName: string, action: "insert" | "edit" | "delete", rowIndex?: number, values?: any)
+   {
+      const metaData = await qController.loadMetaData();
+      const widgetMetaData = metaData.widgets.get(widgetName);
+
+      const newChildListWidgetData: {[name: string]: ChildRecordListData} = Object.assign({}, childListWidgetData)
+      if(!newChildListWidgetData[widgetName].queryOutput.records)
+      {
+         newChildListWidgetData[widgetName].queryOutput.records = [];
+      }
+
+      switch(action)
+      {
+         case "insert":
+            newChildListWidgetData[widgetName].queryOutput.records.push({values: values})
+            break;
+         case "edit":
+            newChildListWidgetData[widgetName].queryOutput.records[rowIndex] = {values: values};
+            break;
+         case "delete":
+            newChildListWidgetData[widgetName].queryOutput.records.splice(rowIndex, 1);
+            break;
+      }
+      newChildListWidgetData[widgetName].totalRows = newChildListWidgetData[widgetName].queryOutput.records.length;
+      setChildListWidgetData(newChildListWidgetData);
+
+      const newRenderedWidgetSections = Object.assign({}, renderedWidgetSections)
+      newRenderedWidgetSections[widgetName] = getWidgetSection(widgetMetaData, newChildListWidgetData[widgetName]);
+      setRenderedWidgetSections(newRenderedWidgetSections);
+      forceUpdate();
+
+      setShowEditChildForm(null);
+   }
+
+
+   /*******************************************************************************
+    ** render a section (full of fields) as a form
+    *******************************************************************************/
+   function getFormSection(section: QTableSection, values: any, touched: any, formFields: any, errors: any, omitWrapper = false): JSX.Element
    {
       const formData: any = {};
       formData.values = values;
@@ -152,13 +290,68 @@ function EntityForm(props: Props): JSX.Element
 
       if (!Object.keys(formFields).length)
       {
-         return <div>Loading...</div>;
+         return <div>Error:  No form fields in section {section.name}</div>;
       }
 
       const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
-      return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />;
+
+      if(omitWrapper)
+      {
+         return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />
+      }
+
+      return <Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
+         <MDTypography variant="h6" p={3} pb={1}>
+            {section.label}
+         </MDTypography>
+         {getSectionHelp(section)}
+         <Box pb={1} px={3}>
+            <Box pb={"0.75rem"} width="100%">
+               <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />
+            </Box>
+         </Box>
+      </Card>
    }
 
+
+   /*******************************************************************************
+    ** render a section as a widget
+    *******************************************************************************/
+   function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element
+   {
+      widgetData.viewAllLink = null;
+      widgetMetaData.showExportButton = false;
+
+      return <RecordGridWidget
+         key={new Date().getTime()} // added so that editing values actually re-renders...
+         widgetMetaData={widgetMetaData}
+         data={widgetData}
+         disableRowClick
+         allowRecordEdit
+         allowRecordDelete
+         addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData)}
+         editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData, rowIndex)}
+         deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, widgetData, rowIndex)}
+      />
+   }
+
+
+   /*******************************************************************************
+    ** render a form section
+    *******************************************************************************/
+   function renderSection(section: QTableSection, values: FormikValues | Value, touched: FormikTouched<FormikValues> | Value, formFields: Map<string, any>, errors: FormikErrors<FormikValues> | Value)
+   {
+      if(section.fieldNames && section.fieldNames.length > 0)
+      {
+         return getFormSection(section, values, touched, formFields.get(section.name), errors);
+      }
+      else
+      {
+         return renderedWidgetSections[section.widgetName] ?? <Box>Loading {section.label}...</Box>
+      }
+   }
+
+
    if (!asyncLoadInited)
    {
       setAsyncLoadInited(true);
@@ -167,10 +360,16 @@ function EntityForm(props: Props): JSX.Element
          const tableMetaData = await qController.loadTableMetaData(tableName);
          setTableMetaData(tableMetaData);
 
+         const metaData = await qController.loadMetaData();
+         setMetaData(metaData);
+
          /////////////////////////////////////////////////
          // define the sections, e.g., for the left-bar //
          /////////////////////////////////////////////////
-         const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()]);
+         const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
+         {
+            return section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList" && metaData.widgets.get(section.widgetName)?.defaultValues?.has("manageAssociationName")
+         });
          setTableSections(tableSections);
 
          const fieldArray = [] as QFieldMetaData[];
@@ -263,6 +462,18 @@ function EntityForm(props: Props): JSX.Element
             }
          }
 
+         ///////////////////////////////////////////////////
+         // if an override heading was passed in, use it. //
+         ///////////////////////////////////////////////////
+         if(props.overrideHeading)
+         {
+            setFormTitle(props.overrideHeading);
+            if (!props.isModal)
+            {
+               setPageHeader(props.overrideHeading);
+            }
+         }
+
          //////////////////////////////////////
          // check capabilities & permissions //
          //////////////////////////////////////
@@ -309,27 +520,9 @@ function EntityForm(props: Props): JSX.Element
          const {
             dynamicFormFields,
             formValidations,
-         } = DynamicFormUtils.getFormData(fieldArray);
+         } = DynamicFormUtils.getFormData(fieldArray, disabledFields);
          DynamicFormUtils.addPossibleValueProps(dynamicFormFields, fieldArray, tableName, null, record ? record.displayValues : defaultDisplayValues);
 
-         if(disabledFields)
-         {
-            if(Array.isArray(disabledFields))
-            {
-               for (let i = 0; i < disabledFields.length; i++)
-               {
-                  dynamicFormFields[disabledFields[i]].isEditable = false;
-               }
-            }
-            else
-            {
-               for (let fieldName in disabledFields)
-               {
-                  dynamicFormFields[fieldName].isEditable = false;
-               }
-            }
-         }
-
          /////////////////////////////////////
          // group the formFields by section //
          /////////////////////////////////////
@@ -337,51 +530,70 @@ function EntityForm(props: Props): JSX.Element
          let t1sectionName;
          let t1section;
          const nonT1Sections: QTableSection[] = [];
+         const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
+         const newChildListWidgetData: {[name: string]: ChildRecordListData} = {};
+
          for (let i = 0; i < tableSections.length; i++)
          {
             const section = tableSections[i];
             const sectionDynamicFormFields: any[] = [];
 
-            if (section.isHidden || !section.fieldNames)
+            if (section.isHidden)
             {
                continue;
             }
 
-            for (let j = 0; j < section.fieldNames.length; j++)
+            const hasFields = section.fieldNames && section.fieldNames.length > 0;
+            const hasChildRecordListWidget = section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList"
+            if(!hasFields && !hasChildRecordListWidget)
             {
-               const fieldName = section.fieldNames[j];
-               const field = tableMetaData.fields.get(fieldName);
+               continue;
+            }
 
-               if(!field)
+            if(hasFields)
+            {
+               for (let j = 0; j < section.fieldNames.length; j++)
                {
-                  console.log(`Omitting un-found field ${fieldName} from form`);
+                  const fieldName = section.fieldNames[j];
+                  const field = tableMetaData.fields.get(fieldName);
+
+                  if (!field)
+                  {
+                     console.log(`Omitting un-found field ${fieldName} from form`);
+                     continue;
+                  }
+
+                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  // if id !== null (and we're not copying) - means we're on the edit screen -- show all fields on the edit screen. //
+                  // || (or) we're on the insert screen in which case, only show editable fields.                                   //
+                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  if ((props.id !== null && !props.isCopy) || field.isEditable)
+                  {
+                     sectionDynamicFormFields.push(dynamicFormFields[fieldName]);
+                  }
+               }
+
+               if (sectionDynamicFormFields.length === 0)
+               {
+                  ////////////////////////////////////////////////////////////////////////////////////////////////
+                  // in case there are no active fields in this section, remove it from the tableSections array //
+                  ////////////////////////////////////////////////////////////////////////////////////////////////
+                  tableSections.splice(i, 1);
+                  i--;
                   continue;
                }
-
-               ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               // if id !== null (and we're not copying) - means we're on the edit screen -- show all fields on the edit screen. //
-               // || (or) we're on the insert screen in which case, only show editable fields.                                   //
-               ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               if ((props.id !== null && !props.isCopy) || field.isEditable)
+               else
                {
-                  sectionDynamicFormFields.push(dynamicFormFields[fieldName]);
+                  dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields);
                }
             }
-
-            if (sectionDynamicFormFields.length === 0)
-            {
-               ////////////////////////////////////////////////////////////////////////////////////////////////
-               // in case there are no active fields in this section, remove it from the tableSections array //
-               ////////////////////////////////////////////////////////////////////////////////////////////////
-               tableSections.splice(i, 1);
-               i--;
-               continue;
-            }
             else
             {
-               dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields);
+               const widgetMetaData = metaData.widgets.get(section.widgetName);
+               const widgetData = await qController.widget(widgetMetaData.name, props.id ? `${tableMetaData.primaryKeyField}=${props.id}` : "");
+               newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
+               newChildListWidgetData[section.widgetName] = widgetData;
             }
-
             //////////////////////////////////////
             // capture the tier1 section's name //
             //////////////////////////////////////
@@ -395,16 +607,38 @@ function EntityForm(props: Props): JSX.Element
                nonT1Sections.push(section);
             }
          }
+
          setT1SectionName(t1sectionName);
          setT1Section(t1section);
          setNonT1Sections(nonT1Sections);
          setFormFields(dynamicFormFieldsBySection);
          setValidations(Yup.object().shape(formValidations));
+         setRenderedWidgetSections(newRenderedWidgetSections);
+         setChildListWidgetData(newChildListWidgetData);
 
          forceUpdate();
       })();
    }
 
+
+   //////////////////////////////////////////////////////////////////
+   // watch widget data - if they change, re-render those sections //
+   //////////////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      if(childListWidgetData)
+      {
+         const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
+         for(let name in childListWidgetData)
+         {
+            const widgetMetaData = metaData.widgets.get(name);
+            newRenderedWidgetSections[name] = getWidgetSection(widgetMetaData, childListWidgetData[name]);
+         }
+         setRenderedWidgetSections(newRenderedWidgetSections);
+      }
+   }, [childListWidgetData]);
+
+
    const handleCancelClicked = () =>
    {
       ///////////////////////////////////////////////////////////////////////////////////////
@@ -429,9 +663,23 @@ function EntityForm(props: Props): JSX.Element
       }
    };
 
+
+   /*******************************************************************************
+    ** event handler for the (Formik) Form.
+    *******************************************************************************/
    const handleSubmit = async (values: any, actions: any) =>
    {
       actions.setSubmitting(true);
+
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // if there's a callback (e.g., for a modal nested on another create/edit screen), then just pass our data back there anre return. //
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      if(props.onSubmitCallback)
+      {
+         props.onSubmitCallback(values);
+         return;
+      }
+
       await (async () =>
       {
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -486,9 +734,32 @@ function EntityForm(props: Props): JSX.Element
             }
          }
 
+         const associationsToPost: any = {}
+         let haveAssociationsToPost = false;
+         for (let name of Object.keys(childListWidgetData))
+         {
+            const manageAssociationName = metaData.widgets.get(name)?.defaultValues?.get("manageAssociationName")
+            if(!manageAssociationName)
+            {
+               console.log(`Cannot send association data to backend - missing a manageAssociationName defaultValue in widget meta data for widget name ${name}`);
+            }
+            associationsToPost[manageAssociationName] = [];
+            haveAssociationsToPost = true;
+            for(let i=0; i<childListWidgetData[name].queryOutput?.records?.length; i++)
+            {
+               associationsToPost[manageAssociationName].push(childListWidgetData[name].queryOutput.records[i].values);
+            }
+         }
+         if(haveAssociationsToPost)
+         {
+            valuesToPost["associations"] = JSON.stringify(associationsToPost);
+         }
+
          if (props.id !== null && !props.isCopy)
          {
-            // todo - audit that it's a dupe
+            ///////////////////////
+            // perform an update //
+            ///////////////////////
             await qController
                .update(tableName, props.id, valuesToPost)
                .then((record) =>
@@ -499,8 +770,14 @@ function EntityForm(props: Props): JSX.Element
                   }
                   else
                   {
+                     let warningMessage = null;
+                     if(record.warnings && record.warnings.length && record.warnings.length > 0)
+                     {
+                        warningMessage = record.warnings[0];
+                     }
+
                      const path = location.pathname.replace(/\/edit$/, "");
-                     navigate(path, {state: {updateSuccess: true}});
+                     navigate(path, {state: {updateSuccess: true, warning: warningMessage}});
                   }
                })
                .catch((error) =>
@@ -522,6 +799,10 @@ function EntityForm(props: Props): JSX.Element
          }
          else
          {
+            /////////////////////////////////
+            // perform an insert           //
+            // todo - audit if it's a dupe //
+            /////////////////////////////////
             await qController
                .create(tableName, valuesToPost)
                .then((record) =>
@@ -532,10 +813,16 @@ function EntityForm(props: Props): JSX.Element
                   }
                   else
                   {
+                     let warningMessage = null;
+                     if(record.warnings && record.warnings.length && record.warnings.length > 0)
+                     {
+                        warningMessage = record.warnings[0];
+                     }
+
                      const path = props.isCopy ?
                         location.pathname.replace(new RegExp(`/${props.id}/copy$`), "/" + record.values.get(tableMetaData.primaryKeyField))
                         : location.pathname.replace(/create$/, record.values.get(tableMetaData.primaryKeyField));
-                     navigate(path, {state: {createSuccess: true}});
+                     navigate(path, {state: {createSuccess: true, warning: warningMessage}});
                   }
                })
                .catch((error) =>
@@ -594,7 +881,6 @@ function EntityForm(props: Props): JSX.Element
    }
    else
    {
-      const cardElevation = props.isModal ? 3 : 0;
       body = (
          <Box mb={3}>
             {
@@ -656,7 +942,7 @@ function EntityForm(props: Props): JSX.Element
                                     t1sectionName && formFields ? (
                                        <Box px={3}>
                                           <Box pb={"0.25rem"} width="100%">
-                                             {getFormSection(values, touched, formFields.get(t1sectionName), errors)}
+                                             {getFormSection(t1section, values, touched, formFields.get(t1sectionName), errors, true)}
                                           </Box>
                                        </Box>
                                     ) : null
@@ -665,17 +951,7 @@ function EntityForm(props: Props): JSX.Element
                            </Box>
                            {formFields && nonT1Sections.length ? nonT1Sections.map((section: QTableSection) => (
                               <Box key={`edit-card-${section.name}`} pb={3}>
-                                 <Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
-                                    <MDTypography variant="h6" p={3} pb={1}>
-                                       {section.label}
-                                    </MDTypography>
-                                    {getSectionHelp(section)}
-                                    <Box pb={1} px={3}>
-                                       <Box pb={"0.75rem"} width="100%">
-                                          {getFormSection(values, touched, formFields.get(section.name), errors)}
-                                       </Box>
-                                    </Box>
-                                 </Card>
+                                 {renderSection(section, values, touched, formFields, errors)}
                               </Box>
                            )) : null}
 
@@ -690,6 +966,23 @@ function EntityForm(props: Props): JSX.Element
                      )}
                   </Formik>
 
+                  {
+                     showEditChildForm &&
+                     <Modal open={showEditChildForm as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
+                        <div className="modalEditForm">
+                           <EntityForm
+                              isModal={true}
+                              closeModalHandler={closeEditChildForm}
+                              table={showEditChildForm.table}
+                              defaultValues={showEditChildForm.defaultValues}
+                              disabledFields={showEditChildForm.disabledFields}
+                              onSubmitCallback={submitEditChildForm}
+                              overrideHeading={`${showEditChildForm.rowIndex != null ? "Editing" : "Creating New"} ${showEditChildForm.table.label}`}
+                           />
+                        </div>
+                     </Modal>
+                  }
+
                </Grid>
             </Grid>
          </Box>

src/qqq/components/misc/GotoRecordDialog.tsx

@@ -61,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);
    }
@@ -71,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;
                }
@@ -98,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());
@@ -118,49 +118,49 @@ 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 filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, null, "AND", null, 10);
       try
       {
-         const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant)
+         const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant);
          if (queryResult.length == 0)
          {
             setError("Record not found.");
@@ -177,19 +177,19 @@ function GotoRecordDialog(props: Props): JSX.Element
             setTimeout(() => setError(""), 3000);
          }
       }
-      catch(e)
+      catch (e)
       {
          // @ts-ignore
          setError(`Error: ${(e && e.message) ? e.message : e}`);
          setTimeout(() => setError(""), 6000);
       }
-   }
+   };
 
-   if(props.tableMetaData)
+   if (props.tableMetaData)
    {
       if (fields.length == 0 && !error)
       {
-         setError("This table is not configured for this feature.")
+         setError("This table is not configured for this feature.");
       }
    }
 
@@ -244,7 +244,7 @@ function GotoRecordDialog(props: Props): JSX.Element
                : <Box>&nbsp;</Box>
          }
       </Dialog>
-   )
+   );
 }
 
 interface GotoRecordButtonProps
@@ -266,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()
    {
@@ -282,7 +282,7 @@ export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
    return (
       <React.Fragment>
          {
-            props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto} >Go To...</Button>
+            props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto}>Go To...</Button>
          }
          <GotoRecordDialog metaData={props.metaData} tableMetaData={props.tableMetaData} tableVariant={props.tableVariant} isOpen={gotoIsOpen} closeHandler={closeGoto} mayClose={props.mayClose} subHeader={props.subHeader} />
       </React.Fragment>

src/qqq/components/misc/SavedViews.tsx

@@ -25,7 +25,7 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT
 import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
 import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {Alert, Button, Link} from "@mui/material";
+import {Alert, Button} from "@mui/material";
 import Box from "@mui/material/Box";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
@@ -40,14 +40,14 @@ import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import {TooltipProps} from "@mui/material/Tooltip/Tooltip";
 import FormData from "form-data";
-import React, {useContext, useEffect, useRef, useState} from "react";
-import {useLocation, useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QDeleteButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import RecordQueryView from "qqq/models/query/RecordQueryView";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {useLocation, useNavigate} from "react-router-dom";
 
 interface Props
 {
@@ -227,6 +227,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             /////////////////////////////////////////////////////////////////////////////////////////////////
             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)

src/qqq/components/query/BasicAndAdvancedQueryControls.tsx

@@ -29,7 +29,6 @@ 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 {Badge, ToggleButton, ToggleButtonGroup} from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -38,9 +37,10 @@ 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 React, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
@@ -51,6 +51,7 @@ import QuickFilter, {quickFilterButtonStyles} from "qqq/components/query/QuickFi
 import XIcon from "qqq/components/query/XIcon";
 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
 {
@@ -89,14 +90,14 @@ let debounceTimeout: string | number | NodeJS.Timeout;
  *******************************************************************************/
 const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryControlsProps, ref) =>
 {
-   const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props
+   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 [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null);
    const [addQuickFilterOpenCounter, setAddQuickFilterOpenCounter] = useState(0);
    const [showClearFiltersWarning, setShowClearFiltersWarning] = useState(false);
    const [mouseOverElement, setMouseOverElement] = useState(null as string);
@@ -104,6 +105,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
 
    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 //
    //////////////////////////////////////////////////////////////////////////////////
@@ -122,7 +128,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          {
             return (mode);
          }
-      }
+      };
    });
 
 
@@ -176,7 +182,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       let foundIndex = null;
       for (let i = 0; i < queryFilter?.criteria?.length; i++)
       {
-         if(queryFilter.criteria[i].fieldName == newCriteria.fieldName)
+         if (queryFilter.criteria[i].fieldName == newCriteria.fieldName)
          {
             queryFilter.criteria[i] = newCriteria;
             found = true;
@@ -185,9 +191,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          }
       }
 
-      if(doClearCriteria)
+      if (doClearCriteria)
       {
-         if(found)
+         if (found)
          {
             queryFilter.criteria.splice(foundIndex, 1);
             setQueryFilter(queryFilter);
@@ -195,9 +201,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          return;
       }
 
-      if(!found)
+      if (!found)
       {
-         if(!queryFilter.criteria)
+         if (!queryFilter.criteria)
          {
             queryFilter.criteria = [];
          }
@@ -205,9 +211,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          found = true;
       }
 
-      if(found)
+      if (found)
       {
-         clearTimeout(debounceTimeout)
+         clearTimeout(debounceTimeout);
          debounceTimeout = setTimeout(() =>
          {
             setQueryFilter(queryFilter);
@@ -227,17 +233,17 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       const matches: QFilterCriteriaWithId[] = [];
       for (let i = 0; i < queryFilter?.criteria?.length; i++)
       {
-         if(queryFilter.criteria[i].fieldName == fieldName)
+         if (queryFilter.criteria[i].fieldName == fieldName)
          {
             matches.push(queryFilter.criteria[i] as QFilterCriteriaWithId);
          }
       }
 
-      if(matches.length == 0)
+      if (matches.length == 0)
       {
          return (null);
       }
-      else if(matches.length == 1)
+      else if (matches.length == 1)
       {
          return (matches[0]);
       }
@@ -254,8 +260,8 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
     *******************************************************************************/
    const handleRemoveQuickFilterField = (fieldName: string): void =>
    {
-      const index = quickFilterFieldNames.indexOf(fieldName)
-      if(index >= 0)
+      const index = quickFilterFieldNames.indexOf(fieldName);
+      if (index >= 0)
       {
          //////////////////////////////////////
          // remove this field from the query //
@@ -276,7 +282,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       setAddQuickFilterMenu(event.currentTarget);
       setAddQuickFilterOpenCounter(addQuickFilterOpenCounter + 1);
-   }
+   };
 
 
    /*******************************************************************************
@@ -285,7 +291,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    const closeAddQuickFilterMenu = () =>
    {
       setAddQuickFilterMenu(null);
-   }
+   };
 
 
    /*******************************************************************************
@@ -306,7 +312,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       const fieldName = newValue ? newValue.fieldName : null;
       if (fieldName)
       {
-         if(defaultQuickFilterFieldNameMap[fieldName])
+         if (defaultQuickFilterFieldNameMap[fieldName])
          {
             return;
          }
@@ -322,12 +328,12 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
             // 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")
+            if (reason != "modeToggleClicked" && reason != "defaultFilterLoaded" && reason != "savedFilterSelected" && reason != "activatedView")
             {
                setTimeout(() => document.getElementById(`quickFilter.${fieldName}`)?.click(), 5);
             }
          }
-         else if(reason == "columnMenu")
+         else if (reason == "columnMenu")
          {
             //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
             // if field was already on-screen, but user clicked an option from the columnMenu, then open the quick-filter field //
@@ -346,13 +352,13 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    const handleFieldListMenuSelection = (field: QFieldMetaData, table: QTableMetaData): void =>
    {
       let fullFieldName = field.name;
-      if(table && table.name != tableMetaData.name)
+      if (table && table.name != tableMetaData.name)
       {
          fullFieldName = `${table.name}.${field.name}`;
       }
 
       addQuickFilterField({fieldName: fullFieldName}, "selectedFromAddFilterMenu");
-   }
+   };
 
 
    /*******************************************************************************
@@ -361,7 +367,10 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
     *******************************************************************************/
    const openFilterBuilder = (e: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) =>
    {
-      gridApiRef.current.showFilterPanel();
+      if (!isQueryTooComplex)
+      {
+         gridApiRef.current.showFilterPanel();
+      }
    };
 
 
@@ -385,15 +394,15 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       queryFilter.criteria.splice(index, 1);
       setQueryFilter(queryFilter);
-   }
+   };
 
 
    /*******************************************************************************
     ** format the current query as a string for showing on-screen as a preview.
     *******************************************************************************/
-   const queryToAdvancedString = () =>
+   const queryToAdvancedString = (thisQueryFilter: QQueryFilter) =>
    {
-      if(queryFilter == null || !queryFilter.criteria)
+      if (queryFilter == null || !queryFilter.criteria)
       {
          return (<span></span>);
       }
@@ -401,19 +410,22 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       let counter = 0;
 
       return (
-         <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
-            {queryFilter.criteria.map((criteria, i) =>
+         <React.Fragment>
+            {thisQueryFilter.criteria?.map((criteria, i) =>
             {
                const {criteriaIsValid} = validateCriteria(criteria, null);
-               if(criteriaIsValid)
+               if (criteriaIsValid)
                {
                   counter++;
-
                   return (
                      <span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
-                        {counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{queryFilter.booleanOperator}&nbsp;</span> : <span/>}
+                        {counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
                         {FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
-                        {mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}><XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>}
+                        {!isQueryTooComplex && (
+                           mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}>
+                              <XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(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>
                   );
                }
@@ -422,7 +434,19 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                   return (<span />);
                }
             })}
-         </Box>
+
+            {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>
       );
    };
 
@@ -434,7 +458,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       if (newValue)
       {
-         if(newValue == "basic")
+         if (newValue == "basic")
          {
             ////////////////////////////////////////////////////////////////////////////////
             // we're always allowed to go to advanced -                                   //
@@ -443,7 +467,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
             if (!canFilterWorkAsBasic)
             {
-               console.log("Query cannot work as basic - so - not allowing toggle to basic.")
+               console.log("Query cannot work as basic - so - not allowing toggle to basic.");
                return;
             }
 
@@ -470,11 +494,16 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
     *******************************************************************************/
    const ensureAllFilterCriteriaAreActiveQuickFilters = (tableMetaData: QTableMetaData, queryFilter: QQueryFilter, reason: "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | string, newMode?: string) =>
    {
-      if(!tableMetaData || !queryFilter)
+      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)
       {
@@ -485,7 +514,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       }
 
       const modeToUse = newMode ?? mode;
-      if(modeToUse == "basic")
+      if (modeToUse == "basic")
       {
          for (let i = 0; i < queryFilter?.criteria?.length; i++)
          {
@@ -496,7 +525,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             }
          }
       }
-   }
+   };
 
 
    /*******************************************************************************
@@ -508,13 +537,22 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       for (let i = 0; i < queryFilter?.criteria?.length; i++)
       {
          const {criteriaIsValid} = validateCriteria(queryFilter.criteria[i], null);
-         if(criteriaIsValid)
+         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;
-   }
+   };
 
 
    /*******************************************************************************
@@ -523,11 +561,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    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)]
+      queryFilter.orderBys = [new QFilterOrderBy(fullFieldName, isAscending)];
 
       setQueryFilter(queryFilter);
       forceUpdate();
-   }
+   };
 
 
    /*******************************************************************************
@@ -542,11 +580,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
       const isAscending = event.target.innerHTML == "arrow_upward";
       const isDescending = event.target.innerHTML == "arrow_downward";
-      if(isAscending || isDescending)
+      if (isAscending || isDescending)
       {
          handleSetSort(field, table, isAscending);
       }
-   }
+   };
 
 
    /*******************************************************************************
@@ -561,30 +599,30 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          setQueryFilter(queryFilter);
          forceUpdate();
       }
-      catch(e)
+      catch (e)
       {
-         console.log(`Error toggling sort: ${e}`)
+         console.log(`Error toggling sort: ${e}`);
       }
    }
 
    /////////////////////////////////
    // set up the sort menu button //
    /////////////////////////////////
-   let sortButtonContents = <>Sort...</>
-   if(queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
+   let sortButtonContents = <>Sort...</>;
+   if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
    {
       const orderBy = queryFilter.orderBys[0];
       const orderByFieldName = orderBy.fieldName;
       const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
       const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
-      sortButtonContents =  <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>
+      sortButtonContents = <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
    }
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // this is being used as a version of like forcing that we get re-rendered if the query filter changes... //
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    const [lastIndex, setLastIndex] = useState(queryFilterJSON);
-   if(queryFilterJSON != lastIndex)
+   if (queryFilterJSON != lastIndex)
    {
       ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "defaultFilterLoaded");
       setLastIndex(queryFilterJSON);
@@ -594,16 +632,22 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    // set some status flags based on current filter //
    ///////////////////////////////////////////////////
    const hasValidFilters = queryFilter && countValidCriteria(queryFilter) > 0;
-   const {canFilterWorkAsBasic, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
+   const {canFilterWorkAsBasic, canFilterWorkAsAdvanced, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
    let reasonWhyBasicIsDisabled = null;
-   if(reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
+   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;
@@ -731,20 +775,20 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                               <Button
                                  className="filterBuilderButton"
                                  onClick={(e) => openFilterBuilder(e)}
-                                 {... filterBuilderMouseEvents}
+                                 {...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 {...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>
+                                 hasValidFilters && mouseOverElement == "filterBuilderButton" && <span {...filterBuilderMouseEvents} className="filterBuilderXIcon"><XIcon shade="accent" position="default" onClick={() => setShowClearFiltersWarning(true)} /></span>
                               }
                            </>
                         </Tooltip>
@@ -777,7 +821,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                            pb={"0.125rem"}
                            boxShadow={"inset 0px 0px 4px 2px #EFEFED"}
                         >
-                           {queryToAdvancedString()}
+                           <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
+                              {queryToAdvancedString(queryFilter)}
+                           </Box>
                         </Box>
                      }
                   </Box>

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -19,13 +19,12 @@
  */
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Skeleton} from "@mui/material";
+import {Alert, Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import parse from "html-react-parser";
-import React, {useContext, useEffect, useReducer, useState} from "react";
 import QContext from "QContext";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import TabPanel from "qqq/components/misc/TabPanel";
@@ -47,10 +46,11 @@ import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
 import ParentWidget from "qqq/components/widgets/ParentWidget";
 import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
 import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard";
-import Widget, {HeaderIcon, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, LabelComponent} from "qqq/components/widgets/Widget";
+import Widget, {HeaderIcon, LabelComponent, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT} 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";
 
 
@@ -91,9 +91,9 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    let initialSelectedTab = 0;
    let selectedTabKey: string = null;
-   if(parentWidgetMetaData && wrapWidgetsInTabPanels)
+   if (parentWidgetMetaData && wrapWidgetsInTabPanels)
    {
-      selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`
+      selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`;
       if (localStorage.getItem(selectedTabKey))
       {
          initialSelectedTab = Number(localStorage.getItem(selectedTabKey));
@@ -191,7 +191,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)
@@ -286,6 +286,21 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                   />
                )
             }
+            {
+               widgetMetaData.type === "alert" && widgetData[i]?.html && (
+                  <Widget
+                     omitPadding={true}
+                     widgetMetaData={widgetMetaData}
+                     widgetData={widgetData[i]}
+                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
+                  >
+                     <Alert severity={widgetData[i]?.alertType?.toLowerCase()}>{parse(widgetData[i]?.html)}</Alert>
+                  </Widget>
+               )
+            }
             {
                widgetMetaData.type === "usaMap" && (
                   <USMapWidget
@@ -550,7 +565,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
       );
    };
 
-   if(wrapWidgetsInTabPanels)
+   if (wrapWidgetsInTabPanels)
    {
       omitWrappingGridContainer = true;
    }
@@ -582,7 +597,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      </TabPanel>);
                   }
 
-                  return (<React.Fragment key={`${widgetMetaData.name}-${i}`}>{renderedWidget}</React.Fragment>)
+                  return (<React.Fragment key={`${widgetMetaData.name}-${i}`}>{renderedWidget}</React.Fragment>);
                })
             }
          </>
@@ -590,7 +605,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    const tabs = widgetMetaDataList && wrapWidgetsInTabPanels ?
       <Tabs
-         sx={{m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
+         sx={{
+            m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
             "& .MuiTabs-scroller": {
                ml: 0
             }
@@ -603,7 +619,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
             <Tab key={widgetMetaData.name} label={widgetMetaData.label} />
          ))}
       </Tabs>
-      : <></>
+      : <></>;
 
    return (
       widgetCount > 0 ? (

src/qqq/components/widgets/Widget.tsx

@@ -28,14 +28,14 @@ import Icon from "@mui/material/Icon";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
 import parse from "html-react-parser";
-import React, {useContext, useEffect, useState} from "react";
-import {NavigateFunction, useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import WidgetDropdownMenu, {DropdownOption} from "qqq/components/widgets/components/WidgetDropdownMenu";
 import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
+import React, {useContext, useEffect, useState} from "react";
+import {NavigateFunction, useNavigate} from "react-router-dom";
 
 export interface WidgetData
 {
@@ -169,15 +169,17 @@ export class AddNewRecordButton extends LabelComponent
    label: string;
    defaultValues: any;
    disabledFields: any;
+   addNewRecordCallback?: () => void;
 
 
-   constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues)
+   constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues, addNewRecordCallback?: () => void)
    {
       super();
       this.table = table;
       this.label = label;
       this.defaultValues = defaultValues;
       this.disabledFields = disabledFields;
+      this.addNewRecordCallback = addNewRecordCallback;
    }
 
    openEditForm = (navigate: any, table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any) =>
@@ -189,7 +191,7 @@ export class AddNewRecordButton extends LabelComponent
    {
       return (
          <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="-0.5rem">
-            <Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
+            <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>
       );
    };
@@ -238,12 +240,20 @@ export class Dropdown extends LabelComponent
             if (localStorageOption)
             {
                const id = localStorageOption.id;
-               for (let i = 0; i < this.options.length; i++)
+
+               if (this.dropdownMetaData.type == "DATE_PICKER")
                {
-                  if (this.options[i].id == id)
+                  defaultValue = id;
+               }
+               else
+               {
+                  for (let i = 0; i < this.options.length; i++)
                   {
-                     defaultValue = this.options[i];
-                     args.dropdownData[args.componentIndex] = defaultValue?.id;
+                     if (this.options[i].id == id)
+                     {
+                        defaultValue = this.options[i];
+                        args.dropdownData[args.componentIndex] = defaultValue?.id;
+                     }
                   }
                }
             }
@@ -297,6 +307,7 @@ export class Dropdown extends LabelComponent
          <Box mb={2} sx={{float: "right"}}>
             <WidgetDropdownMenu
                name={this.dropdownName}
+               type={this.dropdownMetaData.type}
                defaultValue={defaultValue}
                sx={{marginLeft: "1rem"}}
                label={label}
@@ -620,11 +631,11 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       setUsingLabelAsTitle(props.widgetData.isLabelPageTitle);
    }
 
-   const helpRoles = ["ALL_SCREENS"]
+   const helpRoles = ["ALL_SCREENS"];
    const slotName = "label";
    const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
 
-   if(showHelp)
+   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>;

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

@@ -31,7 +31,7 @@ export default function TextBlock({widgetMetaData, data}: StandardBlockComponent
 {
    return (
       <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
-         <span>{data.values.text}</span>
+         <span style={{fontSize: "1.000rem"}}>{data.values.text}</span>
       </BlockElementWrapper>
    );
 }

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

@@ -19,18 +19,23 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Collapse, Theme, InputAdornment} from "@mui/material";
+import {CalendarTodayOutlined} from "@mui/icons-material";
+import {Collapse, InputAdornment, Theme} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
 import TextField from "@mui/material/TextField";
 import {SxProps} from "@mui/system";
+import {DatePicker, DateValidationError, LocalizationProvider, PickerChangeHandlerContext, PickerValidDate} from "@mui/x-date-pickers";
+import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
+import dayjs from "dayjs";
 import {Field, Form, Formik} from "formik";
-import React, {useState} from "react";
+import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import MDInput from "qqq/components/legacy/MDInput";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useState} from "react";
 
 
 export interface DropdownOption
@@ -45,6 +50,7 @@ export interface DropdownOption
 interface Props
 {
    name: string;
+   type?: string;
    defaultValue?: any;
    label?: string;
    startIcon?: string;
@@ -96,7 +102,7 @@ function makeBackendValuesFromFrontendValues(frontendDefaultValues: StartAndEndD
    return (backendTimeValues);
 }
 
-function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disableClearable, allowBackAndForth, backAndForthInverted, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
+function WidgetDropdownMenu({name, type, defaultValue, label, startIcon, width, disableClearable, allowBackAndForth, backAndForthInverted, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
 {
    const [customTimesVisible, setCustomTimesVisible] = useState(defaultValue && defaultValue.id && defaultValue.id.startsWith("custom,"));
    const [customTimeValuesFrontend, setCustomTimeValuesFrontend] = useState(parseCustomTimeValuesFromDefaultValue(defaultValue) as StartAndEndDate);
@@ -105,16 +111,27 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
 
    const [isOpen, setIsOpen] = useState(false);
    const [value, setValue] = useState(defaultValue);
+   const [dateValue, setDateValue] = useState(defaultValue);
    const [inputValue, setInputValue] = useState("");
 
    const [backDisabled, setBackDisabled] = useState(false);
    const [forthDisabled, setForthDisabled] = useState(false);
 
+   const {accentColor} = useContext(QContext);
+
    const doForceOpen = (event: React.MouseEvent<HTMLDivElement>) =>
    {
       setIsOpen(true);
    };
 
+   useEffect(() =>
+   {
+      if (type == "DATE_PICKER")
+      {
+         handleOnChange(null, defaultValue, null);
+      }
+   }, [defaultValue]);
+
    function getSelectedIndex(value: DropdownOption)
    {
       let currentIndex = null;
@@ -129,9 +146,19 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
       return currentIndex;
    }
 
-   const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1) =>
+
+   const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1, type: string) =>
    {
       event.stopPropagation();
+
+      if (type == "DATE_PICKER")
+      {
+         let currentDate = new Date(dateValue);
+         currentDate.setDate(currentDate.getDate() + direction);
+         handleOnChange(null, currentDate, null);
+         return;
+      }
+
       let currentIndex = getSelectedIndex(value);
 
       if (currentIndex == null)
@@ -156,9 +183,26 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
    };
 
 
+   const handleDatePickerOnChange = (value: PickerValidDate, context: PickerChangeHandlerContext<DateValidationError>) =>
+   {
+      if (value.isValid())
+      {
+         handleOnChange(null, value.toDate(), null);
+      }
+   };
+
+
    const handleOnChange = (event: any, newValue: any, reason: string) =>
    {
-      setValue(newValue);
+      if (type == "DATE_PICKER")
+      {
+         setDateValue(newValue);
+         newValue = {"id": new Date(newValue).toLocaleDateString()};
+      }
+      else
+      {
+         setValue(newValue);
+      }
 
       const isTimeframeCustom = name == "timeframe" && newValue && newValue.id == "custom";
       setCustomTimesVisible(isTimeframeCustom);
@@ -250,86 +294,123 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
 
    const fontSize = "1rem";
    let optionPaddingLeftRems = 0.75;
-   if(startIcon)
+   if (startIcon)
    {
-      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75
+      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75;
    }
-   if(allowBackAndForth)
+   if (allowBackAndForth)
    {
       optionPaddingLeftRems += 2.5;
    }
 
-   return (
-      dropdownOptions ? (
-         <Box sx={{whiteSpace: "nowrap", display: "flex",
-            "& .MuiPopperUnstyled-root": {
-               border: `1px solid ${colors.grayLines.main}`,
-               borderTop: "none",
-               borderRadius: "0 0 0.75rem 0.75rem",
-               padding: 0,
-            }, "& .MuiPaper-rounded": {
-               borderRadius: "0 0 0.75rem 0.75rem",
-            }
-         }} className="dashboardDropdownMenu">
-            <Autocomplete
-               id={`${label}-combo-box`}
-
-               defaultValue={defaultValue}
-               value={value}
-               onChange={handleOnChange}
-               inputValue={inputValue}
-               onInputChange={handleOnInputChange}
-
-               isOptionEqualToValue={(option, value) => option.id === value.id}
-
-               open={isOpen}
-               onOpen={() => setIsOpen(true)}
-               onClose={() => setIsOpen(false)}
-
-               size="small"
-               disablePortal
-               disableClearable={disableClearable}
-               options={dropdownOptions}
-               sx={{
-                  ...sx,
-                  cursor: "pointer",
-                  display: "inline-block",
-                  "& .MuiOutlinedInput-notchedOutline": {
-                     border: "none"
-                  },
-               }}
-               renderInput={(params: any) =>
-                  <>
-                     <Box sx={{width: `${width}px`, background: "white", borderRadius: isOpen ? "0.75rem 0.75rem 0 0" : "0.75rem", border: `1px solid ${colors.grayLines.main}`, "& *": {cursor: "pointer"}}} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
-                        {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
-                        <TextField {...params} placeholder={label} sx={{
-                           "& .MuiInputBase-input": {
-                              fontSize: fontSize
-                           }
-                        }} InputProps={{...params.InputProps, startAdornment: startAdornment/*, endAdornment: endAdornment*/}}
-                        />
-                        {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
-                     </Box>
-                  </>
-               }
-               renderOption={(props, option: DropdownOption) => (
-                  <li {...props} style={{whiteSpace: "normal", fontSize: fontSize, paddingLeft: `${optionPaddingLeftRems}rem`}}>{option.label}</li>
-               )}
-
-               noOptionsText={<Box fontSize={fontSize}>No options found</Box>}
-
-               slotProps={{
-                  popper: {
-                     sx: {
-                        width: `${width}px!important`
-                     }
-                  }
-               }}
-            />
-            {customTimes}
+   if (type == "DATE_PICKER")
+   {
+      return (
+         <Box sx={{
+            ...sx,
+            background: "white",
+            width: "250px",
+            borderRadius: "0.75rem !important",
+            border: `1px solid ${colors.grayLines.main}`,
+            "& *": {cursor: "pointer"}
+         }} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
+            {allowBackAndForth && <IconButton sx={{padding: 0, margin: "8px"}} onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1, type)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+               <DatePicker
+                  sx={{paddingRight: "8px"}}
+                  defaultValue={dayjs(defaultValue)}
+                  name={name}
+                  value={dayjs(dateValue)}
+                  onChange={handleDatePickerOnChange}
+                  slots={{
+                     openPickerIcon: CalendarTodayOutlined
+                  }}
+                  slotProps={{
+                     openPickerIcon: {sx: {fontSize: "1.25rem !important", color: "#757575"}},
+                     actionBar: {actions: ["today"]},
+                     textField: {variant: "standard", InputProps: {sx: {fontSize: "16px", color: "#495057"}, disableUnderline: true}}
+                  }}
+               />
+            </LocalizationProvider>
+            {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1, type)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
          </Box>
-      ) : null
-   );
+      );
+   }
+   else
+   {
+      return (
+         dropdownOptions ? (
+            <Box sx={{
+               whiteSpace: "nowrap", display: "flex",
+               "& .MuiPopperUnstyled-root": {
+                  border: `1px solid ${colors.grayLines.main}`,
+                  borderTop: "none",
+                  borderRadius: "0 0 0.75rem 0.75rem",
+                  padding: 0,
+               }, "& .MuiPaper-rounded": {
+                  borderRadius: "0 0 0.75rem 0.75rem",
+               }
+            }} className="dashboardDropdownMenu">
+               <Autocomplete
+                  id={`${label}-combo-box`}
+
+                  defaultValue={defaultValue}
+                  value={value}
+                  onChange={handleOnChange}
+                  inputValue={inputValue}
+                  onInputChange={handleOnInputChange}
+
+                  isOptionEqualToValue={(option, value) => option.id === value.id}
+
+                  open={isOpen}
+                  onOpen={() => setIsOpen(true)}
+                  onClose={() => setIsOpen(false)}
+
+                  size="small"
+                  disablePortal
+                  disableClearable={disableClearable}
+                  options={dropdownOptions}
+                  sx={{
+                     ...sx,
+                     cursor: "pointer",
+                     display: "inline-block",
+                     "& .MuiOutlinedInput-notchedOutline": {
+                        border: "none"
+                     },
+                  }}
+                  renderInput={(params: any) =>
+                     <>
+                        <Box sx={{width: `${width}px`, background: "white", borderRadius: isOpen ? "0.75rem 0.75rem 0 0" : "0.75rem", border: `1px solid ${colors.grayLines.main}`, "& *": {cursor: "pointer"}}} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
+                           {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1, type)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
+                           <TextField {...params} placeholder={label} sx={{
+                              "& .MuiInputBase-input": {
+                                 fontSize: fontSize
+                              }
+                           }} InputProps={{...params.InputProps, startAdornment: startAdornment/*, endAdornment: endAdornment*/}}
+                           />
+                           {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1, type)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
+                        </Box>
+                     </>
+                  }
+                  renderOption={(props, option: DropdownOption) => (
+                     <li {...props} style={{whiteSpace: "normal", fontSize: fontSize, paddingLeft: `${optionPaddingLeftRems}rem`}}>{option.label}</li>
+                  )}
+
+                  noOptionsText={<Box fontSize={fontSize}>No options found</Box>}
+
+                  slotProps={{
+                     popper: {
+                        sx: {
+                           width: `${width}px!important`
+                        }
+                     }
+                  }}
+               />
+               {customTimes}
+            </Box>
+         ) : null
+      );
+   }
 }
 
 export default WidgetDropdownMenu;

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

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

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

@@ -25,28 +25,53 @@ import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
-import {DataGridPro, GridCallbackDetails, GridEventListener, GridFilterModel, gridPreferencePanelStateSelector, GridRowParams, GridSelectionModel, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, MuiEvent, useGridApiContext, useGridApiEventHandler, useGridSelector} from "@mui/x-data-grid-pro";
-import React, {useEffect, useRef, useState} from "react";
-import {useNavigate, Link} from "react-router-dom";
-import Widget, {AddNewRecordButton, LabelComponent} from "qqq/components/widgets/Widget";
+import {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([]);
@@ -74,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. //
@@ -103,6 +128,28 @@ 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);
@@ -195,7 +242,7 @@ 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))
    }
 
 
@@ -204,13 +251,18 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
    /////////////////////////////////////////////////////////////////
    const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
    {
+      if(disableRowClick)
+      {
+         return;
+      }
+
       (async () =>
       {
          const qInstance = await qController.loadMetaData()
          let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
          if(tablePath)
          {
-            tablePath = `${tablePath}/${params.id}`;
+            tablePath = `${tablePath}/${params.row[data.childTableMetaData.primaryKeyField]}`;
             DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance);
          }
       })();
@@ -266,6 +318,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
                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

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

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

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

@@ -21,8 +21,8 @@
 
 import Box from "@mui/material/Box";
 import {Theme} from "@mui/material/styles";
-import {ReactNode} from "react";
 import colors from "qqq/assets/theme/base/colors";
+import {ReactNode} from "react";
 
 // Declaring prop types for DataTableBodyCell
 interface Props
@@ -49,7 +49,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
             "@media (max-width: 1440px)": {
                fontSize: "0.875rem"
             },
-            "&:nth-child(1)": {
+            "&:nth-of-type(1)": {
                paddingLeft: "1rem"
             },
             "&:last-child": {

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

@@ -23,9 +23,9 @@ import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
-import {ReactNode} from "react";
 import colors from "qqq/assets/theme/base/colors";
 import {useMaterialUIController} from "qqq/context";
+import {ReactNode} from "react";
 
 // Declaring props types for DataTableHeadCell
 interface Props
@@ -50,7 +50,7 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
          px={1.5}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
             borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
-            "&:nth-child(1)": {
+            "&:nth-of-type(1)": {
                paddingLeft: "1rem"
             },
             "&:last-child": {

src/qqq/models/query/RecordQueryView.ts

@@ -63,6 +63,8 @@ export default class RecordQueryView
 
       view.queryFilter = json.queryFilter as QQueryFilter;
 
+      FilterUtils.stripAwayIncompleteCriteria(view.queryFilter)
+
       //////////////////////////////////////////////////////////////////////////////////////////
       // it's important that some criteria values exist as expression objects - so - do that. //
       //////////////////////////////////////////////////////////////////////////////////////////

src/qqq/pages/processes/ProcessRun.tsx

@@ -47,9 +47,6 @@ import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
 import FormData from "form-data";
 import {Form, Formik} from "formik";
 import parse from "html-react-parser";
-import React, {useContext, useEffect, useState} from "react";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
-import * as Yup from "yup";
 import QContext from "QContext";
 import {QCancelButton, QSubmitButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
@@ -66,6 +63,9 @@ import {TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT} from "qqq/pages/records/query/Reco
 import Client from "qqq/utils/qqq/Client";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useState} from "react";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
+import * as Yup from "yup";
 
 
 interface Props
@@ -91,7 +91,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    const processNameParam = useParams().processName;
    const processName = process === null ? processNameParam : process.name;
    let tableVariantLocalStorageKey: string | null = null;
-   if(table)
+   if (table)
    {
       tableVariantLocalStorageKey = `${TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT}.${table.name}`;
    }
@@ -416,10 +416,10 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                //////////////////////////////////////////////////
                step.components && (step.components.map((component: QFrontendComponent, index: number) =>
                {
-                  let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"]
-                  if(component.type == QComponentType.BULK_EDIT_FORM)
+                  let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"];
+                  if (component.type == QComponentType.BULK_EDIT_FORM)
                   {
-                     helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
+                     helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"];
                   }
 
                   return (
@@ -1068,7 +1068,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
 
    const handlePermissionDenied = (e: any): boolean =>
    {
-      if ((e as QException).status === "403")
+      if ((e as QException).status === 403)
       {
          setProcessError(`You do not have permission to run this ${isReport ? "report" : "process"}.`, true);
          return (true);

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

@@ -44,11 +44,9 @@ import LinearProgress from "@mui/material/LinearProgress";
 import MenuItem from "@mui/material/MenuItem";
 import Modal from "@mui/material/Modal";
 import Tooltip from "@mui/material/Tooltip";
-import {ColumnHeaderFilterIconButtonProps, DataGridPro, GridCallbackDetails, GridColDef, GridColumnHeaderParams, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnResizeParams, GridColumnsMenuItem, GridColumnVisibilityModel, GridDensity, GridEventListener, GridFilterMenuItem, GridPinnedColumns, gridPreferencePanelStateSelector, GridPreferencePanelsValue, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridApiRef, useGridSelector} from "@mui/x-data-grid-pro";
+import {ColumnHeaderFilterIconButtonProps, DataGridPro, GridCallbackDetails, GridColDef, GridColumnHeaderParams, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnResizeParams, GridColumnVisibilityModel, GridDensity, GridEventListener, GridPinnedColumns, gridPreferencePanelStateSelector, GridPreferencePanelsValue, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarContainer, GridToolbarDensitySelector, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridApiRef, useGridSelector} from "@mui/x-data-grid-pro";
 import {GridRowModel} from "@mui/x-data-grid/models/gridRows";
 import FormData from "form-data";
-import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
-import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QCreateNewButton} from "qqq/components/buttons/DefaultButtons";
@@ -78,6 +76,8 @@ import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
 import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
+import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
 
 const CURRENT_SAVED_VIEW_ID_LOCAL_STORAGE_KEY_ROOT = "qqq.currentSavedViewId";
 const DENSITY_LOCAL_STORAGE_KEY_ROOT = "qqq.density";
@@ -112,7 +112,7 @@ const getLoadingScreen = () =>
    return (<BaseLayout>
       &nbsp;
    </BaseLayout>);
-}
+};
 
 
 /*******************************************************************************
@@ -139,16 +139,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // manage "state" being passed from some screens (like delete) into query screen - by grabbing, and then deleting //
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   if(location.state)
+   if (location.state)
    {
       let state: any = location.state;
-      if(state["deleteSuccess"])
+      if (state["deleteSuccess"])
       {
          setShowSuccessfullyDeletedAlert(true);
          delete state["deleteSuccess"];
       }
 
-      if(state["warning"])
+      if (state["warning"])
       {
          setWarningAlert(state["warning"]);
          delete state["warning"];
@@ -181,7 +181,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const densityLocalStorageKey = `${DENSITY_LOCAL_STORAGE_KEY_ROOT}`;
 
    // only load things out of local storage on the first render
-   if(firstRender)
+   if (firstRender)
    {
       console.log("This is firstRender, so reading defaults from local storage...");
       if (localStorage.getItem(densityLocalStorageKey))
@@ -200,7 +200,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setFirstRender(false);
    }
 
-   if(defaultView == null)
+   if (defaultView == null)
    {
       defaultView = new RecordQueryView();
       defaultView.queryFilter = new QQueryFilter();
@@ -214,15 +214,15 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    /////////////////////////////////////////////////////////////////////////////////////////
    // in case the view is missing any of these attributes, give them a reasonable default //
    /////////////////////////////////////////////////////////////////////////////////////////
-   if(!defaultView.rowsPerPage)
+   if (!defaultView.rowsPerPage)
    {
       defaultView.rowsPerPage = defaultRowsPerPage;
    }
-   if(!defaultView.mode)
+   if (!defaultView.mode)
    {
       defaultView.mode = defaultMode;
    }
-   if(!defaultView.quickFilterFieldNames)
+   if (!defaultView.quickFilterFieldNames)
    {
       defaultView.quickFilterFieldNames = [];
    }
@@ -246,7 +246,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // state of the page - e.g., have we loaded meta data?  what about the initial view?  or are we ready to render records. //
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   const [pageState, setPageState] = useState("initial" as PageState)
+   const [pageState, setPageState] = useState("initial" as PageState);
 
    /////////////////////////////////
    // meta-data and derived state //
@@ -260,8 +260,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ///////////////////////////////////////////
    // state of the view of the query screen //
    ///////////////////////////////////////////
-   const [view, setView] = useState(defaultView)
-   const [viewAsJson, setViewAsJson] = useState(JSON.stringify(defaultView))
+   const [view, setView] = useState(defaultView);
+   const [viewAsJson, setViewAsJson] = useState(JSON.stringify(defaultView));
    const [queryFilter, setQueryFilter] = useState(defaultView.queryFilter);
    const [queryColumns, setQueryColumns] = useState(defaultView.queryColumns);
    const [lastFetchedQFilterJSON, setLastFetchedQFilterJSON] = useState("");
@@ -309,7 +309,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    /////////////////////////////////////////
    const [columnStatsFieldName, setColumnStatsFieldName] = useState(null as string);
    const [columnStatsField, setColumnStatsField] = useState(null as QFieldMetaData);
-   const [columnStatsFieldTableName, setColumnStatsFieldTableName] = useState(null as string)
+   const [columnStatsFieldTableName, setColumnStatsFieldTableName] = useState(null as string);
    const [filterForColumnStats, setFilterForColumnStats] = useState(null as QQueryFilter);
 
    ///////////////////////////////////////////////////
@@ -353,14 +353,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ///////////////////////////////////////////////////////////////////////////////////////////
    // add a LoadingState object, in case the initial loads (of meta data and view) are slow //
    ///////////////////////////////////////////////////////////////////////////////////////////
-   const [pageLoadingState, _] = useState(new LoadingState(forceUpdate))
+   const [pageLoadingState, _] = useState(new LoadingState(forceUpdate));
 
-   if(isFirstRenderAfterChangingTables)
+   if (isFirstRenderAfterChangingTables)
    {
       setIsFirstRenderAfterChangingTables(false);
 
       console.log("This is the first render after changing tables - so - setting state based on 'defaults' from localStorage");
-      setView(defaultView)
+      setView(defaultView);
    }
 
    /*******************************************************************************
@@ -386,7 +386,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          const criteria = queryFilter.criteria[i];
          const {criteriaIsValid} = validateCriteria(criteria, null);
          const fieldName = criteria.fieldName;
-         if(criteriaIsValid && fieldName && fieldName.indexOf(".") > -1)
+         if (criteriaIsValid && fieldName && fieldName.indexOf(".") > -1)
          {
             visibleJoinTables.add(fieldName.split(".")[0]);
          }
@@ -407,7 +407,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             const join = tableMetaData.exposedJoins[i];
             if (visibleJoinTables.has(join.joinTable.name))
             {
-               if(join.isMany)
+               if (join.isMany)
                {
                   return (true);
                }
@@ -415,7 +415,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          }
       }
       return (false);
-   }
+   };
 
 
    /*******************************************************************************
@@ -423,7 +423,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
     *******************************************************************************/
    const prepQueryFilterForBackend = (sourceFilter: QQueryFilter) =>
    {
-      const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.booleanOperator);
+      const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.subFilters, sourceFilter.booleanOperator);
       for (let i = 0; i < sourceFilter?.criteria?.length; i++)
       {
          const criteria = sourceFilter.criteria[i];
@@ -442,16 +442,26 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
                // else push a clone of the criteria - since it may get manipulated below (convertFilterPossibleValuesToIds) //
                ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               const [field] = FilterUtils.getField(tableMetaData, criteria.fieldName)
+               const [field] = FilterUtils.getField(tableMetaData, criteria.fieldName);
                filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, FilterUtils.cleanseCriteriaValueForQQQ(criteria.values, field)));
             }
          }
       }
+
+      /////////////////////////////////////////
+      // recursively prep subfilters as well //
+      /////////////////////////////////////////
+      let subFilters = [] as QQueryFilter[];
+      for (let j = 0; j < sourceFilter?.subFilters?.length; j++)
+      {
+         subFilters.push(prepQueryFilterForBackend(sourceFilter.subFilters[j]));
+      }
+
+      filterForBackend.subFilters = subFilters;
       filterForBackend.skip = pageNumber * rowsPerPage;
       filterForBackend.limit = rowsPerPage;
-
       return filterForBackend;
-   }
+   };
 
 
    /*******************************************************************************
@@ -475,7 +485,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ///////////////////////////////////////////
    // build the export menu, for the header //
    ///////////////////////////////////////////
-   let exportMenu = <></>
+   let exportMenu = <></>;
    try
    {
       const exportMenuItemRestProps =
@@ -485,7 +495,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             columnsModel: columnsModel,
             columnVisibilityModel: columnVisibilityModel,
             queryFilter: prepQueryFilterForBackend(queryFilter)
-         }
+         };
 
       exportMenu = (<>
          <IconButton sx={{p: 0, fontSize: "0.75rem", mb: 1, color: colors.secondary.main, fontVariationSettings: "'wght' 100"}} onClick={openExportMenu}><Icon fontSize="small">save_alt</Icon></IconButton>
@@ -503,7 +513,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          </Menu>
       </>);
    }
-   catch(e)
+   catch (e)
    {
       console.log("Error preparing export menu for page header: " + e);
    }
@@ -515,7 +525,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       let label: string = tableMetaData?.label ?? "";
 
-      if(currentSavedView?.values?.get("label"))
+      if (currentSavedView?.values?.get("label"))
       {
          label += " / " + currentSavedView?.values?.get("label");
       }
@@ -536,12 +546,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          }
 
          let joinLabelsString = joinLabels.join(", ");
-         if(joinLabels.length == 2)
+         if (joinLabels.length == 2)
          {
             let lastCommaIndex = joinLabelsString.lastIndexOf(",");
             joinLabelsString = joinLabelsString.substring(0, lastCommaIndex) + " and " + joinLabelsString.substring(lastCommaIndex + 1);
          }
-         if(joinLabels.length > 2)
+         if (joinLabels.length > 2)
          {
             let lastCommaIndex = joinLabelsString.lastIndexOf(",");
             joinLabelsString = joinLabelsString.substring(0, lastCommaIndex) + ", and " + joinLabelsString.substring(lastCommaIndex + 1);
@@ -552,9 +562,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             <ul style={{marginLeft: "1rem"}}>
                {joinLabels.map((name) => <li key={name}>{name}</li>)}
             </ul>
-         </div>
+         </div>;
 
-         return(
+         return (
             <div>
                {label} {exportMenu}
                <CustomWidthTooltip title={tooltipHTML}>
@@ -586,7 +596,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             </Tooltip>
          </Typography>
       );
-   }
+   };
 
    ///////////////////////
    // Keyboard handling //
@@ -598,16 +608,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          const type = (e.target as any).type;
          const validType = (type !== "text" && type !== "textarea" && type !== "input" && type !== "search");
 
-         if(validType && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess)
+         if (validType && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess)
          {
-            if (! e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
+            if (!e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                navigate(`${metaData?.getTablePathByName(tableName)}/create`);
             }
-            else if (! e.metaKey && e.key === "r")
+            else if (!e.metaKey && e.key === "r")
             {
-               e.preventDefault()
+               e.preventDefault();
                updateTable("'r' keyboard event");
             }
             /*
@@ -618,25 +628,25 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                gridApiRef.current.showPreferences(GridPreferencePanelsValue.columns)
             }
             */
-            else if (! e.metaKey && e.key === "f")
+            else if (!e.metaKey && e.key === "f")
             {
-               e.preventDefault()
+               e.preventDefault();
 
                // @ts-ignore
-               if(basicAndAdvancedQueryControlsRef?.current?.getCurrentMode() == "advanced")
+               if (basicAndAdvancedQueryControlsRef?.current?.getCurrentMode() == "advanced")
                {
-                  gridApiRef.current.showFilterPanel()
+                  gridApiRef.current.showFilterPanel();
                }
             }
          }
-      }
+      };
 
-      document.addEventListener("keydown", down)
+      document.addEventListener("keydown", down);
       return () =>
       {
-         document.removeEventListener("keydown", down)
-      }
-   }, [dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess])
+         document.removeEventListener("keydown", down);
+      };
+   }, [dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess]);
 
 
    /*******************************************************************************
@@ -645,7 +655,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const urlLooksLikeProcess = (): boolean =>
    {
       return (pathParts[pathParts.length - 2] === tableName);
-   }
+   };
 
    //////////////////////////////////////////////////////////////////////////////////////////////
    // monitor location changes - if our url looks like a savedView, then load that view, kinda //
@@ -701,9 +711,28 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const doSetView = (view: RecordQueryView): void =>
    {
       setView(view);
-      setViewAsJson(JSON.stringify(view));
-      localStorage.setItem(viewLocalStorageKey, JSON.stringify(view));
-   }
+      const viewAsJSON = JSON.stringify(view);
+      setViewAsJson(viewAsJSON);
+
+      try
+      {
+         ////////////////////////////////////////////////////////////////////////////////////
+         // in case there's an incomplete criteria in the view (e.g., w/o a fieldName),    //
+         // don't store that in local storage - we don't want that, it's messy, and it     //
+         // has caused fails in the past.  So, clone the view, and strip away such things. //
+         ////////////////////////////////////////////////////////////////////////////////////
+         const viewForLocalStorage: RecordQueryView = JSON.parse(viewAsJSON);
+         if (viewForLocalStorage?.queryFilter?.criteria?.length > 0)
+         {
+            FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter)
+         }
+         localStorage.setItem(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
+      }
+      catch(e)
+      {
+         console.log("Error storing view in local storage: " + e)
+      }
+   };
 
 
    /*******************************************************************************
@@ -712,10 +741,10 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const handleColumnVisibilityChange = (columnVisibilityModel: GridColumnVisibilityModel) =>
    {
       setColumnVisibilityModel(columnVisibilityModel);
-      queryColumns.updateVisibility(columnVisibilityModel)
+      queryColumns.updateVisibility(columnVisibilityModel);
 
       view.queryColumns = queryColumns;
-      doSetView(view)
+      doSetView(view);
 
       forceUpdate();
    };
@@ -730,12 +759,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       // set the field's value in the view //
       ///////////////////////////////////////
       let fieldName = field.name;
-      if(table && table.name != tableMetaData.name)
+      if (table && table.name != tableMetaData.name)
       {
          fieldName = `${table.name}.${field.name}`;
       }
 
-      view.queryColumns.setIsVisible(fieldName, newValue)
+      view.queryColumns.setIsVisible(fieldName, newValue);
 
       /////////////////////
       // update the grid //
@@ -745,13 +774,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       /////////////////////////////////////////////////
       // update the view (e.g., write local storage) //
       /////////////////////////////////////////////////
-      doSetView(view)
+      doSetView(view);
 
       ///////////////////
       // ole' faithful //
       ///////////////////
       forceUpdate();
-   }
+   };
 
 
    /*******************************************************************************
@@ -790,7 +819,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setPinnedColumns(queryColumns.toGridPinnedColumns());
       setColumnVisibilityModel(queryColumns.toColumnVisibilityModel());
       setColumnsModel(columns);
-   }
+   };
 
 
    /*******************************************************************************
@@ -799,7 +828,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const promptForTableVariantSelection = () =>
    {
       setTableVariantPromptOpen(true);
-   }
+   };
 
 
    /*******************************************************************************
@@ -813,10 +842,10 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       for (let i = 0; i < queryFilter?.orderBys?.length; i++)
       {
          const fieldName = queryFilter.orderBys[i].fieldName;
-         if(fieldName.indexOf(".") > -1)
+         if (fieldName.indexOf(".") > -1)
          {
             const joinTableName = fieldName.replaceAll(/\..*/g, "");
-            if(!vjtToUse.has(joinTableName))
+            if (!vjtToUse.has(joinTableName))
             {
                const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
                handleChangeOneColumnVisibility(field, fieldTable, true);
@@ -826,7 +855,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       }
 
       return (rs);
-   }
+   };
 
 
    /*******************************************************************************
@@ -834,13 +863,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
     *******************************************************************************/
    const updateTable = (reason?: string) =>
    {
-      if(pageState != "ready")
+      if (pageState != "ready")
       {
          console.log(`In updateTable, but pageSate[${pageState}] is not ready, so returning with noop`);
          return;
       }
 
-      if(tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen))
+      if (tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen))
       {
          console.log("In updateTable, but a variant is needed, so returning with noop");
          return;
@@ -894,7 +923,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             });
          }
 
-         if(!tableMetaData.capabilities.has(Capability.TABLE_QUERY))
+         if (!tableMetaData.capabilities.has(Capability.TABLE_QUERY))
          {
             console.log("Cannot update table - it does not have QUERY capability.");
             return;
@@ -969,7 +998,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          setDistinctRecords(countResults[latestQueryId][1]);
          delete countResults[latestQueryId];
       }
-      catch(e)
+      catch (e)
       {
          console.log(e);
       }
@@ -999,7 +1028,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       // count how many distinct primary keys are on this page //
       ///////////////////////////////////////////////////////////
       let distinctPrimaryKeySet = new Set<string>();
-      for(let i = 0; i < results.length; i++)
+      for (let i = 0; i < results.length; i++)
       {
          distinctPrimaryKeySet.add(results[i].values.get(tableMetaData.primaryKeyField) as string);
       }
@@ -1055,7 +1084,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setRowsPerPage(size);
 
       view.rowsPerPage = size;
-      doSetView(view)
+      doSetView(view);
    };
 
    /*******************************************************************************
@@ -1064,11 +1093,11 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const handlePinnedColumnsChange = (pinnedColumns: GridPinnedColumns) =>
    {
       setPinnedColumns(pinnedColumns);
-      queryColumns.setPinnedLeftColumns(pinnedColumns.left)
-      queryColumns.setPinnedRightColumns(pinnedColumns.right)
+      queryColumns.setPinnedLeftColumns(pinnedColumns.left);
+      queryColumns.setPinnedRightColumns(pinnedColumns.right);
 
       view.queryColumns = queryColumns;
-      doSetView(view)
+      doSetView(view);
    };
 
    /*******************************************************************************
@@ -1121,7 +1150,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       let selectedPrimaryKeys = new Set<string>();
       selectionModel.forEach((value: GridRowId, index: number) =>
       {
-         checkboxesChecked++
+         checkboxesChecked++;
          const valueToPush = latestQueryResults[value as number].values.get(tableMetaData.primaryKeyField);
          selectedPrimaryKeys.add(valueToPush as string);
       });
@@ -1150,7 +1179,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       queryColumns.updateColumnOrder(columnOrdering);
 
       view.queryColumns = queryColumns;
-      doSetView(view)
+      doSetView(view);
    };
 
 
@@ -1162,7 +1191,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       queryColumns.updateColumnWidth(params.colDef.field, params.width);
 
       view.queryColumns = queryColumns;
-      doSetView(view)
+      doSetView(view);
    };
 
 
@@ -1185,13 +1214,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       {
          const fieldName = gridSort[i].field;
          const isAscending = gridSort[i].sort == "asc";
-         queryFilter.orderBys.push(new QFilterOrderBy(fieldName, isAscending))
+         queryFilter.orderBys.push(new QFilterOrderBy(fieldName, isAscending));
       }
 
       //////////////////////////////////////////////////////////
       // set a default order-by, if none is otherwise present //
       //////////////////////////////////////////////////////////
-      if(queryFilter.orderBys.length == 0)
+      if (queryFilter.orderBys.length == 0)
       {
          queryFilter.orderBys.push(new QFilterOrderBy(tableMetaData.primaryKeyField, false));
       }
@@ -1209,7 +1238,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const handleColumnHeaderClick = (params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails): void =>
    {
       event.defaultMuiPrevented = true;
-   }
+   };
 
 
    /*******************************************************************************
@@ -1227,7 +1256,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
       setRowsPerPage(view.rowsPerPage ?? defaultRowsPerPage);
       setMode(view.mode ?? defaultMode);
-      setQuickFilterFieldNames(view.quickFilterFieldNames ?? []) // todo not i think ?? getDefaultQuickFilterFieldNames(tableMetaData));
+      setQuickFilterFieldNames(view.quickFilterFieldNames ?? []); // todo not i think ?? getDefaultQuickFilterFieldNames(tableMetaData));
 
       //////////////////////////////////////////////////////////////////////////////////////////////////
       // do this last - in case anything in the view got modified in any of those other doSet methods //
@@ -1240,7 +1269,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////////////////////////////////////////////////////////////////////////////////
       // @ts-ignore
       setTimeout(() => basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "activatedView"));
-   }
+   };
 
 
    /*******************************************************************************
@@ -1258,7 +1287,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////////////////////////////
       // in case there's no orderBys, set default here //
       ///////////////////////////////////////////////////
-      if(!queryFilter.orderBys || queryFilter.orderBys.length == 0)
+      if (!queryFilter.orderBys || queryFilter.orderBys.length == 0)
       {
          queryFilter.orderBys = [new QFilterOrderBy(tableMetaData?.primaryKeyField, false)];
          view.queryFilter = queryFilter;
@@ -1284,17 +1313,17 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////////////////////////
       // put this query filter in the current view //
       ///////////////////////////////////////////////
-      if(!isFromActivateView)
+      if (!isFromActivateView)
       {
          view.queryFilter = queryFilter;
-         doSetView(view)
+         doSetView(view);
       }
 
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
       // this force-update causes a re-render that'll see the changed filter hash/json string, and make an updateTable run (if appropriate) //
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
       forceUpdate();
-   }
+   };
 
    /*******************************************************************************
     ** Wrapper around setQueryColumns that also sets column models for the grid, puts
@@ -1324,12 +1353,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////////////////////
       // put these columns in the current view //
       ///////////////////////////////////////////
-      if(!isFromActivateView)
+      if (!isFromActivateView)
       {
          view.queryColumns = queryColumns;
-         doSetView(view)
+         doSetView(view);
       }
-   }
+   };
 
 
    /*******************************************************************************
@@ -1341,7 +1370,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setQuickFilterFieldNames([...(names ?? [])]);
 
       view.quickFilterFieldNames = names;
-      doSetView(view)
+      doSetView(view);
    };
 
 
@@ -1354,7 +1383,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
       view.mode = newValue;
       doSetView(view);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1372,7 +1401,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       }
 
       return (selectedIds.length);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1403,7 +1432,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       }
 
       return "";
-   }
+   };
 
 
    /*******************************************************************************
@@ -1559,7 +1588,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
     *******************************************************************************/
    const doSetCurrentSavedView = (savedViewRecord: QRecord) =>
    {
-      if(savedViewRecord == null)
+      if (savedViewRecord == null)
       {
          console.log("doSetCurrentView called with a null view record - calling doClearCurrentSavedView instead.");
          doClearCurrentSavedView();
@@ -1568,7 +1597,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
       setCurrentSavedView(savedViewRecord);
 
-      const viewJson = savedViewRecord.values.get("viewJson")
+      const viewJson = savedViewRecord.values.get("viewJson");
       const newView = RecordQueryView.buildFromJSON(viewJson);
 
       activateView(newView);
@@ -1577,7 +1606,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       // todo can/should/does this move into the view's "identity"? //
       ////////////////////////////////////////////////////////////////
       localStorage.setItem(currentSavedViewLocalStorageKey, `${savedViewRecord.values.get("id")}`);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1587,7 +1616,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       setCurrentSavedView(null);
       localStorage.removeItem(currentSavedViewLocalStorageKey);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1603,7 +1632,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       newDefaultView.quickFilterFieldNames = [];
       newDefaultView.mode = defaultMode;
       return newDefaultView;
-   }
+   };
 
    /*******************************************************************************
     ** event handler for SavedViews component, to handle user selecting a view
@@ -1638,9 +1667,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          ///////////////////////////////////////////////
          // activate a new default view for the table //
          ///////////////////////////////////////////////
-         activateView(buildTableDefaultView(tableMetaData))
+         activateView(buildTableDefaultView(tableMetaData));
       }
-   }
+   };
 
    /*******************************************************************************
     ** utility function to fetch a saved view from the backend.
@@ -1668,7 +1697,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          // such as, making values be what they'd be in the UI (not necessarily      //
          // what they're like in the backend); similarly, set anything that's unset. //
          //////////////////////////////////////////////////////////////////////////////
-         const viewJson = qRecord.values.get("viewJson")
+         const viewJson = qRecord.values.get("viewJson");
          const newView = RecordQueryView.buildFromJSON(viewJson);
 
          setWarningAlert(null);
@@ -1684,16 +1713,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          ///////////////////////////
          // set columns if absent //
          ///////////////////////////
-         if(!newView.queryColumns || !newView.queryColumns.columns || newView.queryColumns.columns?.length == 0)
+         if (!newView.queryColumns || !newView.queryColumns.columns || newView.queryColumns.columns?.length == 0)
          {
             newView.queryColumns = QQueryColumns.buildDefaultForTable(tableMetaData);
          }
 
-         qRecord.values.set("viewJson", JSON.stringify(newView))
+         qRecord.values.set("viewJson", JSON.stringify(newView));
       }
 
       return (qRecord);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1793,12 +1822,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       }
 
       const removedFieldCount = removedFieldNames.size;
-      if(removedFieldCount > 0)
+      if (removedFieldCount > 0)
       {
          const plural = removedFieldCount > 1;
          setWarningAlert(`${removedFieldCount} field${plural ? "s" : ""} that ${plural ? "were" : "was"} part of this view ${plural ? "are" : "is"} no longer in this table, and ${plural ? "were" : "was"} removed from this view (${[...removedFieldNames.values()].join(", ")}).`);
       }
-   }
+   };
 
 
    /*******************************************************************************
@@ -1808,7 +1837,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       const newCriteria = new QFilterCriteria(fieldName, null, []);
 
-      if(!queryFilter.criteria)
+      if (!queryFilter.criteria)
       {
          queryFilter.criteria = [];
       }
@@ -1834,8 +1863,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////
       // open the filter panel //
       ///////////////////////////
-      gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters)
-   }
+      gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters);
+   };
 
 
    /*******************************************************************************
@@ -1930,7 +1959,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                <MenuItem onClick={(e) =>
                {
                   hideMenu(e);
-                  if(mode == "advanced")
+                  if (mode == "advanced")
                   {
                      handleColumnMenuAdvancedFilterSelection(currentColumn.field);
                   }
@@ -1989,24 +2018,24 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          for (let i = 0; i < queryFilter?.criteria?.length; i++)
          {
             const criteria = queryFilter.criteria[i];
-            if(criteria.fieldName == props.field && validateCriteria(criteria, null).criteriaIsValid)
+            if (criteria.fieldName == props.field && validateCriteria(criteria, null).criteriaIsValid)
             {
                showFilter = true;
             }
          }
 
-         if(showFilter)
+         if (showFilter)
          {
             return (<IconButton size="small" sx={{p: "2px"}} onClick={(event) =>
             {
-               if(mode == "basic")
+               if (mode == "basic")
                {
                   // @ts-ignore !?
                   basicAndAdvancedQueryControlsRef.current.addField(props.field);
                }
                else
                {
-                  gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters)
+                  gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters);
                }
 
                event.stopPropagation();
@@ -2110,35 +2139,35 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
        *******************************************************************************/
       const selectionMenuCallback = (selectedIndex: number) =>
       {
-         if(selectedIndex == 0)
+         if (selectedIndex == 0)
          {
             ///////////////
             // this page //
             ///////////////
             programmaticallySelectSomeOrAllRows();
-            setSelectFullFilterState("checked")
+            setSelectFullFilterState("checked");
          }
-         else if(selectedIndex == 1)
+         else if (selectedIndex == 1)
          {
             ///////////////////////
             // full query result //
             ///////////////////////
             programmaticallySelectSomeOrAllRows();
-            setSelectFullFilterState("filter")
+            setSelectFullFilterState("filter");
          }
-         else if(selectedIndex == 2)
+         else if (selectedIndex == 2)
          {
             ////////////////////////////
             // subset of query result //
             ////////////////////////////
             setSelectionSubsetSizePromptOpen(true);
          }
-         else if(selectedIndex == 3)
+         else if (selectedIndex == 3)
          {
             /////////////////////
             // clear selection //
             /////////////////////
-            setSelectFullFilterState("n/a")
+            setSelectFullFilterState("n/a");
             setRowSelectionModel([]);
             setSelectedIds([]);
          }
@@ -2160,13 +2189,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                {
                   setSelectionSubsetSizePromptOpen(false);
 
-                  if(value !== undefined)
+                  if (value !== undefined)
                   {
-                     if(typeof value === "number" && value > 0)
+                     if (typeof value === "number" && value > 0)
                      {
                         programmaticallySelectSomeOrAllRows(value);
                         setSelectionSubsetSize(value);
-                        setSelectFullFilterState("filterSubset")
+                        setSelectFullFilterState("filterSubset");
                      }
                      else
                      {
@@ -2270,7 +2299,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    /////////////////////////////////////////////////////////////////////////////////
    const [filterHash, setFilterHash] = useState("");
 
-   if(pageState == "ready")
+   if (pageState == "ready")
    {
       const newFilterHash = JSON.stringify(prepQueryFilterForBackend(queryFilter));
       if (filterHash != newFilterHash)
@@ -2383,7 +2412,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                for (let i = 0; i < queryFilter?.criteria?.length; i++)
                {
                   const criteria = queryFilter.criteria[i];
-                  if(criteria.operator == QCriteriaOperator.NOT_EQUALS)
+                  if (criteria.operator == QCriteriaOperator.NOT_EQUALS)
                   {
                      criteria.operator = QCriteriaOperator.NOT_EQUALS_OR_IS_NULL;
                   }
@@ -2401,14 +2430,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                /////////////////////////////////////////////////////////////////////////////////////////////
                doClearCurrentSavedView();
             }
-            catch(e)
+            catch (e)
             {
                setAlertContent("Error parsing filter from URL");
             }
          }
          else if (viewIdInLocation)
          {
-            if(view.viewIdentity == `savedView:${viewIdInLocation}`)
+            if (view.viewIdentity == `savedView:${viewIdInLocation}`)
             {
                /////////////////////////////////////////////////////////////////////////////////////////////////
                // if the view id in the location is the same as the view that was most-recently active here,  //
@@ -2453,7 +2482,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                // so the useEffect that monitors location will see the change, and will set viewIdInLocation      //
                // so upon a re-render we'll hit this block again.                                                 //
                /////////////////////////////////////////////////////////////////////////////////////////////////////
-               setPageState("loadedMetaData")
+               setPageState("loadedMetaData");
                return;
             }
 
@@ -2487,7 +2516,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setTimeout(() =>
       {
          // @ts-ignore
-         basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "defaultFilterLoaded")
+         basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "defaultFilterLoaded");
       });
 
       console.log("finished preparing grid, going to page state ready");
@@ -2509,13 +2538,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ////////////////////////////////////////////////////////////////////////
    useEffect(() =>
    {
-      if(pageState == "ready")
+      if (pageState == "ready")
       {
-         pageLoadingState.setNotLoading()
+         pageLoadingState.setNotLoading();
 
-         if(!tableVariantPromptOpen)
+         if (!tableVariantPromptOpen)
          {
-            updateTable("pageState is now ready")
+            updateTable("pageState is now ready");
          }
       }
    }, [pageState, tableVariantPromptOpen]);
@@ -2544,7 +2573,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    /////////////////////////////////////////////////////////////////////////////////////////////
    if (tableMetaData && !tableMetaData.capabilities.has(Capability.TABLE_QUERY) && tableMetaData.capabilities.has(Capability.TABLE_GET))
    {
-      if(tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen))
+      if (tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen))
       {
          return (
             <BaseLayout>
@@ -2561,9 +2590,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       // if the table uses variants, then put the variant-selector into the goto dialog //
       ////////////////////////////////////////////////////////////////////////////////////
       let gotoVariantSubHeader = <></>;
-      if(tableMetaData?.usesVariants)
+      if (tableMetaData?.usesVariants)
       {
-         gotoVariantSubHeader = <Box mb={2}>{getTableVariantHeader(tableVariant)}</Box>
+         gotoVariantSubHeader = <Box mb={2}>{getTableVariantHeader(tableVariant)}</Box>;
       }
 
       return (
@@ -2576,7 +2605,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ///////////////////////////////////////////////////////////
    // render a loading screen if the page state isn't ready //
    ///////////////////////////////////////////////////////////
-   if(pageState != "ready")
+   if (pageState != "ready")
    {
       console.log(`page state is ${pageState}... no-op while those complete async's run...`);
       return (getLoadingScreen());
@@ -2586,13 +2615,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    // if the table isn't loaded yet, display loading screen.                                //
    // this shouldn't be possible, to be out-of-sync with pageState, but just as a fail-safe //
    ///////////////////////////////////////////////////////////////////////////////////////////
-   if(!tableMetaData)
+   if (!tableMetaData)
    {
       return (getLoadingScreen());
    }
 
    let savedViewsComponent = null;
-   if(metaData && metaData.processes.has("querySavedView"))
+   if (metaData && metaData.processes.has("querySavedView"))
    {
       savedViewsComponent = (<SavedViews qController={qController} metaData={metaData} tableMetaData={tableMetaData} view={view} viewAsJson={viewAsJson} currentSavedView={currentSavedView} tableDefaultView={tableDefaultView} viewOnChangeCallback={handleSavedViewChange} loadingSavedView={loadingSavedView} />);
    }
@@ -2615,9 +2644,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////
       const baseView = currentSavedView ? JSON.parse(currentSavedView.values.get("viewJson")) as RecordQueryView : tableDefaultView;
       const viewDiffs: string[] = [];
-      SavedViewUtils.diffColumns(tableMetaData, baseView, view, viewDiffs)
+      SavedViewUtils.diffColumns(tableMetaData, baseView, view, viewDiffs);
 
-      if(viewDiffs.length == 0 && currentSavedView)
+      if (viewDiffs.length == 0 && currentSavedView)
       {
          /////////////////////////////////////////////////////////////////
          // if 's a saved view, and it's "clean", show it in main style //
@@ -2626,7 +2655,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          buttonBorder = accentColor;
          buttonColor = "#FFFFFF";
       }
-      else if(viewDiffs.length > 0)
+      else if (viewDiffs.length > 0)
       {
          ///////////////////////////////////////////////////
          // else if there are diffs, show alt/light style //
@@ -2653,7 +2682,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             color: buttonColor,
             backgroundColor: buttonBackground,
          }
-      }
+      };
 
       return (<Box order="2">
          <FieldListMenu
@@ -2668,19 +2697,19 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             handleToggleField={handleChangeOneColumnVisibility}
          />
       </Box>);
-   }
+   };
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    // these numbers help set the height of the grid (so page won't scroll) based on spcae above & below it //
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    let spaceBelowGrid = 40;
    let spaceAboveGrid = 205;
-   if(tableMetaData?.usesVariants)
+   if (tableMetaData?.usesVariants)
    {
       spaceAboveGrid += 30;
    }
 
-   if(mode == "advanced")
+   if (mode == "advanced")
    {
       spaceAboveGrid += 60;
    }

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

@@ -28,9 +28,6 @@ import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Snackbar from "@mui/material/Snackbar";
-import React, {useContext, useReducer, useState} from "react";
-import AceEditor from "react-ace";
-import {useParams} from "react-router-dom";
 import QContext from "QContext";
 import ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
 import BaseLayout from "qqq/layouts/BaseLayout";
@@ -41,6 +38,9 @@ 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, {useContext, useReducer, useState} from "react";
+import AceEditor from "react-ace";
+import {useParams} from "react-router-dom";
 import "ace-builds/src-noconflict/ext-language_tools";
 
 const qController = Client.getInstance();
@@ -121,7 +121,7 @@ function RecordDeveloperView({table}: Props): JSX.Element
          {
             if (e instanceof QException)
             {
-               if ((e as QException).status === "404")
+               if ((e as QException).status === 404)
                {
                   setNotFoundMessage(`${tableMetaData.label} ${id} could not be found.`);
                   return;

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

@@ -46,8 +46,6 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Modal from "@mui/material/Modal";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
-import React, {useContext, useEffect, useState} from "react";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import AuditBody from "qqq/components/audits/AuditBody";
@@ -65,6 +63,8 @@ import Client from "qqq/utils/qqq/Client";
 import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useState} from "react";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
 
 const qController = Client.getInstance();
 
@@ -148,9 +148,9 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    ///////////////////////
    useEffect(() =>
    {
-      if(tableMetaData == null)
+      if (tableMetaData == null)
       {
-         (async() =>
+         (async () =>
          {
             const tableMetaData = await qController.loadTableMetaData(tableName);
             setTableMetaData(tableMetaData);
@@ -162,54 +162,54 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          const type = (e.target as any).type;
          const validType = (type !== "text" && type !== "textarea" && type !== "input" && type !== "search");
 
-         if(validType && !dotMenuOpen && !keyboardHelpOpen && !showAudit && !showEditChildForm)
+         if (validType && !dotMenuOpen && !keyboardHelpOpen && !showAudit && !showEditChildForm)
          {
-            if (! e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
+            if (!e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                gotoCreate();
             }
-            else if (! e.metaKey && e.key === "e" && table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission)
+            else if (!e.metaKey && e.key === "e" && table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                navigate("edit");
             }
-            else if (! e.metaKey && e.key === "c" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
+            else if (!e.metaKey && e.key === "c" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                navigate("copy");
             }
-            else if (! e.metaKey && e.key === "d" && table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)
+            else if (!e.metaKey && e.key === "d" && table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                handleClickDeleteButton();
             }
-            else if (! e.metaKey && e.key === "a" && metaData && metaData.tables.has("audit"))
+            else if (!e.metaKey && e.key === "a" && metaData && metaData.tables.has("audit"))
             {
-               e.preventDefault()
+               e.preventDefault();
                navigate("#audit");
             }
          }
-      }
+      };
 
-      document.addEventListener("keydown", down)
+      document.addEventListener("keydown", down);
       return () =>
       {
-         document.removeEventListener("keydown", down)
-      }
-   }, [dotMenuOpen, keyboardHelpOpen, showEditChildForm, showAudit, metaData, location])
+         document.removeEventListener("keydown", down);
+      };
+   }, [dotMenuOpen, keyboardHelpOpen, showEditChildForm, showAudit, metaData, location]);
 
    const gotoCreate = () =>
    {
       const path = `${pathParts.slice(0, -1).join("/")}/create`;
       navigate(path);
-   }
+   };
 
    const gotoEdit = () =>
    {
       const path = `${pathParts.slice(0, -1).join("/")}/${record.values.get(table.primaryKeyField)}/edit`;
       navigate(path);
-   }
+   };
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    // monitor location changes - if we've clicked a link from viewing one record to viewing another, //
@@ -267,7 +267,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          // if our table is in the -4 index, and there's `createChild` in the -2 index, try to open a createChild form //
          // e.g., person/42/createChild/address (to create an address under person 42)                                 //
          ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         if(pathParts[pathParts.length - 4] === tableName && pathParts[pathParts.length - 2] == "createChild")
+         if (pathParts[pathParts.length - 4] === tableName && pathParts[pathParts.length - 2] == "createChild")
          {
             (async () =>
             {
@@ -298,7 +298,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
             }
          }
 
-         if(hashParts[0] == "#audit")
+         if (hashParts[0] == "#audit")
          {
             setShowAudit(true);
             return;
@@ -307,11 +307,11 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          ///////////////////////////////////////////////////////////////////////////////////
          // look for anchor links - e.g., table section names.  return w/ no-op if found. //
          ///////////////////////////////////////////////////////////////////////////////////
-         if(tableSections)
+         if (tableSections)
          {
             for (let i = 0; i < tableSections.length; i++)
             {
-               if("#" + tableSections[i].name === location.hash)
+               if ("#" + tableSections[i].name === location.hash)
                {
                   return;
                }
@@ -345,11 +345,11 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          section.fieldNames.forEach((fieldName) =>
          {
             const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
-            if(tableForField && tableForField.name != tableMetaData.name)
+            if (tableForField && tableForField.name != tableMetaData.name)
             {
                visibleJoinTables.add(tableForField.name);
             }
-         })
+         });
       }
 
       return (visibleJoinTables);
@@ -361,15 +361,15 @@ function RecordView({table, launchProcess}: Props): JSX.Element
     *******************************************************************************/
    const getSectionHelp = (section: QTableSection) =>
    {
-      const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
+      const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
       const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableName};section:${section.name}`} />;
 
       return formattedHelpContent && (
          <Box px={"1.5rem"} fontSize={"0.875rem"} color={colors.blueGray.main}>
             {formattedHelpContent}
          </Box>
-      )
-   }
+      );
+   };
 
 
    if (!asyncLoadInited)
@@ -401,11 +401,11 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          //////////////////////////////////////////////////////
          // load processes that the routing needs to respect //
          //////////////////////////////////////////////////////
-         const allTableProcesses = ProcessUtils.getProcessesForTable(metaData, tableName, true) // these include hidden ones (e.g., to find the bulks)
+         const allTableProcesses = ProcessUtils.getProcessesForTable(metaData, tableName, true); // these include hidden ones (e.g., to find the bulks)
          const runRecordScriptProcess = metaData?.processes.get("runRecordScript");
          if (runRecordScriptProcess)
          {
-            allTableProcesses.unshift(runRecordScriptProcess)
+            allTableProcesses.unshift(runRecordScriptProcess);
          }
          setAllTableProcesses(allTableProcesses);
 
@@ -417,7 +417,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
          let queryJoins: QueryJoin[] = null;
          const visibleJoinTables = getVisibleJoinTables(tableMetaData);
-         if(visibleJoinTables.size > 0)
+         if (visibleJoinTables.size > 0)
          {
             queryJoins = TableUtils.getQueryJoins(tableMetaData, visibleJoinTables);
          }
@@ -439,7 +439,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                {
                   HistoryUtils.ensurePathNotInHistory(location.pathname);
                }
-               catch(e)
+               catch (e)
                {
                   console.error("Error pushing history: " + e);
                }
@@ -447,13 +447,13 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
             if (e instanceof QException)
             {
-               if ((e as QException).status === "404")
+               if ((e as QException).status === 404)
                {
                   setNotFoundMessage(`${tableMetaData.label} ${id} could not be found.`);
                   historyPurge(location.pathname);
                   return;
                }
-               else if ((e as QException).status === "403")
+               else if ((e as QException).status === 403)
                {
                   setNotFoundMessage(`You do not have permission to view ${tableMetaData.label} records`);
                   historyPurge(location.pathname);
@@ -464,13 +464,13 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
          setPageHeader(record.recordLabel);
 
-         if(!launchingProcess)
+         if (!launchingProcess)
          {
             try
             {
                HistoryUtils.push({label: `${tableMetaData?.label}: ${record.recordLabel}`, path: location.pathname, iconName: table.iconName});
             }
-            catch(e)
+            catch (e)
             {
                console.error("Error pushing history: " + e);
             }
@@ -522,27 +522,30 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                         section.fieldNames.map((fieldName: string) =>
                         {
                            let [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
-                           let label = field.label;
+                           if (field != null)
+                           {
+                              let label = field.label;
 
-                           const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
-                           const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
-                           const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
+                              const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
+                              const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
+                              const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
 
-                           const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>
+                              const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>;
 
-                           return (
-                              <Box key={fieldName} flexDirection="row" pr={2}>
-                                 <>
-                                    {
-                                       showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
-                                    }
-                                    <div style={{display: "inline-block", width: 0}}>&nbsp;</div>
-                                    <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
-                                       {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
-                                    </Typography>
-                                 </>
-                              </Box>
-                           )
+                              return (
+                                 <Box key={fieldName} flexDirection="row" pr={2}>
+                                    <>
+                                       {
+                                          showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
+                                       }
+                                       <div style={{display: "inline-block", width: 0}}>&nbsp;</div>
+                                       <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
+                                          {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
+                                       </Typography>
+                                    </>
+                                 </Box>
+                              );
+                           }
                         })
                      }
                   </Box>
@@ -590,7 +593,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          setSectionFieldElements(sectionFieldElements);
          setNonT1TableSections(nonT1TableSections);
 
-         if(location.state)
+         if (location.state)
          {
             let state: any = location.state;
             if (state["createSuccess"] || state["updateSuccess"])
@@ -603,9 +606,9 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                setWarningMessage(state["warning"]);
             }
 
-            delete state["createSuccess"]
-            delete state["updateSuccess"]
-            delete state["warning"]
+            delete state["createSuccess"];
+            delete state["updateSuccess"];
+            delete state["warning"];
 
             window.history.replaceState(state, "");
          }
@@ -640,7 +643,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                console.log("Caught:");
                console.log(error);
 
-               if(error.message.toLowerCase().startsWith("warning"))
+               if (error.message.toLowerCase().startsWith("warning"))
                {
                   const path = pathParts.slice(0, -1).join("/");
                   navigate(path, {state: {deleteSuccess: true, warning: error.message}});
@@ -767,7 +770,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       //////////////////////////////////////////////////////////////////////////
       // when closing a modal process, navigate up to the record being viewed //
       //////////////////////////////////////////////////////////////////////////
-      if(location.hash)
+      if (location.hash)
       {
          navigate(location.pathname);
       }
@@ -801,7 +804,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       /////////////////////////////////////////////////
       // navigate back up to the record being viewed //
       /////////////////////////////////////////////////
-      if(location.hash)
+      if (location.hash)
       {
          navigate(location.pathname);
       }
@@ -828,7 +831,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       /////////////////////////////////////////////////
       // navigate back up to the record being viewed //
       /////////////////////////////////////////////////
-      if(location.hash)
+      if (location.hash)
       {
          navigate(location.pathname);
       }
@@ -864,7 +867,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                               }
                               {
                                  warningMessage ?
-                                    <Alert color="warning" sx={{mb: 3}} onClose={() =>
+                                    <Alert color="warning" sx={{mb: 3}} icon={<Icon>warning</Icon>} onClose={() =>
                                     {
                                        setWarningMessage(null);
                                     }}>

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

@@ -158,6 +158,7 @@ but we've turned off the click-to-sort function, so remove hand cursor */
    white-space: normal;
    height: auto;
 }
+
 .MuiDataGrid-filterForm
 {
    align-items: flex-end;
@@ -173,10 +174,12 @@ but we've turned off the click-to-sort function, so remove hand cursor */
 {
    width: 200px;
 }
+
 .MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput
 {
    width: 300px;
 }
+
 .MuiDataGrid-filterForm .MuiDataGrid-filterFormOperatorInput
 {
    width: 150px;
@@ -187,13 +190,14 @@ but we've turned off the click-to-sort function, so remove hand cursor */
 {
    padding-top: 4px;
 }
+
 .MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput .MuiAutocomplete-root .MuiAutocomplete-endAdornment svg
 {
    height: 0.625em;
 }
 
 /* fix strange size bug on filter autocompletes */
-.MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput>.MuiBox-root>.MuiBox-root:has(>.MuiAutocomplete-root)
+.MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput > .MuiBox-root > .MuiBox-root:has(>.MuiAutocomplete-root)
 {
    margin-bottom: 0;
    width: 100%;
@@ -208,16 +212,31 @@ but we've turned off the click-to-sort function, so remove hand cursor */
 }
 
 /* clears the ‘X’ from Internet Explorer */
-input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
-input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
+input[type=search]::-ms-clear
+{
+   display: none;
+   width: 0;
+   height: 0;
+}
+
+input[type=search]::-ms-reveal
+{
+   display: none;
+   width: 0;
+   height: 0;
+}
+
 /* clears the ‘X’ from Chrome */
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration { display: none; }
+input[type="search"]::-webkit-search-results-decoration
+{
+   display: none;
+}
 
 /* Shrink the big margin-bottom on modal processes */
-.modalProcess>.MuiBox-root>.MuiBox-root
+.modalProcess > .MuiBox-root > .MuiBox-root
 {
    margin-bottom: 24px;
 }
@@ -270,6 +289,7 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    color: initial !important;
    border: 1px solid rgb(206, 212, 218);
 }
+
 .MuiDataGrid-filterForm .MuiAutocomplete-tag .MuiSvgIcon-root
 {
    color: initial !important;
@@ -287,7 +307,7 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    right: 0.125rem;
 }
 
-.devDocumentation ul>li
+.devDocumentation ul > li
 {
    margin-left: 30px;
 }
@@ -640,6 +660,7 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    border: 1px solid #BDBDBD;
    border-radius: 0.5rem !important;
 }
+
 .MuiToggleButtonGroup-root .MuiButtonBase-root
 {
    text-transform: none;
@@ -650,11 +671,19 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    border: none;
    flex: 1 1 0px;
 }
+
 .MuiToggleButtonGroup-root .MuiButtonBase-root.Mui-selected
 {
    background: rgba(117, 117, 117, 0.20);
 }
+
 .MuiToggleButtonGroup-root .MuiButtonBase-root.Mui-disabled
 {
    border: none;
 }
+
+.MuiPickersDay-root.Mui-selected, .MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover
+{
+   color: white;
+   background-color: #0062FF !important;
+}

src/qqq/utils/DataGridUtils.tsx

@@ -29,11 +29,11 @@ import Tooltip from "@mui/material/Tooltip/Tooltip";
 import {GridColDef, GridFilterItem, GridRowsProp, MuiEvent} from "@mui/x-data-grid-pro";
 import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
 import {GridColumnHeaderParams} from "@mui/x-data-grid/models/params/gridColumnHeaderParams";
-import React from "react";
-import {Link, NavigateFunction} from "react-router-dom";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import {buildQGridPvsOperators, QGridBlobOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/records/query/GridFilterOperators";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React from "react";
+import {Link, NavigateFunction} from "react-router-dom";
 
 
 const emptyApplyFilterFn = (filterItem: GridFilterItem, column: GridColDef): null => null;
@@ -118,7 +118,7 @@ export default class DataGridUtils
    /*******************************************************************************
     **
     *******************************************************************************/
-   public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData): GridRowsProp[] =>
+   public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData, allowEmptyId = false): GridRowsProp[] =>
    {
       const fields = [...tableMetaData.fields.values()];
       const rows = [] as any[];
@@ -159,7 +159,10 @@ export default class DataGridUtils
                /////////////////////////////////////////////////////////////////////////////////////////
                // DataGrid gets very upset about a null or undefined here, so, try to make it happier //
                /////////////////////////////////////////////////////////////////////////////////////////
-               row["id"] = "--";
+               if(!allowEmptyId)
+               {
+                  row["id"] = "--";
+               }
             }
          }
 
@@ -279,7 +282,7 @@ export default class DataGridUtils
          if (key === tableMetaData.primaryKeyField && linkBase)
          {
             column.renderCell = (cellValues: any) => (
-               <Link to={`${linkBase}${encodeURIComponent(cellValues.value)}`} onClick={(e) => e.stopPropagation()}>{cellValues.value}</Link>
+               cellValues.value ? <Link to={`${linkBase}${encodeURIComponent(cellValues.value)}`} onClick={(e) => e.stopPropagation()}>{cellValues.value}</Link> : ""
             );
          }
       });

src/qqq/utils/qqq/Client.ts

@@ -35,7 +35,7 @@ class Client
    {
       console.log(`Caught Exception: ${JSON.stringify(exception)}`);
 
-      if(exception && exception.status == "401" && Client.unauthorizedCallback)
+      if (exception && exception.status == 401 && Client.unauthorizedCallback)
       {
          console.log("This is a 401 - calling the unauthorized callback.");
          Client.unauthorizedCallback();

src/qqq/utils/qqq/FilterUtils.tsx

@@ -159,6 +159,14 @@ class FilterUtils
 
          criteria.values = values;
       }
+
+      ////////////////////////////////////////////////
+      // recursively clean values in any subfilters //
+      ////////////////////////////////////////////////
+      for (let j = 0; j < queryFilter?.subFilters?.length; j++)
+      {
+         await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilter.subFilters[j]);
+      }
    }
 
 
@@ -263,39 +271,45 @@ class FilterUtils
    /*******************************************************************************
     **
     *******************************************************************************/
-   public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; reasonsWhyItCannot?: string[] }
+   public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; canFilterWorkAsAdvanced: boolean, reasonsWhyItCannot?: string[] }
    {
       const reasonsWhyItCannot: string[] = [];
 
-      if(filter == null)
+      if (filter == null)
       {
-         return ({canFilterWorkAsBasic: true});
+         return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
       }
 
-      if(filter.booleanOperator == "OR")
+      if (filter.booleanOperator == "OR")
       {
-         reasonsWhyItCannot.push("Filter uses the 'OR' operator.")
+         reasonsWhyItCannot.push("Filter uses the 'OR' operator.");
       }
 
-      if(filter.criteria)
+      if (filter.subFilters?.length > 0)
       {
-         const usedFields: {[name: string]: boolean} = {};
-         const warnedFields: {[name: string]: boolean} = {};
+         reasonsWhyItCannot.push("Filter contains sub-filters.");
+         return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: false, reasonsWhyItCannot: reasonsWhyItCannot});
+      }
+
+      if (filter.criteria)
+      {
+         const usedFields: { [name: string]: boolean } = {};
+         const warnedFields: { [name: string]: boolean } = {};
          for (let i = 0; i < filter.criteria.length; i++)
          {
             const criteriaName = filter.criteria[i].fieldName;
-            if(!criteriaName)
+            if (!criteriaName)
             {
                continue;
             }
 
-            if(usedFields[criteriaName])
+            if (usedFields[criteriaName])
             {
-               if(!warnedFields[criteriaName])
+               if (!warnedFields[criteriaName])
                {
                   const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, criteriaName);
                   let fieldLabel = field.label;
-                  if(tableForField.name != tableMetaData.name)
+                  if (tableForField.name != tableMetaData.name)
                   {
                      let fieldLabel = `${tableForField.label}: ${field.label}`;
                   }
@@ -307,13 +321,13 @@ class FilterUtils
          }
       }
 
-      if(reasonsWhyItCannot.length == 0)
+      if (reasonsWhyItCannot.length == 0)
       {
-         return ({canFilterWorkAsBasic: true});
+         return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
       }
       else
       {
-         return ({canFilterWorkAsBasic: false, reasonsWhyItCannot: reasonsWhyItCannot});
+         return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: true, reasonsWhyItCannot: reasonsWhyItCannot});
       }
    }
 
@@ -325,7 +339,7 @@ class FilterUtils
    {
       let valuesString = "";
 
-      if(criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
+      if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
       {
          ///////////////////////////////////////////////
          // we don't want values for these operators. //
@@ -342,7 +356,7 @@ class FilterUtils
          {
             maxLoops = maxValuesToShow;
          }
-         else if(maxValuesToShow == 1 && criteria.values.length > 1)
+         else if (maxValuesToShow == 1 && criteria.values.length > 1)
          {
             maxLoops = 1;
          }
@@ -364,21 +378,21 @@ class FilterUtils
             {
                const expression = new ThisOrLastPeriodExpression(value);
                let startOfPrefix = "";
-               if(fieldMetaData.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
+               if (fieldMetaData.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
                {
                   startOfPrefix = "start of ";
                }
                labels.push(`${startOfPrefix}${expression.toString()}`);
             }
-            else if(fieldMetaData.type == QFieldType.BOOLEAN)
+            else if (fieldMetaData.type == QFieldType.BOOLEAN)
             {
-               labels.push(value == true ? "yes" : "no")
+               labels.push(value == true ? "yes" : "no");
             }
-            else if(fieldMetaData.type == QFieldType.DATE_TIME)
+            else if (fieldMetaData.type == QFieldType.DATE_TIME)
             {
                labels.push(ValueUtils.formatDateTime(value));
             }
-            else if(fieldMetaData.type == QFieldType.DATE)
+            else if (fieldMetaData.type == QFieldType.DATE)
             {
                labels.push(ValueUtils.formatDate(value));
             }
@@ -401,7 +415,7 @@ class FilterUtils
                   labels.push(` and ${n} other value${n == 1 ? "" : "s"}.`);
                   break;
                case "+N":
-                  labels[labels.length-1] += ` +${n}`;
+                  labels[labels.length - 1] += ` +${n}`;
                   break;
             }
          }
@@ -450,7 +464,7 @@ class FilterUtils
       for (let i = 0; i < queryFilter?.orderBys?.length; i++)
       {
          const orderBy = queryFilter.orderBys[i];
-         gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"})
+         gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"});
       }
       return (gridSortModel);
    }
@@ -461,7 +475,7 @@ class FilterUtils
     *******************************************************************************/
    public static operatorToHumanString(criteria: QFilterCriteria, field: QFieldMetaData): string
    {
-      if(criteria == null || criteria.operator == null)
+      if (criteria == null || criteria.operator == null)
       {
          return (null);
       }
@@ -471,7 +485,7 @@ class FilterUtils
 
       try
       {
-         switch(criteria.operator)
+         switch (criteria.operator)
          {
             case QCriteriaOperator.EQUALS:
                return ("equals");
@@ -495,35 +509,35 @@ class FilterUtils
             case QCriteriaOperator.NOT_CONTAINS:
                return ("does not contain");
             case QCriteriaOperator.LESS_THAN:
-               if(isDate || isDateTime)
+               if (isDate || isDateTime)
                {
-                  return ("is before")
+                  return ("is before");
                }
                return ("less than");
             case QCriteriaOperator.LESS_THAN_OR_EQUALS:
-               if(isDate)
+               if (isDate)
                {
-                  return ("is on or before")
+                  return ("is on or before");
                }
-               if(isDateTime)
+               if (isDateTime)
                {
-                  return ("is at or before")
+                  return ("is at or before");
                }
                return ("less than or equals");
             case QCriteriaOperator.GREATER_THAN:
-               if(isDate || isDateTime)
+               if (isDate || isDateTime)
                {
-                  return ("is after")
+                  return ("is after");
                }
                return ("greater than or equals");
             case QCriteriaOperator.GREATER_THAN_OR_EQUALS:
-               if(isDate)
+               if (isDate)
                {
-                  return ("is on or after")
+                  return ("is on or after");
                }
-               if(isDateTime)
+               if (isDateTime)
                {
-                  return ("is at or after")
+                  return ("is at or after");
                }
                return ("greater than or equals");
             case QCriteriaOperator.IS_BLANK:
@@ -536,10 +550,10 @@ class FilterUtils
                return ("is not between");
          }
       }
-      catch(e)
+      catch (e)
       {
          console.log(`Error getting operator human string for ${JSON.stringify(criteria)}: ${e}`);
-         return criteria?.operator
+         return criteria?.operator;
       }
    }
 
@@ -549,7 +563,7 @@ class FilterUtils
     *******************************************************************************/
    public static criteriaToHumanString(table: QTableMetaData, criteria: QFilterCriteria, styled = false): string | JSX.Element
    {
-      if(criteria == null)
+      if (criteria == null)
       {
          return (null);
       }
@@ -558,7 +572,7 @@ class FilterUtils
       const fieldLabel = TableUtils.getFieldFullLabel(table, criteria.fieldName);
       const valuesString = FilterUtils.getValuesString(field, criteria);
 
-      if(styled)
+      if (styled)
       {
          return (
             <Box display="inline" whiteSpace="nowrap" color="#FFFFFF" mb={"0.5rem"}>
@@ -567,7 +581,7 @@ class FilterUtils
                {valuesString && <Box display="inline" p="0.125rem" pr="0.5rem" sx={{background: "#009971"}} borderRadius="0 0.5rem 0.5rem 0"> {valuesString}</Box>}
                &nbsp;
             </Box>
-         )
+         );
       }
       else
       {
@@ -575,6 +589,29 @@ class FilterUtils
       }
    }
 
+
+   /*******************************************************************************
+    ** after go-live of redesigin in march 2024, we had bugs where we could get a
+    ** filter with a criteria w/ a null field name (e.g., by having an incomplete
+    ** criteria in the Advanced filter builder - and that would sometimes break
+    ** the screen!  So, strip those away when storing or loading filters, via
+    ** this function.
+    *******************************************************************************/
+   public static stripAwayIncompleteCriteria(filter: QQueryFilter)
+   {
+      if (filter?.criteria?.length > 0)
+      {
+         for (let i = 0; i < filter.criteria.length; i++)
+         {
+            if (!filter.criteria[i].fieldName)
+            {
+               filter.criteria.splice(i, 1);
+               i--;
+            }
+         }
+      }
+   }
+
 }
 
 export default FilterUtils;

src/qqq/utils/qqq/TableUtils.ts

@@ -30,61 +30,101 @@ import {QueryJoin} from "@kingsrook/qqq-frontend-core/lib/model/query/QueryJoin"
  *******************************************************************************/
 class TableUtils
 {
+
    /*******************************************************************************
+    ** For a table, return a sub-set of sections (originally meant for display in
+    ** the record-screen sidebars)
     **
+    ** If the table has no sections, one big "all fields" section is created.
+    **
+    ** a list of "allowed field names" may be given, in which case, a section is only
+    ** included if it has a field in that list.  e.g., an edit-screen, where disabled
+    ** fields aren't to be shown - if a section only has disabled fields, don't include it.
+    **
+    ** By default sections w/ widget names are excluded -- but -- to include them,
+    ** provide the metaData plus list of allowedWidgetTypes.
     *******************************************************************************/
-   public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedKeys: any = null): QTableSection[]
+   public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedFieldNames: any = null, additionalInclusionPredicate?: (section: QTableSection) => boolean): QTableSection[]
    {
+      /////////////////////////////////////////////////////////////////
+      // if the table has sections, then filter them and return some //
+      /////////////////////////////////////////////////////////////////
       if (tableMetaData.sections)
       {
-         if (allowedKeys)
+         //////////////////////////////////////////////////////////////////////////////////////////////
+         // if there are filters (a list of allowed field names, or an additionalInclusionPredicate, //
+         // then only return a subset of sections matching the filters                               //
+         //////////////////////////////////////////////////////////////////////////////////////////////
+         if (allowedFieldNames || additionalInclusionPredicate)
          {
-            const allowedKeySet = new Set<string>();
-            allowedKeys.forEach((k: string) => allowedKeySet.add(k));
+            ////////////////////////////////////////////////////////////////
+            // put the field names in a set, for better inclusion testing //
+            ////////////////////////////////////////////////////////////////
+            const allowedFieldNameSet = new Set<string>();
+            if(allowedFieldNames)
+            {
+               allowedFieldNames.forEach((k: string) => allowedFieldNameSet.add(k));
+            }
 
+            ///////////////////////////////////////////////////////////////////////////////
+            // loop over the sections, deciding which ones to include in the return list //
+            ///////////////////////////////////////////////////////////////////////////////
             const allowedSections: QTableSection[] = [];
-
             for (let i = 0; i < tableMetaData.sections.length; i++)
             {
                const section = tableMetaData.sections[i];
-               if (section.fieldNames)
+               let includeSection = false;
+
+               for (let j = 0; j < section.fieldNames?.length; j++)
                {
-                  for (let j = 0; j < section.fieldNames.length; j++)
+                  if (allowedFieldNameSet.has(section.fieldNames[j]))
                   {
-                     if (allowedKeySet.has(section.fieldNames[j]))
-                     {
-                        allowedSections.push(section);
-                        break;
-                     }
+                     includeSection = true;
+                     break;
                   }
                }
+
+               if (additionalInclusionPredicate && additionalInclusionPredicate(section))
+               {
+                  includeSection = true;
+               }
+
+               if(includeSection)
+               {
+                  allowedSections.push(section);
+               }
             }
 
+            console.log("allowedSections length: " + allowedSections.length);
             return (allowedSections);
          }
-         else
-         {
-            return (tableMetaData.sections);
-         }
+
+         ////////////////////////////////////////////////////////////////
+         // if there are no filters to apply, then return all sections //
+         ////////////////////////////////////////////////////////////////
+         return (tableMetaData.sections);
       }
-      else
+
+      ///////////////////////////////////////////////////////////////////////////////////////////////
+      // else, if the table had no sections, then make a pseudo-one with either all of the fields, //
+      // or a subset based on the allowedFieldNames                                                //
+      ///////////////////////////////////////////////////////////////////////////////////////////////
+      let fieldNames = [...tableMetaData.fields.keys()];
+      if (allowedFieldNames)
       {
-         let fieldNames = [...tableMetaData.fields.keys()];
-         if (allowedKeys)
+         fieldNames = [];
+         for (const fieldName in tableMetaData.fields.keys())
          {
-            fieldNames = [];
-            for (const fieldName in tableMetaData.fields.keys())
+            if (allowedFieldNames[fieldName])
             {
-               if (allowedKeys[fieldName])
-               {
-                  fieldNames.push(fieldName);
-               }
+               fieldNames.push(fieldName);
             }
          }
-         return ([new QTableSection({
-            iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...fieldNames],
-         })]);
       }
+
+      return ([new QTableSection({
+         iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...fieldNames],
+      })]);
    }
 
 
@@ -110,7 +150,7 @@ class TableUtils
          return ([tableMetaData.fields.get(fieldName), tableMetaData]);
       }
 
-      return (null);
+      return [null, null];
    }
 
 
@@ -133,7 +173,7 @@ class TableUtils
       catch (e)
       {
          console.log(`Error getting full field label for ${fieldName} in table ${tableMetaData?.name}: ${e}`);
-         return fieldName
+         return fieldName;
       }
    }
 

src/qqq/utils/qqq/ValueUtils.tsx

@@ -219,6 +219,16 @@ class ValueUtils
 
       if (field.type === QFieldType.DATE_TIME)
       {
+         if(displayValue && displayValue != rawValue)
+         {
+            //////////////////////////////////////////////////////////////////////////////
+            // if the date-time actually has a displayValue set, and it isn't just the  //
+            // raw-value being copied into the display value by whoever called us, then //
+            // return the display value.                                                //
+            //////////////////////////////////////////////////////////////////////////////
+            return displayValue;
+         }
+
          if (!rawValue)
          {
             return ("");
@@ -270,6 +280,7 @@ class ValueUtils
       {
          date = new Date(date);
       }
+
       // @ts-ignore
       return (`${date.toString("yyyy-MM-dd hh:mm:ss")} ${date.getHours() < 12 ? "AM" : "PM"} ${date.getTimezone()}`);
    }