Merge pull request #56 from Kingsrook/feature/report-setup-selenium

the missing selenium test for the report setup screen from last sprint

.circleci/config.yml

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

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.90",
+      "@kingsrook/qqq-frontend-core": "1.0.96",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",
       "@mui/system": "5.11.1",
       "@mui/x-data-grid": "5.17.23",
       "@mui/x-data-grid-pro": "5.17.23",
+      "@mui/x-date-pickers": "7.1.1",
       "@mui/x-license-pro": "5.12.3",
       "@react-jvectormap/core": "1.0.1",
       "@react-jvectormap/unitedstates": "1.0.1",
@@ -26,6 +27,7 @@
       "chroma-js": "2.4.2",
       "cmdk": "0.2.0",
       "datejs": "1.0.0-rc3",
+      "dayjs": "1.11.10",
       "downshift": "3.2.10",
       "faker": "5.5.3",
       "form-data": "4.0.0",
@@ -39,7 +41,10 @@
       "react-ace": "10.1.0",
       "react-chartjs-2": "3.0.4",
       "react-cookie": "4.1.1",
+      "react-dnd": "16.0.1",
+      "react-dnd-html5-backend": "16.0.1",
       "react-dom": "18.0.0",
+      "react-ga4": "2.1.0",
       "react-github-btn": "1.2.1",
       "react-google-drive-picker": "^1.2.0",
       "react-markdown": "9.0.1",

src/App.tsx

@@ -33,12 +33,8 @@ import CssBaseline from "@mui/material/CssBaseline";
 import Icon from "@mui/material/Icon";
 import {ThemeProvider} from "@mui/material/styles";
 import {LicenseInfo} from "@mui/x-license-pro";
-import jwt_decode from "jwt-decode";
-import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
-import {useCookies} from "react-cookie";
-import {Navigate, Route, Routes, useLocation, useSearchParams,} from "react-router-dom";
-import {Md5} from "ts-md5/dist/md5";
 import CommandMenu from "CommandMenu";
+import jwt_decode from "jwt-decode";
 import QContext from "QContext";
 import Sidenav from "qqq/components/horseshoe/sidenav/SideNav";
 import theme from "qqq/components/legacy/Theme";
@@ -53,8 +49,13 @@ import EntityEdit from "qqq/pages/records/edit/RecordEdit";
 import RecordQuery from "qqq/pages/records/query/RecordQuery";
 import RecordDeveloperView from "qqq/pages/records/view/RecordDeveloperView";
 import RecordView from "qqq/pages/records/view/RecordView";
+import GoogleAnalyticsUtils, {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils";
 import Client from "qqq/utils/qqq/Client";
 import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
+import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
+import {useCookies} from "react-cookie";
+import {Navigate, Route, Routes, useLocation, useSearchParams,} from "react-router-dom";
+import {Md5} from "ts-md5/dist/md5";
 
 
 const qController = Client.getInstance();
@@ -79,7 +80,7 @@ export default function App()
    Client.setUnauthorizedCallback(() =>
    {
       logout();
-   })
+   });
 
    const shouldStoreNewToken = (newToken: string, oldToken: string): boolean =>
    {
@@ -114,10 +115,10 @@ 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)
@@ -128,7 +129,7 @@ export default function App()
       }
       catch (e)
       {
-         console.log("Caught in shouldStoreNewToken: " + e)
+         console.log("Caught in shouldStoreNewToken: " + e);
       }
 
       return (true);
@@ -160,7 +161,7 @@ export default function App()
                if (shouldStoreNewToken(accessToken, lsAccessToken))
                {
                   console.log("Sending accessToken to backend, requesting a sessionUUID...");
-                  const newSessionUuid = await qController.manageSession(accessToken, null);
+                  const {uuid: newSessionUuid, values} = await qController.manageSession(accessToken, null);
 
                   /////////////////////////////////////////////////////////////////////////////////////////////////////////////
                   // the request to the backend should send a header to set the cookie, so we don't need to do it ourselves. //
@@ -168,6 +169,7 @@ export default function App()
                   // setCookie(SESSION_UUID_COOKIE_NAME, newSessionUuid, {path: "/"});
 
                   localStorage.setItem("accessToken", accessToken);
+                  localStorage.setItem("sessionValues", JSON.stringify(values));
                   console.log("Got new sessionUUID from backend, and stored new accessToken");
                }
                else
@@ -185,7 +187,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 +552,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 +577,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,13 +658,25 @@ 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);
    const [keyboardHelpOpen, setKeyboardHelpOpen] = useState(false);
    const [helpHelpActive] = useState(queryParams.has("helpHelp"));
 
+   const [googleAnalyticsUtils] = useState(new GoogleAnalyticsUtils());
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function recordAnalytics(model: AnalyticsModel)
+   {
+      googleAnalyticsUtils.recordAnalytics(model)
+   }
+
+
    return (
 
       appRoutes && (
@@ -682,6 +696,7 @@ export default function App()
             setTableProcesses: (tableProcesses: QProcessMetaData[]) => setTableProcesses(tableProcesses),
             setDotMenuOpen: (dotMenuOpent: boolean) => setDotMenuOpen(dotMenuOpent),
             setKeyboardHelpOpen: (keyboardHelpOpen: boolean) => setKeyboardHelpOpen(keyboardHelpOpen),
+            recordAnalytics: recordAnalytics,
             pathToLabelMap: pathToLabelMap,
             branding: branding
          }}>

src/QContext.tsx

@@ -22,6 +22,7 @@
 import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils";
 import {createContext} from "react";
 
 interface QContext
@@ -47,6 +48,11 @@ interface QContext
    tableProcesses?: QProcessMetaData[];
    setTableProcesses?: (tableProcesses: QProcessMetaData[]) => void;
 
+   ///////////////////////////////////////////
+   // function to record an analytics event //
+   ///////////////////////////////////////////
+   recordAnalytics?: (model: AnalyticsModel) => void;
+
    ///////////////////////////////////
    // constants - no setters needed //
    ///////////////////////////////////

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

@@ -22,6 +22,7 @@
 package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
 
 
+import java.util.ArrayList;
 import java.util.HashSet;
 import java.util.List;
 import java.util.Set;
@@ -30,6 +31,8 @@ import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
 import com.kingsrook.qqq.backend.core.model.metadata.tables.QSupplementalTableMetaData;
 import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
 import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
+import com.kingsrook.qqq.backend.core.utils.StringUtils;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
 
 
 /*******************************************************************************
@@ -37,8 +40,11 @@ import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
  *******************************************************************************/
 public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
 {
+   public static final String TYPE = "materialDashboard";
+
    private List<List<String>> gotoFieldNames;
    private List<String>       defaultQuickFilterFieldNames;
+   private List<FieldRule>    fieldRules;
 
 
    /*******************************************************************************
@@ -58,10 +64,25 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
    @Override
    public String getType()
    {
-      return ("materialDashboard");
+      return (TYPE);
    }
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static MaterialDashboardTableMetaData ofOrWithNew(QTableMetaData table)
+   {
+      MaterialDashboardTableMetaData supplementalMetaData = (MaterialDashboardTableMetaData) table.getSupplementalMetaData(TYPE);
+      if(supplementalMetaData == null)
+      {
+         supplementalMetaData = new MaterialDashboardTableMetaData();
+         table.withSupplementalMetaData(supplementalMetaData);
+      }
+
+      return (supplementalMetaData);
+   }
+
 
    /*******************************************************************************
     ** Getter for gotoFieldNames
@@ -110,6 +131,22 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
          validateListOfFieldNames(tableMetaData, gotoFieldNameSubList, qInstanceValidator, prefix + "gotoFieldNames: ");
       }
       validateListOfFieldNames(tableMetaData, defaultQuickFilterFieldNames, qInstanceValidator, prefix + "defaultQuickFilterFieldNames: ");
+
+      for(FieldRule fieldRule : CollectionUtils.nonNullList(fieldRules))
+      {
+         qInstanceValidator.assertCondition(fieldRule.getTrigger() != null, prefix + "has a fieldRule without a trigger");
+         qInstanceValidator.assertCondition(fieldRule.getAction() != null, prefix + "has a fieldRule without an action");
+
+         if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getSourceField()), prefix + "has a fieldRule without a sourceField"))
+         {
+            qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getSourceField()), prefix + "has a fieldRule with an unrecognized sourceField: " + fieldRule.getSourceField());
+         }
+
+         if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getTargetField()), prefix + "has a fieldRule without a targetField"))
+         {
+            qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
+         }
+      }
    }
 
 
@@ -161,4 +198,51 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
       return (this);
    }
 
+
+   /*******************************************************************************
+    ** Getter for fieldRules
+    *******************************************************************************/
+   public List<FieldRule> getFieldRules()
+   {
+      return (this.fieldRules);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for fieldRules
+    *******************************************************************************/
+   public void setFieldRules(List<FieldRule> fieldRules)
+   {
+      this.fieldRules = fieldRules;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for fieldRules
+    *******************************************************************************/
+   public MaterialDashboardTableMetaData withFieldRules(List<FieldRule> fieldRules)
+   {
+      this.fieldRules = fieldRules;
+      return (this);
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for fieldRules
+    *******************************************************************************/
+   public MaterialDashboardTableMetaData withFieldRule(FieldRule fieldRule)
+   {
+      if(this.fieldRules == null)
+      {
+         this.fieldRules = new ArrayList<>();
+      }
+
+      this.fieldRules.add(fieldRule);
+
+      return (this);
+   }
+
 }

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

@@ -0,0 +1,165 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
+
+
+import java.io.Serializable;
+
+
+/*******************************************************************************
+ ** definition of rules for how UI fields should behave.
+ **
+ ** e.g., one field being changed causing different things to be needed in another
+ ** field.
+ *******************************************************************************/
+public class FieldRule implements Serializable
+{
+   private FieldRuleTrigger trigger;
+   private String           sourceField;
+   private FieldRuleAction  action;
+   private String           targetField;
+
+
+
+   /*******************************************************************************
+    ** Getter for trigger
+    *******************************************************************************/
+   public FieldRuleTrigger getTrigger()
+   {
+      return (this.trigger);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for trigger
+    *******************************************************************************/
+   public void setTrigger(FieldRuleTrigger trigger)
+   {
+      this.trigger = trigger;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for trigger
+    *******************************************************************************/
+   public FieldRule withTrigger(FieldRuleTrigger trigger)
+   {
+      this.trigger = trigger;
+      return (this);
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for sourceField
+    *******************************************************************************/
+   public String getSourceField()
+   {
+      return (this.sourceField);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for sourceField
+    *******************************************************************************/
+   public void setSourceField(String sourceField)
+   {
+      this.sourceField = sourceField;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for sourceField
+    *******************************************************************************/
+   public FieldRule withSourceField(String sourceField)
+   {
+      this.sourceField = sourceField;
+      return (this);
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for action
+    *******************************************************************************/
+   public FieldRuleAction getAction()
+   {
+      return (this.action);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for action
+    *******************************************************************************/
+   public void setAction(FieldRuleAction action)
+   {
+      this.action = action;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for action
+    *******************************************************************************/
+   public FieldRule withAction(FieldRuleAction action)
+   {
+      this.action = action;
+      return (this);
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for targetField
+    *******************************************************************************/
+   public String getTargetField()
+   {
+      return (this.targetField);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for targetField
+    *******************************************************************************/
+   public void setTargetField(String targetField)
+   {
+      this.targetField = targetField;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for targetField
+    *******************************************************************************/
+   public FieldRule withTargetField(String targetField)
+   {
+      this.targetField = targetField;
+      return (this);
+   }
+
+}

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

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

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

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

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

@@ -0,0 +1,59 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.savedreports;
+
+
+import java.util.List;
+import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.MaterialDashboardTableMetaData;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleAction;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleTrigger;
+
+
+/*******************************************************************************
+ ** Add frontend material dashboard enhacements to saved report table
+ *******************************************************************************/
+public class SavedReportTableFrontendMaterialDashboardEnricher
+{
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static void enrich(QTableMetaData tableMetaData)
+   {
+      MaterialDashboardTableMetaData materialDashboardTableMetaData = MaterialDashboardTableMetaData.ofOrWithNew(tableMetaData);
+
+      /////////////////////////////////////////////////////////////////////////
+      // make changes to the tableName field clear the value in these fields //
+      /////////////////////////////////////////////////////////////////////////
+      for(String targetField : List.of("queryFilterJson", "columnsJson", "pivotTableJson"))
+      {
+         materialDashboardTableMetaData.withFieldRule(new FieldRule()
+            .withSourceField("tableName")
+            .withTrigger(FieldRuleTrigger.ON_CHANGE)
+            .withAction(FieldRuleAction.CLEAR_TARGET_FIELD)
+            .withTargetField(targetField));
+      }
+   }
+
+}

src/qqq/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, {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
 {
@@ -217,7 +217,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
          {
             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;

src/qqq/components/forms/EntityForm.tsx

@@ -43,7 +43,10 @@ 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 PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
 import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
+import ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
+import {FieldRule, FieldRuleAction, FieldRuleTrigger} from "qqq/models/fields/FieldRules";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 import TableUtils from "qqq/utils/qqq/TableUtils";
@@ -77,12 +80,21 @@ EntityForm.defaultProps = {
    onSubmitCallback: null,
 };
 
+
+////////////////////////////////////////////////////////////////////////////
+// define a function that we can make referenes to, which we'll overwrite //
+// with formik's setFieldValue function, once we're inside formik.        //
+////////////////////////////////////////////////////////////////////////////
+let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void =>
+{
+}
+
 function EntityForm(props: Props): JSX.Element
 {
    const qController = Client.getInstance();
    const tableNameParam = useParams().tableName;
    const tableName = props.table === null ? tableNameParam : props.table.name;
-   const {accentColor} = useContext(QContext);
+   const {accentColor, recordAnalytics} = useContext(QContext);
 
    const [formTitle, setFormTitle] = useState("");
    const [validations, setValidations] = useState({});
@@ -97,6 +109,7 @@ function EntityForm(props: Props): JSX.Element
 
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
    const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
+   const [fieldRules, setFieldRules] = useState([] as FieldRule[]);
    const [metaData, setMetaData] = useState(null as QInstance);
    const [record, setRecord] = useState(null as QRecord);
    const [tableSections, setTableSections] = useState(null as QTableSection[]);
@@ -108,6 +121,9 @@ function EntityForm(props: Props): JSX.Element
 
    const [notAllowedError, setNotAllowedError] = useState(null as string);
 
+   const [formValuesJSON, setFormValuesJSON] = useState("");
+   const [formValues, setFormValues] = useState({} as {[name: string]: any});
+
    const {pageHeader, setPageHeader} = useContext(QContext);
 
    const navigate = useNavigate();
@@ -269,6 +285,21 @@ function EntityForm(props: Props): JSX.Element
    }
 
 
+   /*******************************************************************************
+    ** Watch the record values - if they change, re-render widgets
+    *******************************************************************************/
+   useEffect(() =>
+   {
+      const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
+      for (let widgetName in renderedWidgetSections)
+      {
+         const widgetMetaData = metaData.widgets.get(widgetName);
+         newRenderedWidgetSections[widgetName] = getWidgetSection(widgetMetaData, childListWidgetData[widgetName]);
+      }
+      setRenderedWidgetSections(newRenderedWidgetSections);
+   }, [formValuesJSON]);
+
+
    /*******************************************************************************
     ** render a section (full of fields) as a form
     *******************************************************************************/
@@ -319,10 +350,26 @@ function EntityForm(props: Props): JSX.Element
    }
 
 
+
+   /*******************************************************************************
+    ** if we have a widget that wants to set form-field values, they can take this
+    ** function in as a callback, and then call it with their values.
+    *******************************************************************************/
+   function setFormFieldValuesFromWidget(values: {[name: string]: any})
+   {
+      for (let key in values)
+      {
+         formikSetFieldValueFunction(key, values[key]);
+      }
+   }
+
+
    /*******************************************************************************
     ** render a section as a widget
     *******************************************************************************/
    function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element
+   {
+      if(widgetMetaData.type == "childRecordList")
       {
          widgetData.viewAllLink = null;
          widgetMetaData.showExportButton = false;
@@ -340,6 +387,31 @@ function EntityForm(props: Props): JSX.Element
          />;
       }
 
+      if(widgetMetaData.type == "reportSetup")
+      {
+         return <ReportSetupWidget
+            key={formValues["tableName"]} // todo, is this good?  it was added so that editing values actually re-renders...
+            isEditable={true}
+            widgetMetaData={widgetMetaData}
+            recordValues={formValues}
+            onSaveCallback={setFormFieldValuesFromWidget}
+         />
+      }
+
+      if(widgetMetaData.type == "pivotTableSetup")
+      {
+         return <PivotTableSetupWidget
+            key={formValues["tableName"]} // todo, is this good?  it was added so that editing values actually re-renders...
+            isEditable={true}
+            widgetMetaData={widgetMetaData}
+            recordValues={formValues}
+            onSaveCallback={setFormFieldValuesFromWidget}
+         />
+      }
+
+      return (<Box>Unsupported widget type: {widgetMetaData.type}</Box>)
+   }
+
 
    /*******************************************************************************
     ** render a form section
@@ -357,6 +429,32 @@ function EntityForm(props: Props): JSX.Element
    }
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function setupFieldRules(tableMetaData: QTableMetaData)
+   {
+      const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
+      if(!mdbMetaData)
+      {
+         return;
+      }
+
+      if(mdbMetaData.fieldRules)
+      {
+         const newFieldRules: FieldRule[] = [];
+         for (let i = 0; i < mdbMetaData.fieldRules.length; i++)
+         {
+            newFieldRules.push(mdbMetaData.fieldRules[i]);
+         }
+         setFieldRules(newFieldRules);
+      }
+   }
+
+
+   //////////////////
+   // initial load //
+   //////////////////
    if (!asyncLoadInited)
    {
       setAsyncLoadInited(true);
@@ -364,6 +462,9 @@ function EntityForm(props: Props): JSX.Element
       {
          const tableMetaData = await qController.loadTableMetaData(tableName);
          setTableMetaData(tableMetaData);
+         recordAnalytics({location: window.location, title: (props.isCopy ? "Copy" : props.id ? "Edit" : "New") + ": " + tableMetaData.label});
+
+         setupFieldRules(tableMetaData);
 
          const metaData = await qController.loadMetaData();
          setMetaData(metaData);
@@ -373,7 +474,21 @@ function EntityForm(props: Props): JSX.Element
          /////////////////////////////////////////////////
          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");
+            const widget = metaData.widgets.get(section.widgetName);
+            if(widget)
+            {
+               if(widget.type == "childRecordList" && widget.defaultValues?.has("manageAssociationName"))
+               {
+                  return (true);
+               }
+
+               if(widget.type == "reportSetup" || widget.type == "pivotTableSetup")
+               {
+                  return (true);
+               }
+            }
+
+            return (false);
          });
          setTableSections(tableSections);
 
@@ -394,6 +509,7 @@ function EntityForm(props: Props): JSX.Element
          {
             record = await qController.get(tableName, props.id);
             setRecord(record);
+            recordAnalytics({category: "tableEvents", action: props.isCopy ? "copy" : "edit", label: tableMetaData?.label + " / " + record?.recordLabel});
 
             const titleVerb = props.isCopy ? "Copy" : "Edit";
             setFormTitle(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`);
@@ -433,6 +549,7 @@ function EntityForm(props: Props): JSX.Element
             // else handle preparing to do an insert //
             ///////////////////////////////////////////
             setFormTitle(`Creating New ${tableMetaData?.label}`);
+            recordAnalytics({category: "tableEvents", action: "new", label: tableMetaData?.label});
 
             if (!props.isModal)
             {
@@ -549,12 +666,6 @@ function EntityForm(props: Props): JSX.Element
             }
 
             const hasFields = section.fieldNames && section.fieldNames.length > 0;
-            const hasChildRecordListWidget = section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList";
-            if (!hasFields && !hasChildRecordListWidget)
-            {
-               continue;
-            }
-
             if(hasFields)
             {
                for (let j = 0; j < section.fieldNames.length; j++)
@@ -599,6 +710,7 @@ function EntityForm(props: Props): JSX.Element
                newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
                newChildListWidgetData[section.widgetName] = widgetData;
             }
+
             //////////////////////////////////////
             // capture the tier1 section's name //
             //////////////////////////////////////
@@ -762,6 +874,8 @@ function EntityForm(props: Props): JSX.Element
 
          if (props.id !== null && !props.isCopy)
          {
+            recordAnalytics({category: "tableEvents", action: "saveEdit", label: tableMetaData?.label});
+
             ///////////////////////
             // perform an update //
             ///////////////////////
@@ -804,6 +918,8 @@ function EntityForm(props: Props): JSX.Element
          }
          else
          {
+            recordAnalytics({category: "tableEvents", action: props.isCopy ? "saveCopy" : "saveNew", label: tableMetaData?.label});
+
             /////////////////////////////////
             // perform an insert           //
             // todo - audit if it's a dupe //
@@ -849,6 +965,27 @@ function EntityForm(props: Props): JSX.Element
       })();
    };
 
+
+   /*******************************************************************************
+    ** process a form-field having a changed value (e.g., apply field rules).
+    *******************************************************************************/
+   function handleChangedFieldValue(fieldName: string, oldValue: any, newValue: any, valueChangesToMake: {[fieldName: string]: any})
+   {
+      for (let fieldRule of fieldRules)
+      {
+         if(fieldRule.trigger == FieldRuleTrigger.ON_CHANGE && fieldRule.sourceField == fieldName)
+         {
+            switch (fieldRule.action)
+            {
+               case FieldRuleAction.CLEAR_TARGET_FIELD:
+                  console.log(`Clearing value from [${fieldRule.targetField}] due to change in [${fieldName}]`);
+                  valueChangesToMake[fieldRule.targetField] = null;
+                  break;
+            }
+         }
+      }
+   }
+
    const formId = props.id != null ? `edit-${tableMetaData?.name}-form` : `create-${tableMetaData?.name}-form`;
 
    let body;
@@ -887,7 +1024,7 @@ function EntityForm(props: Props): JSX.Element
    else
    {
       body = (
-         <Box mb={3}>
+         <Box mb={3} className="entityForm">
             {
                (alertContent || warningContent) &&
                <Grid container spacing={3}>
@@ -924,7 +1061,71 @@ function EntityForm(props: Props): JSX.Element
                         errors,
                         touched,
                         isSubmitting,
-                     }) => (
+                        setFieldValue,
+                        dirty
+                     }) =>
+                     {
+                        /////////////////////////////////////////////////
+                        // if we have values from formik, look at them //
+                        /////////////////////////////////////////////////
+                        if(values)
+                        {
+                           ////////////////////////////////////////////////////////////////////////
+                           // use stringified values as cheap/easy way to see if any are changed //
+                           ////////////////////////////////////////////////////////////////////////
+                           const newFormValuesJSON = JSON.stringify(values);
+                           if(formValuesJSON != newFormValuesJSON)
+                           {
+                              const valueChangesToMake: {[fieldName: string]: any} = {};
+
+                              ////////////////////////////////////////////////////////////////////
+                              // if the form is dirty (e.g., we're not doing the initial load), //
+                              // then process rules for any changed fields                      //
+                              ////////////////////////////////////////////////////////////////////
+                              if(dirty)
+                              {
+                                 for (let fieldName in values)
+                                 {
+                                    if (formValues[fieldName] != values[fieldName])
+                                    {
+                                       handleChangedFieldValue(fieldName, formValues[fieldName], values[fieldName], valueChangesToMake);
+                                    }
+                                    formValues[fieldName] = values[fieldName];
+                                 }
+                              }
+                              else
+                              {
+                                 /////////////////////////////////////////////////////////////////////////////////////
+                                 // if the form is clean, make sure the formValues object has all form values in it //
+                                 /////////////////////////////////////////////////////////////////////////////////////
+                                 for (let fieldName in values)
+                                 {
+                                    formValues[fieldName] = values[fieldName];
+                                 }
+                              }
+
+                              /////////////////////////////////////////////////////////////////////////////
+                              // if there were any changes to be made from the rule evaluation,          //
+                              // make those changes in the formValues map, and in formik (setFieldValue) //
+                              /////////////////////////////////////////////////////////////////////////////
+                              for (let fieldName in valueChangesToMake)
+                              {
+                                 formValues[fieldName] = valueChangesToMake[fieldName];
+                                 setFieldValue(fieldName, valueChangesToMake[fieldName], false);
+                              }
+
+                              setFormValues(formValues)
+                              setFormValuesJSON(JSON.stringify(values));
+                           }
+                        }
+
+                        ///////////////////////////////////////////////////////////////////
+                        // once we're in the formik form, use its setFieldValue function //
+                        // over top of the default one we created globally               //
+                        ///////////////////////////////////////////////////////////////////
+                        formikSetFieldValueFunction = setFieldValue;
+
+                        return (
                            <Form id={formId} autoComplete="off">
                               <ScrollToFirstError />
 
@@ -968,7 +1169,8 @@ function EntityForm(props: Props): JSX.Element
                               </Box>
 
                            </Form>
-                     )}
+                        );
+                     }}
                   </Formik>
 
                   {

src/qqq/components/misc/FieldAutoComplete.tsx

@@ -23,9 +23,11 @@
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {Box} from "@mui/material";
 import Autocomplete, {AutocompleteRenderOptionState} from "@mui/material/Autocomplete";
+import Icon from "@mui/material/Icon";
 import TextField from "@mui/material/TextField";
-import React, {ReactNode} from "react";
+import React, {ReactNode, useState} from "react";
 
 interface FieldAutoCompleteProps
 {
@@ -37,6 +39,13 @@ interface FieldAutoCompleteProps
    autoFocus?: boolean;
    forceOpen?: boolean;
    hiddenFieldNames?: string[];
+   availableFieldNames?: string[];
+   variant?: "standard" | "filled" | "outlined";
+   label?: string;
+   textFieldSX?: any;
+   autocompleteSlotProps?: any;
+   hasError?: boolean;
+   noOptionsText?: string;
 }
 
 FieldAutoComplete.defaultProps =
@@ -44,17 +53,29 @@ FieldAutoComplete.defaultProps =
       defaultValue: null,
       autoFocus: false,
       forceOpen: null,
-      hiddenFieldNames: []
+      hiddenFieldNames: [],
+      availableFieldNames: [],
+      variant: "standard",
+      label: "Field",
+      textFieldSX: null,
+      autocompleteSlotProps: null,
+      hasError: false,
+      noOptionsText: "No options",
    };
 
-function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean, hiddenFieldNames: string[])
+function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean, hiddenFieldNames: string[], availableFieldNames: string[], selectedFieldName: string)
 {
    const sortedFields = [...tableMetaData.fields.values()].sort((a, b) => a.label.localeCompare(b.label));
    for (let i = 0; i < sortedFields.length; i++)
    {
       const fieldName = isJoinTable ? `${tableMetaData.name}.${sortedFields[i].name}` : sortedFields[i].name;
 
-      if(hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1)
+      if (hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1 && fieldName != selectedFieldName)
+      {
+         continue;
+      }
+
+      if (availableFieldNames?.length && availableFieldNames.indexOf(fieldName) == -1)
       {
          continue;
       }
@@ -63,10 +84,16 @@ function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: a
    }
 }
 
-export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames}: FieldAutoCompleteProps): JSX.Element
+
+/*******************************************************************************
+ ** Component for rendering a list of field names from a table as an auto-complete.
+ *******************************************************************************/
+export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames, availableFieldNames, variant, label, textFieldSX, autocompleteSlotProps, hasError, noOptionsText}: FieldAutoCompleteProps): JSX.Element
 {
+   const [selectedFieldName, setSelectedFieldName] = useState(defaultValue ? defaultValue.fieldName : null);
+
    const fieldOptions: any[] = [];
-   makeFieldOptionsForTable(tableMetaData, fieldOptions, false, hiddenFieldNames);
+   makeFieldOptionsForTable(tableMetaData, fieldOptions, false, hiddenFieldNames, availableFieldNames, selectedFieldName);
    let fieldsGroupBy = null;
 
    if (tableMetaData.exposedJoins && tableMetaData.exposedJoins.length > 0)
@@ -77,7 +104,7 @@ export default function FieldAutoComplete({id, metaData, tableMetaData, handleFi
          if (metaData.tables.has(exposedJoin.joinTable.name))
          {
             fieldsGroupBy = (option: any) => `${option.table.label} fields`;
-            makeFieldOptionsForTable(exposedJoin.joinTable, fieldOptions, true, hiddenFieldNames);
+            makeFieldOptionsForTable(exposedJoin.joinTable, fieldOptions, true, hiddenFieldNames, availableFieldNames, selectedFieldName);
          }
       }
    }
@@ -130,27 +157,48 @@ export default function FieldAutoComplete({id, metaData, tableMetaData, handleFi
    // seems like, if we always add the open attribute, then if its false or null, then the autocomplete //
    // doesn't open at all... so, only add the attribute at all, if forceOpen is true                    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////////
-   const alsoOpen: {[key: string]: any} = {}
+   const alsoOpen: { [key: string]: any } = {};
    if (forceOpen)
    {
       alsoOpen["open"] = forceOpen;
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function onChange(event: any, newValue: any, reason: string)
+   {
+      setSelectedFieldName(newValue ? newValue.fieldName : null);
+      handleFieldChange(event, newValue, reason);
+   }
+
    return (
       <Autocomplete
          id={id}
-         renderInput={(params) => (<TextField {...params} autoFocus={autoFocus} label={"Field"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
+         renderInput={(params) =>
+         {
+            const inputProps = params.InputProps;
+            const originalEndAdornment = inputProps.endAdornment;
+            inputProps.endAdornment = <Box>
+               {hasError && <Icon color="error">error_outline</Icon>}
+               {originalEndAdornment}
+            </Box>;
+
+            return (<TextField {...params} autoFocus={autoFocus} label={label} variant={variant} sx={textFieldSX} autoComplete="off" type="search" InputProps={inputProps} />)
+         }}
          // @ts-ignore
          defaultValue={defaultValue}
          options={fieldOptions}
-         onChange={handleFieldChange}
+         onChange={onChange}
          isOptionEqualToValue={(option, value) => isFieldOptionEqual(option, value)}
          groupBy={fieldsGroupBy}
          getOptionLabel={(option) => getFieldOptionLabel(option)}
          renderOption={(props, option, state) => renderFieldOption(props, option, state)}
          autoSelect={true}
          autoHighlight={true}
-         slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
+         slotProps={autocompleteSlotProps ?? {}}
+         noOptionsText={noOptionsText}
          {...alsoOpen}
       />
 

src/qqq/components/misc/SavedViews.tsx

@@ -44,6 +44,7 @@ import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QDeleteButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import RecordQueryView from "qqq/models/query/RecordQueryView";
+import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
 import React, {useContext, useEffect, useRef, useState} from "react";
@@ -60,9 +61,10 @@ interface Props
    viewAsJson?: string;
    viewOnChangeCallback?: (selectedSavedViewId: number) => void;
    loadingSavedView: boolean
+   queryScreenUsage: QueryScreenUsage;
 }
 
-function SavedViews({qController, metaData, tableMetaData, currentSavedView, tableDefaultView, view, viewAsJson, viewOnChangeCallback, loadingSavedView}: Props): JSX.Element
+function SavedViews({qController, metaData, tableMetaData, currentSavedView, tableDefaultView, view, viewAsJson, viewOnChangeCallback, loadingSavedView, queryScreenUsage}: Props): JSX.Element
 {
    const navigate = useNavigate();
 
@@ -91,6 +93,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
 
    const {accentColor, accentColorLight} = useContext(QContext);
 
+   /////////////////////////////////////////////////////////////////////////////////////////
+   // this component is used by <RecordQuery> - but that component has different usages - //
+   // e.g., the full-fledged query screen, but also, within other screens (e.g., a modal  //
+   // under the ReportSetupWidget).  So, there are some behaviors we only want when we're //
+   // on the full-fledged query screen, such as changing the URL with saved view ids.     //
+   /////////////////////////////////////////////////////////////////////////////////////////
+   const isQueryScreen = queryScreenUsage == "queryScreen";
+
    const openSavedViewsMenu = (event: any) => setSavedViewsMenu(event.currentTarget);
    const closeSavedViewsMenu = () => setSavedViewsMenu(null);
 
@@ -142,7 +152,10 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       setSaveFilterPopupOpen(false);
       closeSavedViewsMenu();
       viewOnChangeCallback(record.values.get("id"));
+      if(isQueryScreen)
+      {
          navigate(`${metaData.getTablePathByName(tableMetaData.name)}/savedView/${record.values.get("id")}`);
+      }
    };
 
 
@@ -175,7 +188,10 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          case CLEAR_OPTION:
             setSaveFilterPopupOpen(false)
             viewOnChangeCallback(null);
+            if(isQueryScreen)
+            {
                navigate(metaData.getTablePathByName(tableMetaData.name));
+            }
             break;
          case RENAME_OPTION:
             if(currentSavedView != null)
@@ -201,8 +217,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    {
       const defaultValues: {[key: string]: any} = {};
       defaultValues.tableName = tableMetaData.name;
-      defaultValues.queryFilterJson = JSON.stringify(view.queryFilter, null, 3);
-      defaultValues.columnsJson = JSON.stringify(view.queryColumns, null, 3);
+
+      let filterForBackend = JSON.parse(JSON.stringify(view.queryFilter));
+      filterForBackend  = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
+
+      defaultValues.queryFilterJson = JSON.stringify(filterForBackend);
+      defaultValues.columnsJson = JSON.stringify(view.queryColumns);
       navigate(`${metaData.getTablePathByName("savedReport")}/create#defaultValues=${encodeURIComponent(JSON.stringify(defaultValues))}`);
    }
 
@@ -415,11 +435,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          open={Boolean(savedViewsMenu)}
          onClose={closeSavedViewsMenu}
          keepMounted
-         PaperProps={{style: {maxHeight: "calc(100vh - 200px)", minHeight: "200px"}}}
+         PaperProps={{style: {maxHeight: "calc(100vh - 200px)", minWidth: "300px"}}}
       >
-         <MenuItem sx={{width: "300px"}} disabled style={{"opacity": "initial"}}><b>View Actions</b></MenuItem>
          {
-            hasStorePermission &&
+            isQueryScreen &&
+            <MenuItem sx={{width: "300px"}} disabled style={{"opacity": "initial"}}><b>View Actions</b></MenuItem>
+         }
+         {
+            isQueryScreen && hasStorePermission &&
             <Tooltip {...menuTooltipAttribs} title={<>Save your current filters, columns and settings, for quick re-use at a later time.<br /><br />You will be prompted to enter a name if you choose this option.</>}>
                <MenuItem onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
                   <ListItemIcon><Icon>save</Icon></ListItemIcon>
@@ -428,7 +451,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             </Tooltip>
          }
          {
-            hasStorePermission && currentSavedView != null &&
+            isQueryScreen && hasStorePermission && currentSavedView != null &&
             <Tooltip {...menuTooltipAttribs} title="Change the name for this saved view.">
                <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
                   <ListItemIcon><Icon>edit</Icon></ListItemIcon>
@@ -437,7 +460,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             </Tooltip>
          }
          {
-            hasStorePermission && currentSavedView != null &&
+            isQueryScreen && hasStorePermission && currentSavedView != null &&
             <Tooltip {...menuTooltipAttribs} title="Save a new copy this view, with a different name, separate from the original.">
                <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
                   <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
@@ -446,7 +469,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             </Tooltip>
          }
          {
-            hasDeletePermission && currentSavedView != null &&
+            isQueryScreen && hasDeletePermission && currentSavedView != null &&
             <Tooltip {...menuTooltipAttribs} title="Delete this saved view.">
                <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
                   <ListItemIcon><Icon>delete</Icon></ListItemIcon>
@@ -455,6 +478,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             </Tooltip>
          }
          {
+            isQueryScreen &&
             <Tooltip {...menuTooltipAttribs} title="Create a new view of this table, resetting the filters and columns to their defaults.">
                <MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
                   <ListItemIcon><Icon>monitor</Icon></ListItemIcon>
@@ -463,7 +487,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             </Tooltip>
          }
          {
-            hasSavedReportsPermission &&
+            isQueryScreen && hasSavedReportsPermission &&
             <Tooltip {...menuTooltipAttribs} title="Create a new Saved Report using your current view of this table as a starting point.">
                <MenuItem onClick={() => handleDropdownOptionClick(NEW_REPORT_OPTION)}>
                   <ListItemIcon><Icon>article</Icon></ListItemIcon>
@@ -471,7 +495,9 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                </MenuItem>
             </Tooltip>
          }
-         <Divider/>
+         {
+            isQueryScreen && <Divider/>
+         }
          <MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Views</b></MenuItem>
          {
             savedViews && savedViews.length > 0 ? (
@@ -481,7 +507,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                   </MenuItem>
                )
             ): (
-               <MenuItem>
+               <MenuItem disabled sx={{opacity: "1 !important"}}>
                   <i>You do not have any saved views for this table.</i>
                </MenuItem>
             )
@@ -580,6 +606,8 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                <Box pl={2} pr={2} sx={{display: "flex", alignItems: "center"}}>
                   {
                      !currentSavedView && viewIsModified && <>
+                        {
+                           isQueryScreen && <>
                               <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
                                  <b>Unsaved Changes</b>
                                  <ul style={{padding: "0.5rem 1rem"}}>
@@ -593,12 +621,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
 
                               {/* vertical rule */}
                               <Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
+                           </>
+                        }
 
                         <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
                      </>
                   }
                   {
-                     currentSavedView && viewIsModified && <>
+                     isQueryScreen && currentSavedView && viewIsModified && <>
                         <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
                            <b>Unsaved Changes</b>
                            <ul style={{padding: "0.5rem 1rem"}}>
@@ -617,6 +647,34 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                         <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
                      </>
                   }
+                  {
+                     !isQueryScreen && currentSavedView &&
+                     <Box>
+                        <Box display="inline-block" fontSize="0.875rem" fontWeight="500" sx={{position: "relative", top: "-1px"}}>
+                           {currentSavedView.values.get("label")}
+                        </Box>
+
+                        {
+                           viewIsModified &&
+                           <>
+                              <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
+                                 <b>Changes</b>
+                                 <ul style={{padding: "0.5rem 1rem"}}>
+                                    {
+                                       viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
+                                    }
+                                 </ul></>}>
+                                 <Box display="inline" ml="0.25rem" mr="0.25rem" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>with {viewDiffs.length} Change{viewDiffs.length == 1 ? "" : "s"}</Box>
+                              </Tooltip>
+                              <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset Changes</Button>
+                           </>
+                        }
+
+                        {/* vertical rule */}
+                        <Box display="inline-block" ml="0.25rem" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset to New View</Button>
+                     </Box>
+                  }
                </Box>
             </Box>
             {

src/qqq/components/query/AdvancedQueryPreview.tsx

@@ -0,0 +1,153 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import Box from "@mui/material/Box";
+import colors from "qqq/assets/theme/base/colors";
+import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
+import XIcon from "qqq/components/query/XIcon";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import React, {useState} from "react";
+
+interface AdvancedQueryPreviewProps
+{
+   tableMetaData: QTableMetaData;
+   queryFilter: QQueryFilter;
+   isEditable: boolean;
+   isQueryTooComplex: boolean;
+   removeCriteriaByIndexCallback: (index: number) => void;
+}
+
+/*******************************************************************************
+ ** Box shown on query screen (and more??) to preview what a query looks like,
+ ** as an "advanced" style/precursor-to-writing-your-own-query thing.
+ *******************************************************************************/
+export default function AdvancedQueryPreview({tableMetaData, queryFilter, isEditable, isQueryTooComplex, removeCriteriaByIndexCallback}: AdvancedQueryPreviewProps): JSX.Element
+{
+   const [mouseOverElement, setMouseOverElement] = useState(null as string);
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOverElement(name: string)
+   {
+      setMouseOverElement(name);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOutElement()
+   {
+      setMouseOverElement(null);
+   }
+
+
+
+   /*******************************************************************************
+    ** format the current query as a string for showing on-screen as a preview.
+    *******************************************************************************/
+   const queryToAdvancedString = (thisQueryFilter: QQueryFilter) =>
+   {
+      if (queryFilter == null || !queryFilter.criteria)
+      {
+         return (<span></span>);
+      }
+
+      let counter = 0;
+
+      return (
+         <React.Fragment>
+            {thisQueryFilter.criteria?.map((criteria, i) =>
+            {
+               const {criteriaIsValid} = validateCriteria(criteria, null);
+               if (criteriaIsValid)
+               {
+                  counter++;
+                  return (
+                     <span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
+                        {counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
+                        {FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
+                        {isEditable && !isQueryTooComplex && (
+                           mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}>
+                              <XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndexCallback(i)} /></span>
+                        )}
+                        {counter > 1 && i == thisQueryFilter.criteria?.length - 1 && thisQueryFilter.subFilters?.length > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
+                     </span>
+                  );
+               }
+               else
+               {
+                  return (<span />);
+               }
+            })}
+
+            {thisQueryFilter.subFilters?.length > 0 && (thisQueryFilter.subFilters.map((filter: QQueryFilter, j) =>
+            {
+               return (
+                  <React.Fragment key={j}>
+                     {j > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span></span>}
+                     <span style={{display: "flex", marginRight: "0.20rem"}}>(</span>
+                     {queryToAdvancedString(filter)}
+                     <span style={{display: "flex", marginRight: "0.20rem"}}>)</span>
+                  </React.Fragment>
+               );
+            }))}
+         </React.Fragment>
+      );
+   };
+
+   const moreSX = isEditable ?
+      {
+         borderTop: `1px solid ${colors.grayLines.main}`,
+         boxShadow: "inset 0px 0px 4px 2px #EFEFED",
+         borderRadius: "0 0 0.75rem 0.75rem",
+      } :
+      {
+         borderRadius: "0.75rem",
+         border: `1px solid ${colors.grayLines.main}`,
+      }
+
+   return (
+      <Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
+         {
+            <Box
+               className="advancedQueryString"
+               display="inline-block"
+               width="100%"
+               sx={{fontSize: "1rem", background: "#FFFFFF"}}
+               minHeight={"2.5rem"}
+               p={"0.5rem"}
+               pb={"0.125rem"}
+               {...moreSX}
+            >
+               <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
+                  {queryToAdvancedString(queryFilter)}
+               </Box>
+            </Box>
+         }
+      </Box>
+   )
+}

src/qqq/components/query/BasicAndAdvancedQueryControls.tsx

@@ -44,11 +44,13 @@ import {GridApiPro} from "@mui/x-data-grid-pro/models/gridApiPro";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+import AdvancedQueryPreview from "qqq/components/query/AdvancedQueryPreview";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
 import FieldListMenu from "qqq/components/query/FieldListMenu";
 import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
 import QuickFilter, {quickFilterButtonStyles} from "qqq/components/query/QuickFilter";
 import XIcon from "qqq/components/query/XIcon";
+import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import React, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
@@ -75,12 +77,34 @@ interface BasicAndAdvancedQueryControlsProps
    /////////////////////////////////////////////////////////////////////////////////////////////
    queryFilterJSON: string;
 
+   queryScreenUsage: QueryScreenUsage;
+
    mode: string;
    setMode: (mode: string) => void;
 }
 
 let debounceTimeout: string | number | NodeJS.Timeout;
 
+
+/*******************************************************************************
+ ** function to generate an element that says how a filter is sorted.
+ *******************************************************************************/
+export function getCurrentSortIndicator(queryFilter: QQueryFilter, tableMetaData: QTableMetaData, toggleSortDirection: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void)
+{
+   if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
+   {
+      const orderBy = queryFilter.orderBys[0];
+      const orderByFieldName = orderBy.fieldName;
+      const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
+      const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
+      return <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
+   }
+   else
+   {
+      return <>Sort...</>;
+   }
+}
+
 /*******************************************************************************
  ** Component to provide the basic & advanced query-filter controls for the
  ** RecordQueryOrig screen.
@@ -397,60 +421,6 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    };
 
 
-   /*******************************************************************************
-    ** format the current query as a string for showing on-screen as a preview.
-    *******************************************************************************/
-   const queryToAdvancedString = (thisQueryFilter: QQueryFilter) =>
-   {
-      if (queryFilter == null || !queryFilter.criteria)
-      {
-         return (<span></span>);
-      }
-
-      let counter = 0;
-
-      return (
-         <React.Fragment>
-            {thisQueryFilter.criteria?.map((criteria, i) =>
-            {
-               const {criteriaIsValid} = validateCriteria(criteria, null);
-               if (criteriaIsValid)
-               {
-                  counter++;
-                  return (
-                     <span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
-                        {counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
-                        {FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
-                        {!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>
-                  );
-               }
-               else
-               {
-                  return (<span />);
-               }
-            })}
-
-            {thisQueryFilter.subFilters?.length > 0 && (thisQueryFilter.subFilters.map((filter: QQueryFilter, j) =>
-            {
-               return (
-                  <React.Fragment key={j}>
-                     {j > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span></span>}
-                     <span style={{display: "flex", marginRight: "0.20rem"}}>(</span>
-                     {queryToAdvancedString(filter)}
-                     <span style={{display: "flex", marginRight: "0.20rem"}}>)</span>
-                  </React.Fragment>
-               );
-            }))}
-         </React.Fragment>
-      );
-   };
-
-
    /*******************************************************************************
     ** event handler for toggling between modes - basic & advanced.
     *******************************************************************************/
@@ -608,15 +578,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    /////////////////////////////////
    // set up the sort menu button //
    /////////////////////////////////
-   let sortButtonContents = <>Sort...</>;
-   if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
-   {
-      const orderBy = queryFilter.orderBys[0];
-      const orderByFieldName = orderBy.fieldName;
-      const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
-      const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
-      sortButtonContents = <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
-   }
+   let sortButtonContents = getCurrentSortIndicator(queryFilter, tableMetaData, toggleSortDirection);
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // this is being used as a version of like forcing that we get re-rendered if the query filter changes... //
@@ -807,26 +769,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                         {sortMenuComponent}
                      </Box>
                   </Box>
-                  <Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
-                     {
-                        <Box
-                           className="advancedQueryString"
-                           display="inline-block"
-                           borderTop={`1px solid ${borderGray}`}
-                           borderRadius="0 0 0.75rem 0.75rem"
-                           width="100%"
-                           sx={{fontSize: "1rem", background: "#FFFFFF"}}
-                           minHeight={"2.375rem"}
-                           p={"0.5rem"}
-                           pb={"0.125rem"}
-                           boxShadow={"inset 0px 0px 4px 2px #EFEFED"}
-                        >
-                           <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
-                              {queryToAdvancedString(queryFilter)}
-                           </Box>
-                        </Box>
-                     }
-                  </Box>
+                  <AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={queryFilter} isEditable={true} isQueryTooComplex={isQueryTooComplex} removeCriteriaByIndexCallback={removeCriteriaByIndex} />
                </Box>
             }
          </Box>

src/qqq/components/query/ExportMenuItem.tsx

@@ -23,8 +23,9 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
 import MenuItem from "@mui/material/MenuItem";
 import {GridColDef, GridExportMenuItemProps} from "@mui/x-data-grid-pro";
-import React from "react";
+import QContext from "QContext";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext} from "react";
 
 interface QExportMenuItemProps extends GridExportMenuItemProps<{}>
 {
@@ -43,11 +44,15 @@ export default function ExportMenuItem(props: QExportMenuItemProps)
 {
    const {format, tableMetaData, totalRecords, columnsModel, columnVisibilityModel, queryFilter, hideMenu} = props;
 
+   const {recordAnalytics} = useContext(QContext);
+
    return (
       <MenuItem
          disabled={totalRecords === 0}
          onClick={() =>
          {
+            recordAnalytics({category: "tableEvents", action: "export", label: tableMetaData.label});
+
             ///////////////////////////////////////////////////////////////////////////////
             // build the list of visible fields.  note, not doing them in-order (in case //
             // the user did drag & drop), because column order model isn't right yet     //

src/qqq/components/query/FilterCriteriaRow.tsx

@@ -33,10 +33,10 @@ import MenuItem from "@mui/material/MenuItem";
 import Select, {SelectChangeEvent} from "@mui/material/Select/Select";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
-import React, {ReactNode, SyntheticEvent, useState} from "react";
 import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
 import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import React, {ReactNode, SyntheticEvent, useState} from "react";
 
 
 export enum ValueMode
@@ -484,7 +484,9 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
                : <span />}
          </Box>
          <Box display="inline-block" width={250} className="fieldColumn">
-            <FieldAutoComplete id={`field-${id}`} metaData={metaData} tableMetaData={tableMetaData} defaultValue={defaultFieldValue} handleFieldChange={handleFieldChange} />
+            <FieldAutoComplete id={`field-${id}`} metaData={metaData} tableMetaData={tableMetaData} defaultValue={defaultFieldValue} handleFieldChange={handleFieldChange}
+               autocompleteSlotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
+            />
          </Box>
          <Box display="inline-block" width={200} className="operatorColumn">
             <Tooltip title={criteria.fieldName == null ? "You must select a field before you can select an operator" : null} enterDelay={tooltipEnterDelay}>

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -19,13 +19,13 @@
  */
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Skeleton} from "@mui/material";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import {Alert, Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import parse from "html-react-parser";
-import React, {useContext, useEffect, useReducer, useState} from "react";
 import QContext from "QContext";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import TabPanel from "qqq/components/misc/TabPanel";
@@ -39,18 +39,21 @@ import CompositeWidget from "qqq/components/widgets/CompositeWidget";
 import DataBagViewer from "qqq/components/widgets/misc/DataBagViewer";
 import DividerWidget from "qqq/components/widgets/misc/Divider";
 import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget";
+import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
 import QuickSightChart from "qqq/components/widgets/misc/QuickSightChart";
 import RecordGridWidget from "qqq/components/widgets/misc/RecordGridWidget";
+import ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
 import ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
 import StepperCard from "qqq/components/widgets/misc/StepperCard";
 import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
 import ParentWidget from "qqq/components/widgets/ParentWidget";
 import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
 import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard";
-import Widget, {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";
 
 
@@ -61,6 +64,7 @@ interface Props
    widgetMetaDataList: QWidgetMetaData[];
    tableName?: string;
    entityPrimaryKey?: string;
+   record?: QRecord;
    omitWrappingGridContainer: boolean;
    areChildren?: boolean;
    childUrlParams?: string;
@@ -79,7 +83,7 @@ DashboardWidgets.defaultProps = {
    wrapWidgetsInTabPanels: false,
 };
 
-function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
+function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
 {
    const [widgetData, setWidgetData] = useState([] as any[]);
    const [widgetCounter, setWidgetCounter] = useState(0);
@@ -93,7 +97,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
    let selectedTabKey: string = null;
    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 +195,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
          const metaDataToUse = (thisWidgetHasDropdowns) ? widgetMetaData : parentWidgetMetaData;
          for (let i = 0; i < metaDataToUse.dropdowns.length; i++)
          {
-            const dropdownName = metaDataToUse.dropdowns[i].possibleValueSourceName;
+            const dropdownName = metaDataToUse.dropdowns[i].possibleValueSourceName ?? metaDataToUse.dropdowns[i].name;
             const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${metaDataToUse.name}.${dropdownName}`;
             const json = JSON.parse(localStorage.getItem(localStorageKey));
             if (json)
@@ -248,6 +252,23 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0;
 
+
+   /*******************************************************************************
+    ** helper function, to convert values from a QRecord values map to a regular old
+    ** js object
+    *******************************************************************************/
+   function convertQRecordValuesFromMapToObject(record: QRecord): {[name: string]: any}
+   {
+      const rs: {[name: string]: any} = {};
+
+      if(record.values)
+      {
+         record.values.forEach((value, key) => rs[key] = value);
+      }
+
+      return (rs);
+   }
+
    const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
    {
       const labelAdditionalComponentsRight: LabelComponent[] = [];
@@ -286,6 +307,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
@@ -546,6 +582,20 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                   </Widget>
                )
             }
+            {
+               widgetMetaData.type === "reportSetup" && (
+                  widgetData && widgetData[i] && widgetData[i].queryParams &&
+                  <ReportSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
+                  {}} />
+               )
+            }
+            {
+               widgetMetaData.type === "pivotTableSetup" && (
+                  widgetData && widgetData[i] && widgetData[i].queryParams &&
+                  <PivotTableSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
+                  {}} />
+               )
+            }
          </Box>
       );
    };
@@ -582,7 +632,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 +640,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 +654,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
             <Tab key={widgetMetaData.name} label={widgetMetaData.label} />
          ))}
       </Tabs>
-      : <></>
+      : <></>;
 
    return (
       widgetCount > 0 ? (

src/qqq/components/widgets/Widget.tsx

@@ -21,21 +21,23 @@
 
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {InputLabel} from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
+import Switch from "@mui/material/Switch";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
 import parse from "html-react-parser";
-import React, {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
 {
@@ -60,6 +62,7 @@ interface Props
    labelAdditionalComponentsLeft: LabelComponent[];
    labelAdditionalElementsLeft: JSX.Element[];
    labelAdditionalComponentsRight: LabelComponent[];
+   labelAdditionalElementsRight: JSX.Element[];
    labelBoxAdditionalSx?: any;
    widgetMetaData?: QWidgetMetaData;
    widgetData?: WidgetData;
@@ -80,6 +83,7 @@ Widget.defaultProps = {
    labelAdditionalComponentsLeft: [],
    labelAdditionalElementsLeft: [],
    labelAdditionalComponentsRight: [],
+   labelAdditionalElementsRight: [],
    labelBoxAdditionalSx: {},
    omitPadding: false,
 };
@@ -160,6 +164,79 @@ export class HeaderIcon extends LabelComponent
 }
 
 
+/*******************************************************************************
+ ** a link (actually a button) for in a widget's header
+ *******************************************************************************/
+interface HeaderLinkButtonComponentProps
+{
+   label: string;
+   onClickCallback: () => void;
+   disabled?: boolean;
+   disabledTooltip?: string;
+}
+
+HeaderLinkButtonComponent.defaultProps = {
+   disabled: false,
+   disabledTooltip: null
+};
+
+export function HeaderLinkButtonComponent({label, onClickCallback, disabled, disabledTooltip}: HeaderLinkButtonComponentProps): JSX.Element
+{
+   return (
+      <Tooltip title={disabledTooltip}>
+         <span>
+            <Button disabled={disabled} onClick={() => onClickCallback()} sx={{p: 0}} disableRipple>
+               <Typography display="inline" textTransform="none" fontSize={"1.125rem"}>
+                  {label}
+               </Typography>
+            </Button>
+         </span>
+      </Tooltip>
+   );
+}
+
+
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+interface HeaderToggleComponentProps
+{
+   label: string;
+   getValue: () => boolean;
+   onClickCallback: () => void;
+   disabled?: boolean;
+   disabledTooltip?: string;
+}
+
+HeaderToggleComponent.defaultProps = {
+   disabled: false,
+   disabledTooltip: null
+};
+
+export function HeaderToggleComponent({label, getValue, onClickCallback, disabled, disabledTooltip}: HeaderToggleComponentProps): JSX.Element
+{
+   const onClick = () =>
+   {
+      onClickCallback();
+   }
+
+   return (
+      <Box alignItems="baseline" mr="-0.75rem">
+         <Tooltip title={disabledTooltip}>
+            <span>
+               <InputLabel sx={{fontSize: "1.125rem", px: "0 !important", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.65 : 1}} unselectable="on">
+                  {label} <Switch disabled={disabled} checked={getValue()} onClick={onClick} />
+               </InputLabel>
+            </span>
+         </Tooltip>
+      </Box>
+   );
+}
+
+
+
 /*******************************************************************************
  **
  *******************************************************************************/
@@ -240,6 +317,13 @@ export class Dropdown extends LabelComponent
             if (localStorageOption)
             {
                const id = localStorageOption.id;
+
+               if (this.dropdownMetaData.type == "DATE_PICKER")
+               {
+                  defaultValue = id;
+               }
+               else
+               {
                   for (let i = 0; i < this.options.length; i++)
                   {
                      if (this.options[i].id == id)
@@ -250,6 +334,7 @@ export class Dropdown extends LabelComponent
                   }
                }
             }
+         }
          catch (e)
          {
             console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e);
@@ -299,6 +384,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}
@@ -564,6 +650,8 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       localLabelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
    }
 
+   let localLabelAdditionalElementsRight = [...props.labelAdditionalElementsRight];
+
    const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
 
    const isSet = (v: any): boolean =>
@@ -580,6 +668,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       needLabelBox ||= (labelComponentsLeft && labelComponentsLeft.length > 0);
       needLabelBox ||= (localLabelAdditionalElementsLeft && localLabelAdditionalElementsLeft.length > 0);
       needLabelBox ||= (labelComponentsRight && labelComponentsRight.length > 0);
+      needLabelBox ||= (localLabelAdditionalElementsRight && localLabelAdditionalElementsRight.length > 0);
       needLabelBox ||= isSet(props.widgetData?.icon);
       needLabelBox ||= isSet(props.widgetData?.label);
       needLabelBox ||= isSet(props.widgetMetaData?.label);
@@ -622,7 +711,7 @@ 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);
 
@@ -711,6 +800,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                         })
                      )
                   }
+                  {localLabelAdditionalElementsRight}
                </Box>
             </Box>
          }

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) =>
+   {
+      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);
@@ -252,16 +296,52 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
    let optionPaddingLeftRems = 0.75;
    if (startIcon)
    {
-      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75
+      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75;
    }
    if (allowBackAndForth)
    {
       optionPaddingLeftRems += 2.5;
    }
 
+   if (type == "DATE_PICKER")
+   {
+      return (
+         <Box sx={{
+            ...sx,
+            background: "white",
+            width: "250px",
+            borderRadius: "0.75rem !important",
+            border: `1px solid ${colors.grayLines.main}`,
+            "& *": {cursor: "pointer"}
+         }} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
+            {allowBackAndForth && <IconButton sx={{padding: 0, margin: "8px"}} onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1, type)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+               <DatePicker
+                  sx={{paddingRight: "8px"}}
+                  defaultValue={dayjs(defaultValue)}
+                  name={name}
+                  value={dayjs(dateValue)}
+                  onChange={handleDatePickerOnChange}
+                  slots={{
+                     openPickerIcon: CalendarTodayOutlined
+                  }}
+                  slotProps={{
+                     openPickerIcon: {sx: {fontSize: "1.25rem !important", color: "#757575"}},
+                     actionBar: {actions: ["today"]},
+                     textField: {variant: "standard", InputProps: {sx: {fontSize: "16px", color: "#495057"}, disableUnderline: true}}
+                  }}
+               />
+            </LocalizationProvider>
+            {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1, type)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
+         </Box>
+      );
+   }
+   else
+   {
       return (
          dropdownOptions ? (
-         <Box sx={{whiteSpace: "nowrap", display: "flex",
+            <Box sx={{
+               whiteSpace: "nowrap", display: "flex",
                "& .MuiPopperUnstyled-root": {
                   border: `1px solid ${colors.grayLines.main}`,
                   borderTop: "none",
@@ -301,14 +381,14 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
                   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>}
+                           {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)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
+                           {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1, type)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
                         </Box>
                      </>
                   }
@@ -331,5 +411,6 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
          ) : null
       );
    }
+}
 
 export default WidgetDropdownMenu;

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,50 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+export interface FieldRule
+{
+   trigger: FieldRuleTrigger;
+   sourceField: string;
+   action: FieldRuleAction;
+   targetField: string;
+}
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+export enum FieldRuleTrigger
+{
+   ON_CHANGE = "ON_CHANGE"
+}
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+export enum FieldRuleAction
+{
+   CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD"
+}

src/qqq/models/misc/PivotTableDefinitionModels.ts

@@ -0,0 +1,159 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+
+
+/*******************************************************************************
+ ** put a unique key value in all the pivot table group-by and value objects,
+ ** to help react rendering be sane.
+ *******************************************************************************/
+export class PivotObjectKey
+{
+   private static value = new Date().getTime();
+
+   static next(): number
+   {
+      return PivotObjectKey.value++;
+   }
+}
+
+
+/*******************************************************************************
+ ** Full definition of pivot table
+ *******************************************************************************/
+export class PivotTableDefinition
+{
+   rows: PivotTableGroupBy[];
+   columns: PivotTableGroupBy[];
+   values: PivotTableValue[];
+}
+
+
+/*******************************************************************************
+ ** A field that the pivot table is grouped by, either as a row or column
+ *******************************************************************************/
+export class PivotTableGroupBy
+{
+   fieldName: string;
+   key: number;
+
+   constructor()
+   {
+      this.key = PivotObjectKey.next();
+   }
+}
+
+
+/*******************************************************************************
+ ** A field & function that serves as the computed values in the pivot table
+ *******************************************************************************/
+export class PivotTableValue
+{
+   fieldName: string;
+   function: PivotTableFunction;
+
+   key: number;
+
+   constructor()
+   {
+      this.key = PivotObjectKey.next();
+   }
+}
+
+
+/*******************************************************************************
+ ** Functions that can be applied to pivot table values
+ *******************************************************************************/
+export enum PivotTableFunction
+{
+   SUM = "SUM",
+   COUNT = "COUNT",
+   AVERAGE = "AVERAGE",
+   MAX = "MAX",
+   MIN = "MIN",
+   PRODUCT = "PRODUCT",
+
+   ///////////////////////////////////////////////////////////////////////////////
+   // i don't think we have a useful version of count-nums --unless we allowed  //
+   // it on string fields, and counted if they looked like numbers? is that     //
+   // what we should do? ... leave here as zombie in case that request comes in //
+   ///////////////////////////////////////////////////////////////////////////////
+   // COUNT_NUMS = "COUNT_NUMS",
+
+   STD_DEV = "STD_DEV",
+   STD_DEVP = "STD_DEVP",
+   VAR = "VAR",
+   VARP = "VARP",
+}
+
+const allFunctions = [
+   PivotTableFunction.SUM,
+   PivotTableFunction.COUNT,
+   PivotTableFunction.AVERAGE,
+   PivotTableFunction.MAX,
+   PivotTableFunction.MIN,
+   PivotTableFunction.PRODUCT,
+   // PivotTableFunction.COUNT_NUMS,
+   PivotTableFunction.STD_DEV,
+   PivotTableFunction.STD_DEVP,
+   PivotTableFunction.VAR,
+   PivotTableFunction.VARP
+];
+
+const onlyCount = [PivotTableFunction.COUNT];
+
+const functionsForDates = [PivotTableFunction.COUNT, PivotTableFunction.AVERAGE, PivotTableFunction.MAX, PivotTableFunction.MIN];
+
+export const functionsPerFieldType: { [type: string]: PivotTableFunction[] } = {};
+functionsPerFieldType[QFieldType.STRING] = onlyCount;
+functionsPerFieldType[QFieldType.BOOLEAN] = onlyCount;
+functionsPerFieldType[QFieldType.BLOB] = onlyCount;
+functionsPerFieldType[QFieldType.HTML] = onlyCount;
+functionsPerFieldType[QFieldType.PASSWORD] = onlyCount;
+functionsPerFieldType[QFieldType.TEXT] = onlyCount;
+functionsPerFieldType[QFieldType.TIME] = onlyCount;
+
+functionsPerFieldType[QFieldType.INTEGER] = allFunctions;
+functionsPerFieldType[QFieldType.DECIMAL] = allFunctions;
+// functionsPerFieldType[QFieldType.LONG] = allFunctions;
+
+functionsPerFieldType[QFieldType.DATE] = functionsForDates;
+functionsPerFieldType[QFieldType.DATE_TIME] = functionsForDates;
+
+
+//////////////////////////////////////
+// labels for pivot table functions //
+//////////////////////////////////////
+export const pivotTableFunctionLabels =
+   {
+      "SUM": "Sum",
+      "COUNT": "Count",
+      "AVERAGE": "Average",
+      "MAX": "Max",
+      "MIN": "Min",
+      "PRODUCT": "Product",
+      // "COUNT_NUMS": "Count Numbers",
+      "STD_DEV": "StdDev",
+      "STD_DEVP": "StdDevp",
+      "VAR": "Var",
+      "VARP": "Varp"
+   };

src/qqq/models/query/QQueryColumns.ts

@@ -23,14 +23,13 @@
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {GridPinnedColumns} from "@mui/x-data-grid-pro";
-import quickSightChart from "qqq/components/widgets/misc/QuickSightChart";
 import DataGridUtils from "qqq/utils/DataGridUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 
 /*******************************************************************************
  ** member object
  *******************************************************************************/
-interface Column
+export interface Column
 {
    name: string;
    isVisible: boolean;
@@ -81,11 +80,19 @@ export default class QQueryColumns
       fields.forEach((field) =>
       {
          const column: Column = {name: field.name, isVisible: true, width: DataGridUtils.getColumnWidthForField(field, table)};
-         queryColumns.columns.push(column);
 
          if (field.name == table.primaryKeyField)
          {
             column.pinned = "left";
+
+            //////////////////////////////////////////////////
+            // insert the primary key field after __check__ //
+            //////////////////////////////////////////////////
+            queryColumns.columns.splice(1, 0, column);
+         }
+         else
+         {
+            queryColumns.columns.push(column);
          }
       });
 
@@ -393,6 +400,42 @@ export default class QQueryColumns
       return columnVisibilityModel;
    };
 
+
+   /*******************************************************************************
+    ** sort the columns list, so that pinned columns go to the front (left) or back
+    ** (right) of the list.
+    *******************************************************************************/
+   public sortColumnsFixingPinPositions = (): void =>
+   {
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      // do a sort to push pinned-left columns to the start, and pinned-right columns to the end //
+      // and otherwise, leave everything alone                                                   //
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      this.columns = this.columns.sort((a: Column, b: Column) =>
+      {
+         if(a.pinned == "left" && b.pinned != "left")
+         {
+            return -1;
+         }
+         else if(b.pinned == "left" && a.pinned != "left")
+         {
+            return 1;
+         }
+         else if(a.pinned == "right" && b.pinned != "right")
+         {
+            return 1;
+         }
+         else if(b.pinned == "right" && a.pinned != "right")
+         {
+            return -1;
+         }
+         else
+         {
+            return (0);
+         }
+      });
+   }
+
 }
 
 

src/qqq/pages/apps/Home.tsx

@@ -31,8 +31,6 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
 import Grid from "@mui/material/Grid";
-import React, {useContext, useEffect, useState} from "react";
-import {Link, useLocation} from "react-router-dom";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
@@ -41,6 +39,8 @@ import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
 import MiniStatisticsCard from "qqq/components/widgets/statistics/MiniStatisticsCard";
 import BaseLayout from "qqq/layouts/BaseLayout";
 import Client from "qqq/utils/qqq/Client";
+import React, {useContext, useEffect, useState} from "react";
+import {Link, useLocation} from "react-router-dom";
 
 const qController = Client.getInstance();
 
@@ -62,7 +62,7 @@ function AppHome({app}: Props): JSX.Element
    const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date());
    const [widgets, setWidgets] = useState([] as any[]);
 
-   const {pageHeader, setPageHeader} = useContext(QContext);
+   const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext);
 
    const location = useLocation();
 
@@ -86,8 +86,9 @@ function AppHome({app}: Props): JSX.Element
 
    useEffect(() =>
    {
-      // setPageHeader(app.label);
       setPageHeader(null);
+      recordAnalytics({location: window.location, title: "App: " + app.label});
+      recordAnalytics({category: "appEvents", action: "loadAppScreen", label: app.label});
 
       if (!qInstance)
       {

src/qqq/pages/processes/ProcessRun.tsx

@@ -124,7 +124,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    const [showErrorDetail, setShowErrorDetail] = useState(false);
    const [showFullHelpText, setShowFullHelpText] = useState(false);
 
-   const {pageHeader, setPageHeader} = useContext(QContext);
+   const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext);
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // for setting the processError state - call this function, which will also set the isUserFacingError state //
@@ -427,10 +427,10 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                //////////////////////////////////////////////////
                step.components && (step.components.map((component: QFrontendComponent, index: number) =>
                {
-                  let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"]
+                  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 (
@@ -1079,7 +1079,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);
@@ -1157,6 +1157,10 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             const processMetaData = await Client.getInstance().loadProcessMetaData(processName);
             setProcessMetaData(processMetaData);
             setSteps(processMetaData.frontendSteps);
+
+            recordAnalytics({location: window.location, title: "Process: " + processMetaData?.label});
+            recordAnalytics({category: "processEvents", action: "startProcess", label: processMetaData?.label});
+
             if (processMetaData.tableName && !tableMetaData)
             {
                try
@@ -1262,6 +1266,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
 
       setTimeout(async () =>
       {
+         recordAnalytics({category: "processEvents", action: "processStep", label: activeStep.label});
+
          const processResponse = await Client.getInstance().processStep(
             processName,
             processUUID,

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

@@ -76,7 +76,7 @@ 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 React, {forwardRef, useContext, useEffect, useImperativeHandle, useReducer, useRef, useState} from "react";
 import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
 
 const CURRENT_SAVED_VIEW_ID_LOCAL_STORAGE_KEY_ROOT = "qqq.currentSavedViewId";
@@ -84,18 +84,18 @@ const DENSITY_LOCAL_STORAGE_KEY_ROOT = "qqq.density";
 const VIEW_LOCAL_STORAGE_KEY_ROOT = "qqq.recordQueryView";
 
 export const TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT = "qqq.tableVariant";
+export type QueryScreenUsage = "queryScreen" | "reportSetup"
 
 interface Props
 {
    table?: QTableMetaData;
    launchProcess?: QProcessMetaData;
+   usage?: QueryScreenUsage;
+   isModal?: boolean;
+   initialQueryFilter?: QQueryFilter;
+   initialColumns?: QQueryColumns;
 }
 
-RecordQuery.defaultProps = {
-   table: null,
-   launchProcess: null
-};
-
 ///////////////////////////////////////////////////////
 // define possible values for our pageState variable //
 ///////////////////////////////////////////////////////
@@ -107,8 +107,13 @@ const qController = Client.getInstance();
  ** function to produce standard version of the screen while we're "loading"
  ** like the main table meta data etc.
  *******************************************************************************/
-const getLoadingScreen = () =>
+const getLoadingScreen = (isModal: boolean) =>
 {
+   if(isModal)
+   {
+      return (<Box>&nbsp;</Box>);
+   }
+
    return (<BaseLayout>
       &nbsp;
    </BaseLayout>);
@@ -120,7 +125,7 @@ const getLoadingScreen = () =>
  **
  ** Yuge component.  The best.  Lots of very smart people are saying so.
  *******************************************************************************/
-function RecordQuery({table, launchProcess}: Props): JSX.Element
+const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, initialColumns}: Props, ref) =>
 {
    const tableName = table.name;
    const [searchParams] = useSearchParams();
@@ -136,6 +141,44 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const [firstRender, setFirstRender] = useState(true);
    const [isFirstRenderAfterChangingTables, setIsFirstRenderAfterChangingTables] = useState(false);
 
+   const [loadedFilterFromInitialFilterParam, setLoadedFilterFromInitialFilterParam] = useState(false);
+
+   const mayWriteLocalStorage = usage == "queryScreen";
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function localStorageSet(key: string, value: string)
+   {
+      if(mayWriteLocalStorage)
+      {
+         localStorage.setItem(key, value);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function localStorageRemove(key: string)
+   {
+      if(mayWriteLocalStorage)
+      {
+         localStorage.removeItem(key);
+      }
+   }
+
+   useImperativeHandle(ref, () =>
+   {
+      return {
+         getCurrentView(): RecordQueryView
+         {
+            return view;
+         }
+      }
+   });
+
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // manage "state" being passed from some screens (like delete) into query screen - by grabbing, and then deleting //
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -180,7 +223,9 @@ 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
+   ///////////////////////////////////////////////////////////////
+   // only load things out of local storage on the first render //
+   ///////////////////////////////////////////////////////////////
    if (firstRender)
    {
       console.log("This is firstRender, so reading defaults from local storage...");
@@ -211,6 +256,26 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       defaultView.mode = defaultMode;
    }
 
+   if(firstRender)
+   {
+      /////////////////////////////////////////////////////////////////////////
+      // allow a caller to send in an initial filter & set of columns.       //
+      // only to be used on "first render".                                  //
+      // JSON.parse(JSON.stringify()) to do deep clone and keep object clean //
+      // unclear why not needed on initialColumns...                         //
+      /////////////////////////////////////////////////////////////////////////
+      if (initialQueryFilter)
+      {
+         defaultView.queryFilter = JSON.parse(JSON.stringify(initialQueryFilter));
+         setLoadedFilterFromInitialFilterParam(true);
+      }
+
+      if (initialColumns)
+      {
+         defaultView.queryColumns = initialColumns;
+      }
+   }
+
    /////////////////////////////////////////////////////////////////////////////////////////
    // in case the view is missing any of these attributes, give them a reasonable default //
    /////////////////////////////////////////////////////////////////////////////////////////
@@ -338,12 +403,15 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    /////////////////////////////
    // page context references //
    /////////////////////////////
-   const {accentColor, accentColorLight, setPageHeader, dotMenuOpen, keyboardHelpOpen} = useContext(QContext);
+   const {accentColor, accentColorLight, setPageHeader, recordAnalytics, dotMenuOpen, keyboardHelpOpen} = useContext(QContext);
 
    //////////////////////////////////////////////////////////////////
    // we use our own header - so clear out the context page header //
    //////////////////////////////////////////////////////////////////
+   if(!isModal)
+   {
       setPageHeader(null);
+   }
 
    //////////////////////
    // ole' faithful... //
@@ -418,51 +486,6 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    };
 
 
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   const prepQueryFilterForBackend = (sourceFilter: QQueryFilter) =>
-   {
-      const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.subFilters, sourceFilter.booleanOperator);
-      for (let i = 0; i < sourceFilter?.criteria?.length; i++)
-      {
-         const criteria = sourceFilter.criteria[i];
-         const {criteriaIsValid} = validateCriteria(criteria, null);
-         if (criteriaIsValid)
-         {
-            if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
-            {
-               ///////////////////////////////////////////////////////////////////////////////////////////
-               // do this to avoid submitting an empty-string argument for blank/not-blank operators... //
-               ///////////////////////////////////////////////////////////////////////////////////////////
-               filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, []));
-            }
-            else
-            {
-               ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               // else push a clone of the criteria - since it may get manipulated below (convertFilterPossibleValuesToIds) //
-               ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               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;
-   };
-
 
    /*******************************************************************************
     **
@@ -494,7 +517,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             totalRecords: totalRecords,
             columnsModel: columnsModel,
             columnVisibilityModel: columnVisibilityModel,
-            queryFilter: prepQueryFilterForBackend(queryFilter)
+            queryFilter: FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter)
          };
 
       exportMenu = (<>
@@ -610,25 +633,25 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
          if (validType && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess)
          {
-            if (!e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
+            if (!e.metaKey && !e.ctrlKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
                e.preventDefault();
                navigate(`${metaData?.getTablePathByName(tableName)}/create`);
             }
-            else if (!e.metaKey && e.key === "r")
+            else if (!e.metaKey && !e.ctrlKey && e.key === "r")
             {
                e.preventDefault();
                updateTable("'r' keyboard event");
             }
             /*
             // disable until we add a ... ref down to let us programmatically open Columns button
-            else if (! e.metaKey && e.key === "c")
+            else if (! e.metaKey && !e.ctrlKey && e.key === "c")
             {
                e.preventDefault()
                gridApiRef.current.showPreferences(GridPreferencePanelsValue.columns)
             }
             */
-            else if (!e.metaKey && e.key === "f")
+            else if (!e.metaKey && !e.ctrlKey && e.key === "f")
             {
                e.preventDefault();
 
@@ -687,10 +710,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          else if (!searchParams.has("filter"))
          {
             if (localStorage.getItem(currentSavedViewLocalStorageKey))
+            {
+               if(usage == "queryScreen")
                {
                   currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
                   navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
                }
+            }
             else
             {
                doClearCurrentSavedView();
@@ -726,7 +752,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          {
             FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter)
          }
-         localStorage.setItem(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
+         localStorageSet(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
       }
       catch(e)
       {
@@ -861,7 +887,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    /*******************************************************************************
     ** This is the method that actually executes a query to update the data in the table.
     *******************************************************************************/
-   const updateTable = (reason?: string) =>
+   const updateTable = (reason?: string, clearOutCount = true) =>
    {
       if (pageState != "ready")
       {
@@ -875,6 +901,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          return;
       }
 
+      recordAnalytics({category: "tableEvents", action: "query", label: tableMetaData.label});
+
       console.log(`In updateTable for ${reason} ${JSON.stringify(queryFilter)}`);
       setLoading(true);
       setRows([]);
@@ -885,7 +913,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          // copy the orderBys & operator into it - but we'll build its criteria one-by-one, //
          // as clones, as we'll need to tweak them a bit                                    //
          /////////////////////////////////////////////////////////////////////////////////////
-         const filterForBackend = prepQueryFilterForBackend(queryFilter);
+         const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter, pageNumber, rowsPerPage);
 
          //////////////////////////////////////////
          // figure out joins to use in the query //
@@ -911,6 +939,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          console.log(`Issuing query: ${thisQueryId}`);
          if (tableMetaData.capabilities.has(Capability.TABLE_COUNT))
          {
+            if(clearOutCount)
+            {
+               setTotalRecords(null);
+               setDistinctRecords(null);
+            }
+
             let includeDistinct = isJoinMany(tableMetaData, getVisibleJoinTables());
             qController.count(tableName, filterForBackend, queryJoins, includeDistinct, tableVariant).then(([count, distinctCount]) =>
             {
@@ -943,7 +977,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                console.log(`Received error for query ${thisQueryId}`);
                console.log(error);
 
-               var errorMessage;
+               let errorMessage;
                if (error && error.message)
                {
                   errorMessage = error.message;
@@ -1108,7 +1142,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       if (state && state.density && state.density.value !== density)
       {
          setDensity(state.density.value);
-         localStorage.setItem(densityLocalStorageKey, JSON.stringify(state.density.value));
+         localStorageSet(densityLocalStorageKey, JSON.stringify(state.density.value));
       }
    };
 
@@ -1412,7 +1446,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       if (selectFullFilterState === "filter")
       {
-         const filterForBackend = prepQueryFilterForBackend(queryFilter);
+         const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter);
          filterForBackend.skip = 0;
          filterForBackend.limit = null;
          return `?recordsParam=filterJSON&filterJSON=${encodeURIComponent(JSON.stringify(filterForBackend))}`;
@@ -1420,7 +1454,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
       if (selectFullFilterState === "filterSubset")
       {
-         const filterForBackend = prepQueryFilterForBackend(queryFilter);
+         const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter);
          filterForBackend.skip = 0;
          filterForBackend.limit = selectionSubsetSize;
          return `?recordsParam=filterJSON&filterJSON=${encodeURIComponent(JSON.stringify(filterForBackend))}`;
@@ -1443,14 +1477,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       if (selectFullFilterState === "filter")
       {
-         const filterForBackend = prepQueryFilterForBackend(queryFilter);
+         const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter);
          filterForBackend.skip = 0;
          filterForBackend.limit = null;
          setRecordIdsForProcess(filterForBackend);
       }
       else if (selectFullFilterState === "filterSubset")
       {
-         const filterForBackend = prepQueryFilterForBackend(queryFilter);
+         const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter);
          filterForBackend.skip = 0;
          filterForBackend.limit = selectionSubsetSize;
          setRecordIdsForProcess(filterForBackend);
@@ -1605,7 +1639,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")}`);
+      localStorageSet(currentSavedViewLocalStorageKey, `${savedViewRecord.values.get("id")}`);
    };
 
 
@@ -1615,7 +1649,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const doClearCurrentSavedView = () =>
    {
       setCurrentSavedView(null);
-      localStorage.removeItem(currentSavedViewLocalStorageKey);
+      localStorageRemove(currentSavedViewLocalStorageKey);
    };
 
 
@@ -1642,6 +1676,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       if (selectedSavedViewId != null)
       {
+         recordAnalytics({category: "tableEvents", action: "activateSavedView", label: tableMetaData.label});
+
          //////////////////////////////////////////////
          // fetch, then activate the selected filter //
          //////////////////////////////////////////////
@@ -1657,12 +1693,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          /////////////////////////////////
          // this is 'new view' - right? //
          /////////////////////////////////
+         recordAnalytics({category: "tableEvents", action: "activateNewView", label: tableMetaData.label});
 
          //////////////////////////////
          // wipe away the saved view //
          //////////////////////////////
          setCurrentSavedView(null);
-         localStorage.removeItem(currentSavedViewLocalStorageKey);
+         localStorageRemove(currentSavedViewLocalStorageKey);
 
          ///////////////////////////////////////////////
          // activate a new default view for the table //
@@ -1908,7 +1945,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
     *******************************************************************************/
    const openColumnStatistics = async (column: GridColDef) =>
    {
-      setFilterForColumnStats(prepQueryFilterForBackend(queryFilter));
+      setFilterForColumnStats(FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter));
       setColumnStatsFieldName(column.field);
 
       const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, column.field);
@@ -2183,6 +2220,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                <GridToolbarDensitySelector nonce={undefined} />
             </div>
 
+            {
+               usage == "queryScreen" &&
                <div style={{zIndex: 10}}>
                   <MenuButton label="Selection" iconName={selectedIds.length == 0 ? "check_box_outline_blank" : "check_box"} disabled={totalRecords == 0} options={selectionMenuOptions} callback={selectionMenuCallback} />
                   <SelectionSubsetDialog isOpen={selectionSubsetSizePromptOpen} initialValue={selectionSubsetSize} closeHandler={(value) =>
@@ -2204,6 +2243,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                      }
                   }} />
                </div>
+            }
 
             <div>
                {
@@ -2266,7 +2306,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          // to avoid both this useEffect and the one below from both doing an "initial query", //
          // only run this one if at least 1 query has already been ran                         //
          ////////////////////////////////////////////////////////////////////////////////////////
-         updateTable("useEffect(pageNumber,rowsPerPage)");
+         updateTable("useEffect(pageNumber,rowsPerPage)", false);
       }
    }, [pageNumber, rowsPerPage]);
 
@@ -2301,7 +2341,18 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
    if (pageState == "ready")
    {
-      const newFilterHash = JSON.stringify(prepQueryFilterForBackend(queryFilter));
+      const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter);
+
+      ///////////////////////////////////////////////////////////////////////
+      // remove the skip & limit (e.g., pagination) from this hash -       //
+      // as we have a specific useEffect watching these, specifically      //
+      // so we can pass the dont-clear-count flag into updateTable,        //
+      // to try to keep the count from flashing back & forth to "Counting" //
+      ///////////////////////////////////////////////////////////////////////
+      filterForBackend.skip = null;
+      filterForBackend.limit = null;
+
+      const newFilterHash = JSON.stringify(filterForBackend);
       if (filterHash != newFilterHash)
       {
          setFilterHash(newFilterHash);
@@ -2327,6 +2378,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          setTableMetaData(tableMetaData);
          setTableLabel(tableMetaData.label);
 
+         recordAnalytics({location: window.location, title: "Query: " + tableMetaData.label});
+
          setTableProcesses(ProcessUtils.getProcessesForTable(metaData, tableName)); // these are the ones to show in the dropdown
          setAllTableProcesses(ProcessUtils.getProcessesForTable(metaData, tableName, true)); // these include hidden ones (e.g., to find the bulks)
 
@@ -2470,11 +2523,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             // if the last time we were on this table, a currentSavedView was written to local storage - //
             // then navigate back to that view's URL - unless - it looks like we're on a process!        //
             ///////////////////////////////////////////////////////////////////////////////////////////////
-            if (localStorage.getItem(currentSavedViewLocalStorageKey) && !urlLooksLikeProcess())
+            if (localStorage.getItem(currentSavedViewLocalStorageKey) && !urlLooksLikeProcess() && !loadedFilterFromInitialFilterParam)
             {
                const currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
                console.log(`returning to previously active saved view ${currentSavedViewId}`);
+               if(usage == "queryScreen")
+               {
                   navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
+               }
                setViewIdInLocation(currentSavedViewId);
 
                /////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -2530,7 +2586,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          promptForTableVariantSelection();
       }
 
-      return (getLoadingScreen());
+      return (getLoadingScreen(isModal));
    }
 
    ////////////////////////////////////////////////////////////////////////
@@ -2564,7 +2620,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setRows([]);
       setIsFirstRenderAfterChangingTables(true);
 
-      return (getLoadingScreen());
+      return (getLoadingScreen(isModal));
    }
 
    /////////////////////////////////////////////////////////////////////////////////////////////
@@ -2608,7 +2664,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    if (pageState != "ready")
    {
       console.log(`page state is ${pageState}... no-op while those complete async's run...`);
-      return (getLoadingScreen());
+      return (getLoadingScreen(isModal));
    }
 
    ///////////////////////////////////////////////////////////////////////////////////////////
@@ -2617,13 +2673,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ///////////////////////////////////////////////////////////////////////////////////////////
    if (!tableMetaData)
    {
-      return (getLoadingScreen());
+      return (getLoadingScreen(isModal));
    }
 
    let savedViewsComponent = null;
    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} />);
+      savedViewsComponent = (<SavedViews qController={qController} metaData={metaData} tableMetaData={tableMetaData} view={view} viewAsJson={viewAsJson} currentSavedView={currentSavedView} tableDefaultView={tableDefaultView} viewOnChangeCallback={handleSavedViewChange} loadingSavedView={loadingSavedView} queryScreenUsage={usage} />);
    }
 
 
@@ -2700,7 +2756,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    };
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
-   // these numbers help set the height of the grid (so page won't scroll) based on spcae above & below it //
+   // these numbers help set the height of the grid (so page won't scroll) based on space above & below it //
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    let spaceBelowGrid = 40;
    let spaceAboveGrid = 205;
@@ -2714,19 +2770,26 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       spaceAboveGrid += 60;
    }
 
+   if(isModal)
+   {
+      spaceAboveGrid += 130;
+   }
+
    ////////////////////////
    // main screen render //
    ////////////////////////
-   return (
-      <BaseLayout>
+   const body = (
+      <React.Fragment>
          <Box display="flex" justifyContent="space-between">
             <Box>
                <Typography textTransform="capitalize" variant="h3">
                   {pageLoadingState.isLoading() && ""}
                   {pageLoadingState.isLoadingSlow() && "Loading..."}
-                  {pageLoadingState.isNotLoading() && getPageHeader(tableMetaData, visibleJoinTables, tableVariant)}
+                  {pageLoadingState.isNotLoading() && !isModal && getPageHeader(tableMetaData, visibleJoinTables, tableVariant)}
                </Typography>
             </Box>
+            {
+               !isModal &&
                <Box whiteSpace="nowrap">
                   <GotoRecordButton metaData={metaData} tableMetaData={tableMetaData} />
                   <Box display="inline-block" width="150px">
@@ -2748,6 +2811,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                      <QCreateNewButton tablePath={metaData?.getTablePathByName(tableName)} />
                   }
                </Box>
+            }
          </Box>
          <div className="recordQuery">
             {/*
@@ -2801,6 +2865,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                      setQuickFilterFieldNames={doSetQuickFilterFieldNames}
                      gridApiRef={gridApiRef}
                      mode={mode}
+                     queryScreenUsage={usage}
                      setMode={doSetMode}
                      savedViewsComponent={savedViewsComponent}
                      columnMenuComponent={buildColumnMenu()}
@@ -2841,7 +2906,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                         sortingMode="server"
                         filterMode="server"
                         page={pageNumber}
-                        checkboxSelection
+                        checkboxSelection={usage == "queryScreen"}
                         disableSelectionOnClick
                         autoHeight={false}
                         rows={rows}
@@ -2850,7 +2915,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                         rowBuffer={10}
                         rowCount={totalRecords === null || totalRecords === undefined ? 0 : totalRecords}
                         onPageSizeChange={handleRowsPerPageChange}
-                        onRowClick={handleRowClick}
+                        onRowClick={usage == "queryScreen" ? handleRowClick : null}
                         onStateChange={handleStateChange}
                         density={density}
                         loading={loading}
@@ -2908,8 +2973,28 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                </Modal>
             }
          </div>
-      </BaseLayout>
+      </React.Fragment>
    );
+
+   if(isModal)
+   {
+      return body;
    }
 
+   return (
+      <BaseLayout>{body}</BaseLayout>
+   )
+})
+
+
+RecordQuery.defaultProps = {
+   table: null,
+   usage: "queryScreen",
+   launchProcess: null,
+   isModal: false,
+   initialQueryFilter: null,
+   initialColumns: null,
+};
+
+
 export default RecordQuery;

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();
@@ -69,13 +69,9 @@ function RecordDeveloperView({table}: Props): JSX.Element
    const [associatedScripts, setAssociatedScripts] = useState([] as any[]);
    const [notFoundMessage, setNotFoundMessage] = useState(null);
 
-   const [selectedTabs, setSelectedTabs] = useState({} as any);
-   const [viewingRevisions, setViewingRevisions] = useState({} as any);
-   const [scriptLogs, setScriptLogs] = useState({} as any);
-
    const [alertText, setAlertText] = useState(null as string);
 
-   const {setPageHeader} = useContext(QContext);
+   const {setPageHeader, recordAnalytics} = useContext(QContext);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    if (!asyncLoadInited)
@@ -90,6 +86,8 @@ function RecordDeveloperView({table}: Props): JSX.Element
          const tableMetaData = await qController.loadTableMetaData(tableName);
          setTableMetaData(tableMetaData);
 
+         recordAnalytics({location: window.location, title: "Developer Mode: " + tableMetaData.label});
+
          //////////////////////////////
          // load top-level meta-data //
          //////////////////////////////
@@ -121,7 +119,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

@@ -121,7 +121,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
    const closeActionsMenu = () => setActionsMenu(null);
 
-   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive} = useContext(QContext);
+   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive, recordAnalytics} = useContext(QContext);
 
    if (localStorage.getItem(tableVariantLocalStorageKey))
    {
@@ -164,27 +164,27 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
          if (validType && !dotMenuOpen && !keyboardHelpOpen && !showAudit && !showEditChildForm)
          {
-            if (!e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
+            if (!e.metaKey && !e.ctrlKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
                e.preventDefault();
                gotoCreate();
             }
-            else if (!e.metaKey && e.key === "e" && table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission)
+            else if (!e.metaKey && !e.ctrlKey && e.key === "e" && table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission)
             {
                e.preventDefault();
                navigate("edit");
             }
-            else if (!e.metaKey && e.key === "c" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
+            else if (!e.metaKey && !e.ctrlKey && e.key === "c" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
                e.preventDefault();
                navigate("copy");
             }
-            else if (!e.metaKey && e.key === "d" && table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)
+            else if (!e.metaKey && !e.ctrlKey && e.key === "d" && table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)
             {
                e.preventDefault();
                handleClickDeleteButton();
             }
-            else if (!e.metaKey && e.key === "a" && metaData && metaData.tables.has("audit"))
+            else if (!e.metaKey && !e.ctrlKey && e.key === "a" && metaData && metaData.tables.has("audit"))
             {
                e.preventDefault();
                navigate("#audit");
@@ -384,6 +384,8 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          const tableMetaData = await qController.loadTableMetaData(tableName);
          setTableMetaData(tableMetaData);
 
+         recordAnalytics({location: window.location, title: "View: " + tableMetaData.label});
+
          //////////////////////////////////////////////////////////////////
          // load top-level meta-data (e.g., to find processes for table) //
          //////////////////////////////////////////////////////////////////
@@ -430,6 +432,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          {
             record = await qController.get(tableName, id, tableVariant, null, queryJoins);
             setRecord(record);
+            recordAnalytics({category: "tableEvents", action: "view", label: tableMetaData?.label + " / " + record?.recordLabel});
          }
          catch (e)
          {
@@ -447,13 +450,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);
@@ -505,7 +508,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                sectionFieldElements.set(section.name,
                   <Grid id={section.name} key={section.name} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", flexGrow: 1, scrollMarginTop: "100px"}}>
                      <Box width="100%" flexGrow={1} alignItems="stretch">
-                        <DashboardWidgets key={section.name} tableName={tableMetaData.name} widgetMetaDataList={[widgetMetaData]} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} omitWrappingGridContainer={true} />
+                        <DashboardWidgets key={section.name} tableName={tableMetaData.name} widgetMetaDataList={[widgetMetaData]} record={record} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} omitWrappingGridContainer={true} />
                      </Box>
                   </Grid>
                );
@@ -631,6 +634,8 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       event?.preventDefault();
       (async () =>
       {
+         recordAnalytics({category: "tableEvents", action: "delete", label: tableMetaData?.label + " / " + record?.recordLabel});
+
          await qController.delete(tableName, id)
             .then(() =>
             {
@@ -845,7 +850,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
    return (
       <BaseLayout>
-         <Box>
+         <Box className="recordView">
             <Grid container>
                <Grid item xs={12}>
                   <Box mb={3}>

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,6 +190,7 @@ 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;
@@ -208,13 +212,28 @@ 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
@@ -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;
@@ -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,25 @@ 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;
 }
+
+.entityForm h5,
+.recordView h5
+{
+   font-weight: 500;
+}
+
+.MuiPickersDay-root.Mui-selected, .MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover
+{
+   color: white;
+   background-color: #0062FF !important;
+}

src/qqq/utils/GoogleAnalyticsUtils.ts

@@ -0,0 +1,143 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import Client from "qqq/utils/qqq/Client";
+import ReactGA from "react-ga4";
+
+
+export interface PageView
+{
+   location: Location;
+   title: string;
+}
+
+export interface UserEvent
+{
+   action: string;
+   category: string;
+   label?: string;
+}
+
+export type AnalyticsModel = PageView | UserEvent;
+
+const qController = Client.getInstance();
+
+/*******************************************************************************
+ ** Utilities for working with Google Analytics (through react-ga4)^
+ *******************************************************************************/
+export default class GoogleAnalyticsUtils
+{
+   private metaData: QInstance = null;
+   private active: boolean = false;
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   constructor()
+   {
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private send = (model: AnalyticsModel) =>
+   {
+      if(!this.active)
+      {
+         return;
+      }
+
+      if(model.hasOwnProperty("location"))
+      {
+         const pageView = model as PageView;
+         ReactGA.send({hitType: "pageview", page: pageView.location.pathname + pageView.location.search, title: pageView.title});
+      }
+      else if(model.hasOwnProperty("action") || model.hasOwnProperty("category") || model.hasOwnProperty("label"))
+      {
+         const userEvent = model as UserEvent;
+         ReactGA.event({action: userEvent.action, category: userEvent.category, label: userEvent.label})
+      }
+      else
+      {
+         console.log("Unrecognizable analytics model", model);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private setup = async (): Promise<void> =>
+   {
+      this.metaData = await qController.loadMetaData();
+
+      let sessionValues: {[key: string]: any} = null;
+      try
+      {
+         sessionValues = JSON.parse(localStorage.getItem("sessionValues"));
+      }
+      catch(e)
+      {
+         console.log("Error reading session values from localStorage: " + e);
+      }
+
+      if (this.metaData.environmentValues.get("GOOGLE_ANALYTICS_ENABLED") == "true" && this.metaData.environmentValues.get("GOOGLE_ANALYTICS_TRACKING_ID"))
+      {
+         this.active = true;
+
+         if(sessionValues && sessionValues["googleAnalyticsValues"])
+         {
+            ReactGA.gtag("set", "user_properties", sessionValues["googleAnalyticsValues"]);
+         }
+
+         ReactGA.initialize(this.metaData.environmentValues.get("GOOGLE_ANALYTICS_TRACKING_ID"),
+            {
+               gaOptions: {},
+               gtagOptions: {}
+            });
+      }
+      else
+      {
+         this.active = false;
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public recordAnalytics = (model: AnalyticsModel) =>
+   {
+      if(this.metaData == null)
+      {
+         (async () =>
+         {
+            await this.setup();
+         })()
+      }
+
+      this.send(model);
+   }
+
+}

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

@@ -32,6 +32,7 @@ import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryF
 import {ThisOrLastPeriodExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
 import Box from "@mui/material/Box";
 import {GridSortModel} from "@mui/x-data-grid-pro";
+import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -612,6 +613,58 @@ class FilterUtils
       }
    }
 
+
+   /*******************************************************************************
+    ** make a new query filter, based on the input one, but w/ values good for the
+    ** backend.  such as, possible values as just ids, not objects w/ a label;
+    ** date-times formatted properly and in UTC
+    *******************************************************************************/
+   public static prepQueryFilterForBackend(tableMetaData: QTableMetaData, sourceFilter: QQueryFilter, pageNumber?: number, rowsPerPage?: number): QQueryFilter
+   {
+      const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.subFilters, sourceFilter.booleanOperator);
+      for (let i = 0; i < sourceFilter?.criteria?.length; i++)
+      {
+         const criteria = sourceFilter.criteria[i];
+         const {criteriaIsValid} = validateCriteria(criteria, null);
+         if (criteriaIsValid)
+         {
+            if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
+            {
+               ///////////////////////////////////////////////////////////////////////////////////////////
+               // do this to avoid submitting an empty-string argument for blank/not-blank operators... //
+               ///////////////////////////////////////////////////////////////////////////////////////////
+               filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, []));
+            }
+            else
+            {
+               ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               // else push a clone of the criteria - since it may get manipulated below (convertFilterPossibleValuesToIds) //
+               ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               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(FilterUtils.prepQueryFilterForBackend(tableMetaData, sourceFilter.subFilters[j]));
+      }
+
+      filterForBackend.subFilters = subFilters;
+
+      if(pageNumber !== undefined && rowsPerPage !== undefined)
+      {
+         filterForBackend.skip = pageNumber * rowsPerPage;
+         filterForBackend.limit = rowsPerPage;
+      }
+
+      return filterForBackend;
+   };
 }
 
 export default FilterUtils;

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()}`);
    }

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

@@ -29,6 +29,7 @@ import com.kingsrook.qqq.backend.core.model.metadata.authentication.QAuthenticat
 import com.kingsrook.qqq.backend.core.model.metadata.fields.QFieldMetaData;
 import com.kingsrook.qqq.backend.core.model.metadata.fields.QFieldType;
 import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
+import com.kingsrook.qqq.backend.core.modules.backend.implementations.memory.MemoryBackendModule;
 
 
 /*******************************************************************************
@@ -75,7 +76,7 @@ public class TestUtils
    {
       return (new QBackendMetaData()
          .withName(DEFAULT_BACKEND_NAME)
-         .withBackendType("memory"));
+         .withBackendType(MemoryBackendModule.class));
    }
 
 

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

@@ -261,9 +261,7 @@ public class QueryScreenLib
       if(StringUtils.hasContent(value))
       {
          qSeleniumLib.waitForSelector(".filterValuesColumn INPUT").click();
-         // todo - no, not in a listbox/LI here...
-         qSeleniumLib.waitForSelectorContaining(".MuiAutocomplete-listbox LI", value).click();
-         System.out.println(value);
+         qSeleniumLib.waitForSelector(".filterValuesColumn INPUT").sendKeys(value);
       }
 
       qSeleniumLib.clickBackdrop();
@@ -271,6 +269,21 @@ public class QueryScreenLib
 
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void setBasicBooleanFilter(String fieldLabel, String operatorLabel)
+   {
+      qSeleniumLib.waitForSelectorContaining("BUTTON", fieldLabel).click();
+      qSeleniumLib.waitForMillis(250);
+      qSeleniumLib.waitForSelector("#criteriaOperator").click();
+      qSeleniumLib.waitForSelectorContaining("LI", operatorLabel).click();
+
+      qSeleniumLib.clickBackdrop();
+   }
+
+
+
    /*******************************************************************************
     **
     *******************************************************************************/

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/SavedReportTest.java

@@ -0,0 +1,172 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
+
+
+import java.util.List;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QSeleniumLib;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QueryScreenLib;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
+import org.junit.jupiter.api.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.Keys;
+import org.openqa.selenium.WebElement;
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNull;
+
+
+/*******************************************************************************
+ ** Test for Saved Report screen (table has some special behaviors)
+ *******************************************************************************/
+public class SavedReportTest extends QBaseSeleniumTest
+{
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   protected void addJavalinRoutes(QSeleniumJavalin qSeleniumJavalin)
+   {
+      super.addJavalinRoutes(qSeleniumJavalin);
+      qSeleniumJavalin
+         .withRouteToFile("/metaData/table/savedReport", "metaData/table/savedReport.json")
+         .withRouteToFile("/widget/reportSetupWidget", "widget/reportSetupWidget.json")
+         .withRouteToFile("/widget/pivotTableSetupWidget", "widget/pivotTableSetupWidget.json")
+         .withRouteToFile("/data/savedReport/possibleValues/tableName", "data/savedReport/possibleValues/tableName.json")
+
+         .withRouteToFile("/data/person/count", "data/person/count.json")
+         .withRouteToFile("/data/person/query", "data/person/index.json")
+      ;
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Test
+   void testCreate()
+   {
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/userCustomizations/savedReport/create", "Creating New Saved Report");
+
+      //////////////////////////////////////////////////////////////
+      // make sure things are disabled before a table is selected //
+      //////////////////////////////////////////////////////////////
+      WebElement webElement = qSeleniumLib.waitForSelectorContaining("button", "Edit Filters and Columns");
+      assertEquals("true", webElement.getAttribute("disabled"));
+
+      qSeleniumLib.waitForSelector("#label").click();
+      qSeleniumLib.waitForSelector("#label").sendKeys("My Report");
+
+      qSeleniumLib.waitForSelector("#tableName").click();
+      qSeleniumLib.waitForSelector("#tableName").sendKeys("Person" + Keys.DOWN + Keys.ENTER);
+
+      //////////////////////////////////
+      // make sure things enabled now //
+      //////////////////////////////////
+      webElement = qSeleniumLib.waitForSelectorContaining("button", "Edit Filters and Columns");
+      assertNull(webElement.getAttribute("disabled"));
+
+      ////////////////////////////////////////////////////
+      // open query-screen popup, wait for query to run //
+      ////////////////////////////////////////////////////
+      qSeleniumJavalin.beginCapture();
+      qSeleniumLib.waitForSelectorContaining("button", "Edit Filters and Columns").click();
+      qSeleniumJavalin.waitForCapturedPath("/data/person/count");
+      qSeleniumJavalin.waitForCapturedPath("/data/person/query");
+      qSeleniumJavalin.endCapture();
+
+      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
+      queryScreenLib.setBasicFilter("First Name", "contains", "Darin");
+
+      ////////////////////////
+      // close query screen //
+      ////////////////////////
+      qSeleniumLib.waitForSelectorContaining("button", "OK").click();
+
+      //////////////////////////////////////////////////////
+      // make sure query things appear on edit screen now //
+      //////////////////////////////////////////////////////
+      qSeleniumLib.waitForSelectorContaining(".advancedQueryString", "First Name");
+      qSeleniumLib.waitForSelectorContaining(".advancedQueryString", "contains");
+      qSeleniumLib.waitForSelectorContaining(".advancedQueryString", "Darin");
+      List<WebElement> columns = qSeleniumLib.waitForSelectorContaining("h5", "Columns")
+         .findElement(QSeleniumLib.PARENT)
+         .findElements(By.cssSelector("DIV"));
+
+      assertThat(columns)
+         .hasSizeGreaterThanOrEqualTo(5) // at least this many
+         .anyMatch(we -> we.getText().equals("Home City")); // a few fields are found
+
+      ///////////////////
+      // turn on pivot //
+      ///////////////////
+      qSeleniumLib.waitForSelectorContaining("label", "Use Pivot Table").click();
+      qSeleniumLib.waitForSelectorContaining("button", "Edit Pivot Table").click();
+      qSeleniumLib.waitForSelectorContaining("h3", "Edit Pivot Table");
+
+      ///////////////
+      // add a row //
+      ///////////////
+      qSeleniumLib.waitForSelectorContaining(".MuiModal-root button", "Add new row").click();
+      WebElement row0Input = qSeleniumLib.waitForSelector("#rows-0");
+      row0Input.click();
+      row0Input.sendKeys("Last Name" + Keys.ENTER);
+
+      //////////////////
+      // add a column //
+      //////////////////
+      qSeleniumLib.waitForSelectorContaining(".MuiModal-root button", "Add new column").click();
+      WebElement column0Input = qSeleniumLib.waitForSelector("#columns-0");
+      column0Input.click();
+      column0Input.sendKeys("Home City" + Keys.ENTER);
+
+      /////////////////
+      // add a value //
+      /////////////////
+      qSeleniumLib.waitForSelectorContaining(".MuiModal-root button", "Add new value").click();
+      WebElement value0Input = qSeleniumLib.waitForSelector("#values-field-0");
+      value0Input.click();
+      value0Input.sendKeys("Id" + Keys.ENTER);
+
+      /////////////////////////////////////////
+      // try to submit - but expect an error //
+      /////////////////////////////////////////
+      qSeleniumLib.waitForSelectorContaining("button", "OK").click();
+      qSeleniumLib.waitForSelectorContaining(".MuiAlert-standard", "Missing value in 1 field.").click();
+
+      ///////////////////////////
+      // now select a function //
+      ///////////////////////////
+      WebElement function0Input = qSeleniumLib.waitForSelector("#values-function-0");
+      function0Input.click();
+      function0Input.sendKeys("Count" + Keys.ENTER);
+
+      qSeleniumLib.waitForSelectorContaining("button", "OK").click();
+      qSeleniumLib.waitForSelectorContainingToNotExist("h3", "Edit Pivot Table");
+
+      // qSeleniumLib.waitForever();
+   }
+
+}

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/query/QueryScreenTest.java

@@ -153,16 +153,16 @@ public class QueryScreenTest extends QBaseSeleniumTest
 
       queryScreenLib.addBasicFilter("Is Employed");
 
-      testBasicCriteria(queryScreenLib, "Is Employed", "equals yes", null, "(?s).*Is Employed:.*yes.*", """
+      testBasicBooleanCriteria(queryScreenLib, "Is Employed", "equals yes", "(?s).*Is Employed:.*yes.*", """
          {"fieldName":"isEmployed","operator":"EQUALS","values":[true]}""");
 
-      testBasicCriteria(queryScreenLib, "Is Employed", "equals no", null, "(?s).*Is Employed:.*no.*", """
+      testBasicBooleanCriteria(queryScreenLib, "Is Employed", "equals no", "(?s).*Is Employed:.*no.*", """
          {"fieldName":"isEmployed","operator":"EQUALS","values":[false]}""");
 
-      testBasicCriteria(queryScreenLib, "Is Employed", "is empty", null, "(?s).*Is Employed:.*is empty.*", """
+      testBasicBooleanCriteria(queryScreenLib, "Is Employed", "is empty", "(?s).*Is Employed:.*is empty.*", """
          {"fieldName":"isEmployed","operator":"IS_BLANK","values":[]}""");
 
-      testBasicCriteria(queryScreenLib, "Is Employed", "is not empty", null, "(?s).*Is Employed:.*is not empty.*", """
+      testBasicBooleanCriteria(queryScreenLib, "Is Employed", "is not empty", "(?s).*Is Employed:.*is not empty.*", """
          {"fieldName":"isEmployed","operator":"IS_NOT_BLANK","values":[]}""");
    }
 
@@ -203,10 +203,10 @@ public class QueryScreenTest extends QBaseSeleniumTest
    /*******************************************************************************
     **
     *******************************************************************************/
-   private void testBasicCriteria(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, String value, String expectButtonStringRegex, String expectFilterJsonContains)
+   private void testBasicBooleanCriteria(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, String expectButtonStringRegex, String expectFilterJsonContains)
    {
       qSeleniumJavalin.beginCapture();
-      queryScreenLib.setBasicFilter(fieldLabel, operatorLabel, value);
+      queryScreenLib.setBasicBooleanFilter(fieldLabel, operatorLabel);
       queryScreenLib.waitForBasicFilterButtonMatchingRegex(expectButtonStringRegex);
       qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectFilterJsonContains);
       qSeleniumJavalin.endCapture();

src/test/resources/fixtures/data/savedReport/possibleValues/tableName.json

@@ -0,0 +1,16 @@
+{
+   "options": [
+      {
+         "id": "person",
+         "label": "Person"
+      },
+      {
+         "id": "city",
+         "label": "City"
+      },
+      {
+         "id": "savedReport",
+         "label": "Saved Report"
+      }
+   ]
+}

src/test/resources/fixtures/metaData/index.json

@@ -189,6 +189,26 @@
          "insertPermission": true,
          "editPermission": true,
          "deletePermission": true
+      },
+      "savedReport": {
+         "name": "savedReport",
+         "label": "Saved Report",
+         "isHidden": false,
+         "iconName": "article",
+         "capabilities": [
+            "TABLE_COUNT",
+            "TABLE_GET",
+            "TABLE_QUERY",
+            "QUERY_STATS",
+            "TABLE_UPDATE",
+            "TABLE_INSERT",
+            "TABLE_DELETE"
+         ],
+         "readPermission": true,
+         "insertPermission": true,
+         "editPermission": true,
+         "deletePermission": true,
+         "usesVariants": false
       }
    },
    "processes": {
@@ -420,6 +440,40 @@
             }
          ]
       },
+      "userCustomizations": {
+         "name": "userCustomizations",
+         "label": "User Customizations",
+         "iconName": "article",
+         "widgets": [],
+         "children": [
+            {
+               "type": "TABLE",
+               "name": "savedReport",
+               "label": "Saved Report",
+               "iconName": "article"
+            }
+         ],
+         "childMap": {
+            "savedReport": {
+               "type": "TABLE",
+               "name": "savedReport",
+               "label": "Saved Report",
+               "iconName": "article"
+            }
+         },
+         "sections": [
+            {
+               "name": "userCustomizations",
+               "label": "User Customizations",
+               "icon": {
+                  "name": "badge"
+               },
+               "tables": [
+                  "savedReport"
+               ]
+            }
+         ]
+      },
       "miscellaneous": {
          "name": "miscellaneous",
          "label": "Miscellaneous",
@@ -730,6 +784,20 @@
             }
          ],
          "iconName": "data_object"
+      },
+      {
+         "type": "APP",
+         "name": "userCustomizations",
+         "label": "User Customizations",
+         "children": [
+            {
+               "type": "TABLE",
+               "name": "savedReport",
+               "label": "Saved Report",
+               "iconName": "article"
+            }
+         ],
+         "iconName": "data_object"
       }
    ],
    "branding": {
@@ -750,6 +818,28 @@
          "isCard": true,
          "storeDropdownSelections": false,
          "hasPermission": true
+      },
+      "reportSetupWidget": {
+         "name": "reportSetupWidget",
+         "label": "Filters and Columns",
+         "type": "reportSetup",
+         "isCard": true,
+         "storeDropdownSelections": false,
+         "showReloadButton": true,
+         "showExportButton": false,
+         "defaultValues": {},
+         "hasPermission": true
+      },
+      "pivotTableSetupWidget": {
+         "name": "pivotTableSetupWidget",
+         "label": "Pivot Table",
+         "type": "pivotTableSetup",
+         "isCard": true,
+         "storeDropdownSelections": false,
+         "showReloadButton": true,
+         "showExportButton": false,
+         "defaultValues": {},
+         "hasPermission": true
       }
    },
    "environmentValues": {

src/test/resources/fixtures/metaData/table/savedReport.json

@@ -0,0 +1,218 @@
+{
+   "table": {
+      "name": "savedReport",
+      "label": "Saved Report",
+      "isHidden": false,
+      "primaryKeyField": "id",
+      "iconName": "article",
+      "fields": {
+         "queryFilterJson": {
+            "name": "queryFilterJson",
+            "label": "Query Filter",
+            "type": "STRING",
+            "isRequired": false,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "columnsJson": {
+            "name": "columnsJson",
+            "label": "Columns",
+            "type": "STRING",
+            "isRequired": false,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "inputFieldsJson": {
+            "name": "inputFieldsJson",
+            "label": "Input Fields",
+            "type": "STRING",
+            "isRequired": false,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "pivotTableJson": {
+            "name": "pivotTableJson",
+            "label": "Pivot Table",
+            "type": "STRING",
+            "isRequired": false,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "modifyDate": {
+            "name": "modifyDate",
+            "label": "Modify Date",
+            "type": "DATE_TIME",
+            "isRequired": false,
+            "isEditable": false,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "label": {
+            "name": "label",
+            "label": "Report Name",
+            "type": "STRING",
+            "isRequired": true,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "id": {
+            "name": "id",
+            "label": "Id",
+            "type": "INTEGER",
+            "isRequired": false,
+            "isEditable": false,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "userId": {
+            "name": "userId",
+            "label": "User Id",
+            "type": "STRING",
+            "isRequired": false,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "tableName": {
+            "name": "tableName",
+            "label": "Table",
+            "type": "STRING",
+            "isRequired": true,
+            "isEditable": true,
+            "isHeavy": false,
+            "possibleValueSourceName": "tables",
+            "displayFormat": "%s"
+         },
+         "createDate": {
+            "name": "createDate",
+            "label": "Create Date",
+            "type": "DATE_TIME",
+            "isRequired": false,
+            "isEditable": false,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         }
+      },
+      "sections": [
+         {
+            "name": "identity",
+            "label": "Identity",
+            "tier": "T1",
+            "fieldNames": [
+               "id",
+               "label",
+               "tableName"
+            ],
+            "icon": {
+               "name": "badge"
+            },
+            "isHidden": false
+         },
+         {
+            "name": "filtersAndColumns",
+            "label": "Filters and Columns",
+            "tier": "T2",
+            "widgetName": "reportSetupWidget",
+            "icon": {
+               "name": "table_chart"
+            },
+            "isHidden": false
+         },
+         {
+            "name": "pivotTable",
+            "label": "Pivot Table",
+            "tier": "T2",
+            "widgetName": "pivotTableSetupWidget",
+            "icon": {
+               "name": "pivot_table_chart"
+            },
+            "isHidden": false
+         },
+         {
+            "name": "data",
+            "label": "Data",
+            "tier": "T2",
+            "fieldNames": [
+               "queryFilterJson",
+               "columnsJson",
+               "pivotTableJson"
+            ],
+            "icon": {
+               "name": "text_snippet"
+            },
+            "isHidden": true
+         },
+         {
+            "name": "hidden",
+            "label": "Hidden",
+            "tier": "T2",
+            "fieldNames": [
+               "inputFieldsJson",
+               "userId"
+            ],
+            "icon": {
+               "name": "text_snippet"
+            },
+            "isHidden": true
+         },
+         {
+            "name": "dates",
+            "label": "Dates",
+            "tier": "T3",
+            "fieldNames": [
+               "createDate",
+               "modifyDate"
+            ],
+            "icon": {
+               "name": "calendar_month"
+            },
+            "isHidden": false
+         }
+      ],
+      "exposedJoins": [],
+      "supplementalTableMetaData": {
+         "materialDashboard": {
+            "fieldRules": [
+               {
+                  "trigger": "ON_CHANGE",
+                  "sourceField": "tableName",
+                  "action": "CLEAR_TARGET_FIELD",
+                  "targetField": "queryFilterJson"
+               },
+               {
+                  "trigger": "ON_CHANGE",
+                  "sourceField": "tableName",
+                  "action": "CLEAR_TARGET_FIELD",
+                  "targetField": "columnsJson"
+               },
+               {
+                  "trigger": "ON_CHANGE",
+                  "sourceField": "tableName",
+                  "action": "CLEAR_TARGET_FIELD",
+                  "targetField": "pivotTableJson"
+               }
+            ],
+            "type": "materialDashboard"
+         }
+      },
+      "capabilities": [
+         "TABLE_COUNT",
+         "TABLE_GET",
+         "TABLE_QUERY",
+         "QUERY_STATS",
+         "TABLE_UPDATE",
+         "TABLE_INSERT",
+         "TABLE_DELETE"
+      ],
+      "readPermission": true,
+      "insertPermission": true,
+      "editPermission": true,
+      "deletePermission": true,
+      "usesVariants": false
+   }
+}

src/test/resources/fixtures/widget/pivotTableSetupWidget.json

@@ -0,0 +1 @@
+{"type":"pivotTableSetup"}

src/test/resources/fixtures/widget/reportSetupWidget.json

@@ -0,0 +1 @@
+{"type":"reportSetup"}