SPRINT-16: finished parcel dashboard widgets

package.json

@@ -13,11 +13,12 @@
       "@fullcalendar/interaction": "5.10.0",
       "@fullcalendar/react": "5.10.0",
       "@fullcalendar/timegrid": "5.10.0",
-      "@kingsrook/qqq-frontend-core": "1.0.36",
+      "@kingsrook/qqq-frontend-core": "1.0.37",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.4.1",
       "@mui/styled-engine": "5.4.1",
       "@mui/styles": "5.10.7",
+      "@mui/system": "5.10.14",
       "@mui/x-data-grid": "5.17.6",
       "@mui/x-data-grid-pro": "5.17.6",
       "@mui/x-license-pro": "5.12.3",

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

@@ -1,17 +1,17 @@
 /**
-=========================================================
+ =========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
+ * Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
+ =========================================================
 
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+ * Copyright 2022 Creative Tim (https://www.creative-tim.com)
 
-Coded by www.creative-tim.com
+ Coded by www.creative-tim.com
 
  =========================================================
 
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
+ */
 
 // Material Dashboard 2 PRO React TS Base Styles
 import colors from "assets/theme/base/colors";
@@ -21,30 +21,32 @@ import boxShadows from "assets/theme/base/boxShadows";
 // Material Dashboard 2 PRO React Helper Function
 import rgba from "assets/theme/functions/rgba";
 
-const { black, white } = colors;
+const {black, white} = colors;
-const { borderWidth, borderRadius } = borders;
+const {borderWidth, borderRadius} = borders;
-const { md } = boxShadows;
+const {md} = boxShadows;
 
 // types
 // types
 type Types = any;
 
 const card: Types = {
-  styleOverrides: {
+   defaultProps: {
-    root: {
+      elevation: 3
-      display: "flex",
+   },
-      flexDirection: "column",
+   styleOverrides: {
-      position: "relative",
+      root: {
-      minWidth: 0,
+         display: "flex",
-      wordWrap: "break-word",
+         flexDirection: "column",
-      backgroundColor: white.main,
+         position: "relative",
-      backgroundClip: "border-box",
+         minWidth: 0,
-      border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`,
+         wordWrap: "break-word",
-      borderRadius: borderRadius.xl,
+         backgroundColor: white.main,
-      boxShadow: md,
+         backgroundClip: "border-box",
-      overflow: "visible",
+         border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`,
-    },
+         borderRadius: borderRadius.xl,
-  },
+         overflow: "visible",
+      },
+   },
 };
 
 export default card;

src/qqq/components/DashboardWidgets.tsx

@@ -32,10 +32,12 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
 import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
 import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
 import MultiStatisticsCard from "qqq/pages/dashboards/Widgets/MultiStatisticsCard";
+import ParentWidget from "qqq/pages/dashboards/Widgets/ParentWidget";
 import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
 import RecordGridWidget from "qqq/pages/dashboards/Widgets/RecordGridWidget";
 import StepperCard from "qqq/pages/dashboards/Widgets/StepperCard";
 import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
+import ProcessRun from "qqq/pages/process-run";
 import QClient from "qqq/utils/QClient";
 
 const qController = QClient.getInstance();
@@ -45,15 +47,19 @@ interface Props
    widgetMetaDataList: QWidgetMetaData[];
    entityPrimaryKey?: string;
    omitWrappingGridContainer: boolean;
+   areChildren?: boolean;
+   childUrlParams?: string
 }
 
 DashboardWidgets.defaultProps = {
    widgetMetaDataList: null,
    entityPrimaryKey: null,
-   omitWrappingGridContainer: false
+   omitWrappingGridContainer: false,
+   areChildren: false,
+   childUrlParams: ""
 };
 
-function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGridContainer}: Props): JSX.Element
+function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams}: Props): JSX.Element
 {
    const location = useLocation();
    const [qInstance, setQInstance] = useState(null as QInstance);
@@ -83,7 +89,7 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
          widgetData[i] = {};
          (async () =>
          {
-            widgetData[i] = await qController.widget(widgetMetaDataList[i].name, `id=${entityPrimaryKey}`);
+            widgetData[i] = await qController.widget(widgetMetaDataList[i].name, `id=${entityPrimaryKey}&${childUrlParams}`);
             setWidgetCounter(widgetCounter + 1);
             forceUpdate();
          })();
@@ -96,143 +102,141 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
       setWidgetData([] as any[]);
    }, [location.pathname]);
 
-   const handleDropdownOnChange = (value: string, index: number) =>
+   const reloadWidget = (index: number, data: string) =>
    {
       setTimeout(async () =>
       {
-         widgetData[index] = await qController.widget(widgetMetaDataList[index].name);
+         widgetData[index] = await qController.widget(widgetMetaDataList[index].name, `id=${entityPrimaryKey}&${data}`);
+         setWidgetCounter(widgetCounter + 1);
       }, 1);
    };
 
    const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0;
-   // console.log(JSON.stringify(widgetMetaDataList));
-   // console.log(widgetCount);
 
    const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
    {
       return (
-         <>
+         <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+            {
+               widgetMetaData.type === "parentWidget" && (
+                  <ParentWidget
+                     widgetIndex={i}
+                     label={widgetMetaData.label}
+                     data={widgetData[i]}
+                     reloadWidgetCallback={reloadWidget}
+                  />
+               )
+            }
             {
                widgetMetaData.type === "table" && (
-                  <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%"}}>
+                  <TableCard
-                     <TableCard
+                     color="info"
-                        color="info"
+                     title={widgetMetaData.label}
-                        title={widgetMetaData.label}
+                     linkText={widgetData[i]?.linkText}
-                        linkText={widgetData[i]?.linkText}
+                     linkURL={widgetData[i]?.linkURL}
-                        linkURL={widgetData[i]?.linkURL}
+                     noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
-                        noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
+                     data={widgetData[i]}
-                        data={widgetData[i]}
+                     dropdownOptions={widgetData[i]?.dropdownOptions}
-                        dropdownOptions={widgetData[i]?.dropdownOptions}
+                     reloadWidgetCallback={reloadWidget}
-                        dropdownOnChange={handleDropdownOnChange}
+                     widgetIndex={i}
-                        widgetIndex={i}
+                  />
-                     />
+               )
-                  </MDBox>
+            }
+            {
+               widgetMetaData.type === "process" && widgetData[i]?.processMetaData && (
+                  <ProcessRun process={widgetData[i]?.processMetaData} defaultProcessValues={widgetData[i]?.defaultValues} isWidget={true} />
                )
             }
             {
                widgetMetaData.type === "stepper" && (
-                  <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+                  <Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
-                     <Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+                     <MDBox padding="1rem">
-                        <MDBox padding="1rem">
+                        {
-                           {
+                           widgetMetaData.label && (
-                              widgetMetaData.label && (
+                              <MDTypography variant="h5" textTransform="capitalize">
-                                 <MDTypography variant="h5" textTransform="capitalize">
+                                 {widgetMetaData.label}srp
-                                    {widgetMetaData.label}
+                              </MDTypography>
-                                 </MDTypography>
+                           )
-                              )
+                        }
-                           }
+                        <StepperCard data={widgetData[i]} />
-                           <StepperCard data={widgetData[i]} />
+                     </MDBox>
-                        </MDBox>
+                  </Card>
-                     </Card>
-                  </MDBox>
                )
             }
             {
                widgetMetaData.type === "html" && (
-                  <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+                  <Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
-                     <Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+                     <MDBox padding="1rem">
-                        <MDBox padding="1rem">
+                        <MDTypography variant="h5" textTransform="capitalize">
-                           <MDTypography variant="h5" textTransform="capitalize">
+                           {widgetMetaData.label}
-                              {widgetMetaData.label}
+                        </MDTypography>
-                           </MDTypography>
+                        <MDTypography component="div" variant="button" color="text" fontWeight="light">
-                           <MDTypography component="div" variant="button" color="text" fontWeight="light">
+                           {
-                              {
+                              widgetData && widgetData[i] && widgetData[i].html ? (
-                                 widgetData && widgetData[i] && widgetData[i].html ? (
+                                 parse(widgetData[i].html)
-                                    parse(widgetData[i].html)
+                              ) : <Skeleton />
-                                 ) : <Skeleton />
+                           }
-                              }
+                        </MDTypography>
-                           </MDTypography>
+                     </MDBox>
-                        </MDBox>
+                  </Card>
-                     </Card>
-                  </MDBox>
                )
             }
             {
                widgetMetaData.type === "multiStatistics" && (
-                  <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+                  <MultiStatisticsCard
-                     <MultiStatisticsCard
+                     color="info"
-                        color="info"
+                     title={widgetMetaData.label}
-                        title={widgetMetaData.label}
+                     data={widgetData[i]}
-                        data={widgetData[i]}
+                  />
-                     />
-                  </MDBox>
                )
             }
             {
                widgetMetaData.type === "quickSightChart" && (
-                  <MDBox sx={{display: "flex"}}>
+                  <QuickSightChart url={widgetData[i]?.url} label={widgetMetaData.label} />
-                     <QuickSightChart url={widgetData[i]?.url} label={widgetMetaData.label} />
-                  </MDBox>
                )
             }
             {
                widgetMetaData.type === "barChart" && (
-                  <MDBox mb={3} sx={{display: "flex"}}>
+                  <BarChart
-                     <BarChart
+                     color="info"
-                        color="info"
+                     title={widgetMetaData.label}
-                        title={widgetMetaData.label}
+                     date={`As of ${new Date().toDateString()}`}
-                        date={`As of ${new Date().toDateString()}`}
+                     data={widgetData[i]?.chartData}
-                        data={widgetData[i]?.chartData}
+                  />
-                     />
-                  </MDBox>
                )
             }
             {
                widgetMetaData.type === "lineChart" && (
                   widgetData && widgetData[i] ? (
-                     <MDBox mb={3}>
+                     <LineChart
-                        <LineChart
+                        title={widgetData[i].title}
-                           title={widgetData[i].title}
+                        description={(
-                           description={(
+                           <MDBox display="flex" justifyContent="space-between">
-                              <MDBox display="flex" justifyContent="space-between">
+                              <MDBox display="flex" ml={-1}>
-                                 <MDBox display="flex" ml={-1}>
+                                 {
-                                    {
+                                    widgetData[i].lineChartData.datasets.map((dataSet: any) => (
-                                       widgetData[i].lineChartData.datasets.map((dataSet: any) => (
+                                       <MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
-                                          <MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
+                                    ))
-                                       ))
+                                 }
-                                    }
-                                 </MDBox>
-                                 <MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
                               </MDBox>
-                           )}
+                              <MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
-                           chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
+                           </MDBox>
-                        />
+                        )}
-                     </MDBox>
+                        chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
+                     />
                   ) : null
                )
             }
             {
                widgetMetaData.type === "childRecordList" && (
                   widgetData && widgetData[i] &&
-                  <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%"}}>
                      <RecordGridWidget
                         title={widgetMetaData.label}
                         data={widgetData[i]}
                      />
-                  </MDBox>
                )
             }
-         </>
+         </MDBox>
       );
    }
 

src/qqq/components/Temporary/DataTable/DataTableBodyCell.tsx

@@ -45,7 +45,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
          })}
       >
          <MDBox
-            display="inline-block"
+            display="initial"
             width="max-content"
             color="text"
          >

src/qqq/pages/dashboards/Widgets/Components/DropdownMenu.tsx

@@ -0,0 +1,70 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Theme} from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import {SxProps} from "@mui/system";
+import React from "react";
+
+
+export interface DropdownOption
+{
+   id: string;
+   label: string;
+}
+
+/////////////////////////
+// inputs and defaults //
+/////////////////////////
+interface Props
+{
+   label?: string;
+   dropdownOptions?: DropdownOption[];
+   onChangeCallback?: (dropdownLabel: string, data: any) => void;
+   sx?: SxProps<Theme>;
+}
+
+function DropdownMenu({label, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
+{
+   const handleOnChange = (event: any, value: any, reason: string) =>
+   {
+      onChangeCallback(label, value);
+   }
+
+   return (
+      dropdownOptions ? (
+         <span style={{whiteSpace: "nowrap"}}>
+            <Autocomplete
+               size="small"
+               disablePortal
+               id={`${label}-combo-box`}
+               options={dropdownOptions}
+               sx={{...sx, cursor: "pointer"}}
+               onChange={handleOnChange}
+               renderInput={(params: any) => <TextField {...params} label={label} />}
+            />
+         </span>
+      ) : null
+   )
+}
+
+export default DropdownMenu;

src/qqq/pages/dashboards/Widgets/ParentWidget.tsx

@@ -0,0 +1,191 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {Box, Typography} from "@mui/material";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import React, {useEffect, useState} from "react";
+import DashboardWidgets from "qqq/components/DashboardWidgets";
+import DropdownMenu from "qqq/pages/dashboards/Widgets/Components/DropdownMenu";
+import QClient from "qqq/utils/QClient";
+
+
+//////////////////////////////////////////////
+// structure of expected parent widget data //
+//////////////////////////////////////////////
+export interface ParentWidgetData
+{
+   dropdownLabelList: string[];
+   dropdownNameList: string[];
+   dropdownDataList: {
+      id: string,
+      label: string
+   }[][];
+   childWidgetNameList: string[];
+}
+
+
+////////////////////////////////////
+// define properties and defaults //
+////////////////////////////////////
+interface Props
+{
+   widgetIndex: number;
+   label: string;
+   data: ParentWidgetData;
+   reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
+}
+
+
+const qController = QClient.getInstance();
+function ParentWidget({widgetIndex, label, data, reloadWidgetCallback}: Props, ): JSX.Element
+{
+   const [childUrlParams, setChildUrlParams] = useState("");
+   const [qInstance, setQInstance] = useState(null as QInstance);
+   const [dropdownData, setDropdownData] = useState([]);
+   const [widgets, setWidgets] = useState([] as any[]);
+   const [counter, setCounter] = useState(0);
+
+   useEffect(() =>
+   {
+      (async () =>
+      {
+         const newQInstance = await qController.loadMetaData();
+         setQInstance(newQInstance);
+      })();
+   }, []);
+
+   useEffect(() =>
+   {
+      if(qInstance && data && data.childWidgetNameList)
+      {
+         let widgetMetaDataList = [] as QWidgetMetaData[];
+         data?.childWidgetNameList.forEach((widgetName: string) =>
+         {
+            widgetMetaDataList.push(qInstance.widgets.get(widgetName));
+         })
+         setWidgets(widgetMetaDataList);
+         console.log(`SETTINGWIDGETS...${widgetMetaDataList.length}`)
+      }
+   }, [qInstance, data]);
+
+   function doit()
+   {
+      reloadWidgetCallback(0, "ok");
+   }
+
+   function handleDataChange(dropdownLabel: string, changedData: any)
+   {
+      if(dropdownData)
+      {
+         ///////////////////////////////////////////
+         // find the index base on selected label //
+         ///////////////////////////////////////////
+         const tableName = dropdownLabel.replace("Select ", "");
+         let index = -1;
+         for (let i = 0; i < data.dropdownLabelList.length; i++)
+         {
+            if (tableName === data.dropdownLabelList[i])
+            {
+               index = i;
+               break;
+            }
+         }
+
+         if (index < 0)
+         {
+            throw(`Could not find table name for label ${tableName}`);
+         }
+
+         dropdownData[index] = (changedData) ? changedData.id : null;
+         setDropdownData(dropdownData);
+         setCounter(counter + 1);
+      }
+   }
+
+   useEffect(() =>
+   {
+      if(dropdownData)
+      {
+         console.log(JSON.stringify(data));
+
+         let params = "";
+         for (let i = 0; i < dropdownData.length; i++)
+         {
+            if (i > 0)
+            {
+               params += "&";
+            }
+            params += `${data.dropdownNameList[i]}=`;
+            if(dropdownData[i])
+            {
+               params += `${dropdownData[i]}`;
+
+            }
+         }
+         console.log(params);
+         reloadWidgetCallback(widgetIndex, params);
+         setChildUrlParams(params)
+      }
+   }, [counter]);
+
+
+   return (
+      <Card className="parentWidgetCard" sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+
+         <Grid container>
+            <Grid item xs={3}>
+               <Box pt={3} px={3}>
+                  {
+                     label && (
+                        <Typography variant="h5" textTransform="capitalize">
+                           {label}
+                        </Typography>
+                     )
+                  }
+               </Box>
+            </Grid>
+            <Grid item xs={9}>
+               <Box mb={3} p={3}>
+                  {
+                     data?.dropdownDataList?.map((dropdownData: any, index: number) =>
+                        <DropdownMenu
+                           key={`dropdown-${data.dropdownLabelList[index]}-${index}`}
+                           label={`Select ${data.dropdownLabelList[index]}`}
+                           sx={{width: 200, marginLeft: "15px", float: "right"}}
+                           dropdownOptions={dropdownData}
+                           onChangeCallback={handleDataChange}
+                        />
+                     )
+                  }
+               </Box>
+            </Grid>
+         </Grid>
+         <Box pr={3} pl={3}>
+            <DashboardWidgets widgetMetaDataList={widgets} areChildren={true} childUrlParams={childUrlParams}/>
+         </Box>
+      </Card>
+   );
+}
+
+export default ParentWidget;

src/qqq/pages/dashboards/Widgets/TableCard.tsx

@@ -53,13 +53,14 @@ interface Props
       id: string,
       name: string
    }[];
-   dropdownOnChange?: (selectedValue: string, widgetIndex: number) => void;
+   reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
    widgetIndex?: number;
+   isChild?: boolean;
 
    [key: string]: any;
 }
 
-function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOptions, dropdownOnChange, widgetIndex}: Props): JSX.Element
+function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOptions, reloadWidgetCallback, widgetIndex, isChild}: Props): JSX.Element
 {
    const openArrowIcon = "arrow_drop_down";
    const closeArrowIcon = "arrow_drop_up";
@@ -82,7 +83,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
       setDropdown(null);
       setDropdownValue(currentTarget.innerText || dropdownValue);
       setDropdownIcon(openArrowIcon);
-      dropdownOnChange(currentTarget.innerText || dropdownValue, widgetIndex);
+      reloadWidgetCallback(widgetIndex, null);
    };
 
    const renderMenu = (state: any, open: any, close: any, icon: string) => (
@@ -113,6 +114,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
       {
          setDropdownValue(dropdownOptions[0]["id"]);
          setDropdownLabel(dropdownOptions[0]["name"]);
+
       }
    }, [dropdownOptions]);
 
@@ -121,7 +123,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
          <Grid container>
             <Grid item xs={6}>
                <MDBox pt={3} px={3}>
-                  <MDTypography variant="h5" fontWeight="medium">
+                  <MDTypography variant={isChild ? "h5" : "h6"} fontWeight="medium">
                      {title}
                   </MDTypography>
                </MDBox>

src/qqq/pages/process-run/index.tsx

@@ -20,6 +20,7 @@
  */
 
 import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
+import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
 import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFrontendComponent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendComponent";
@@ -70,6 +71,7 @@ interface Props
    process?: QProcessMetaData;
    defaultProcessValues?: any;
    isModal?: boolean;
+   isWidget?: boolean;
    recordIds?: string | QQueryFilter;
    closeModalHandler?: (event: object, reason: string) => void;
 }
@@ -78,7 +80,7 @@ const INITIAL_RETRY_MILLIS = 1_500;
 const RETRY_MAX_MILLIS = 12_000;
 const BACKOFF_AMOUNT = 1.5;
 
-function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeModalHandler}: Props): JSX.Element
+function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds, closeModalHandler}: Props): JSX.Element
 {
    const processNameParam = useParams().processName;
    const processName = process === null ? processNameParam : process.name;
@@ -320,8 +322,8 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
 
       return (
          <>
-            <MDTypography variation="h5" component="div" fontWeight="bold">
+            <MDTypography variant={isWidget ? "h6" : "h5"} component="div" fontWeight="bold">
-               {isModal ? `${process.label}: ` : ""}
+               {(isModal) ? `${process.label}: ` : ""}
                {step?.label}
             </MDTypography>
             {step.components && (
@@ -421,16 +423,26 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
                         component.type === QComponentType.VIEW_FORM && step.viewFields && (
                            <div>
                               {step.viewFields.map((field: QFieldMetaData) => (
-                                 <MDBox key={field.name} display="flex" py={1} pr={2}>
+                                 field.hasAdornment(AdornmentType.ERROR) ? (
-                                    <MDTypography variant="button" fontWeight="bold">
+                                    processValues[field.name] && (
-                                       {field.label}
+                                       <MDBox key={field.name} display="flex" py={1} pr={2}>
-                                       : &nbsp;
+                                          <MDTypography variant="button" fontWeight="regular">
-                                    </MDTypography>
+                                             {QValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
-                                    <MDTypography variant="button" fontWeight="regular" color="text">
+                                          </MDTypography>
-                                       {QValueUtils.getValueForDisplay(field, processValues[field.name], "view")}
+                                       </MDBox>
-                                    </MDTypography>
+                                    )
-                                 </MDBox>
+                                 ) : (
-                              ))}
+                                    <MDBox key={field.name} display="flex" py={1} pr={2}>
+                                       <MDTypography variant="button" fontWeight="bold">
+                                          {field.label}
+                                          : &nbsp;
+                                       </MDTypography>
+                                       <MDTypography variant="button" fontWeight="regular" color="text">
+                                          {QValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
+                                       </MDTypography>
+                                    </MDBox>
+                                 )))
+                              }
                            </div>
                         )
                      }
@@ -589,7 +601,11 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
          console.log("No process meta data yet, so returning early");
          return;
       }
-      setPageHeader(processMetaData.label);
+
+      if(! isWidget)
+      {
+         setPageHeader(processMetaData.label);
+      }
 
       let newIndex = null;
       if (typeof newStep === "number")
@@ -1083,12 +1099,22 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
    };
 
    const mainCardStyles: any = {};
+   const formStyles: any = {};
    mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
-   if (!processError && (qJobRunning || activeStep === null) && !isModal)
+   if (!processError && (qJobRunning || activeStep === null) && !isModal && !isWidget)
    {
       mainCardStyles.background = "none";
       mainCardStyles.boxShadow = "none";
    }
+   if(isWidget)
+   {
+      mainCardStyles.minHeight = "";
+      mainCardStyles.alignItems = "stretch";
+      mainCardStyles.flexGrow = 1;
+      mainCardStyles.display = "flex";
+      formStyles.display = "flex";
+      formStyles.flexGrow = 1;
+   }
 
    let nextButtonLabel = "Next";
    let nextButtonIcon = "arrow_forward";
@@ -1106,95 +1132,107 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
       nextButtonIcon = "check";
    }
 
+   const form = (
+      <Formik
+         enableReinitialize
+         initialValues={initialValues}
+         validationSchema={validationScheme}
+         validation={validationFunction}
+         onSubmit={handleSubmit}
+      >
+         {({
+            values, errors, touched, isSubmitting, setFieldValue,
+         }) => (
+            <Form style={formStyles} id={formId} autoComplete="off">
+               <Card sx={mainCardStyles}>
+                  {
+                     !isWidget && (
+                        <MDBox mx={2} mt={-3}>
+                           <Stepper activeStep={activeStepIndex} alternativeLabel>
+                              {steps.map((step) => (
+                                 <Step key={step.name}>
+                                    <StepLabel>{step.label}</StepLabel>
+                                 </Step>
+                              ))}
+                           </Stepper>
+                        </MDBox>
+                     )
+                  }
+
+                  <MDBox p={3}>
+                     <MDBox>
+                        {/***************************************************************************
+                               ** step content - e.g., the appropriate form or other screen for the step **
+                               ***************************************************************************/}
+                        {getDynamicStepContent(
+                           activeStepIndex,
+                           activeStep,
+                           {
+                              values,
+                              touched,
+                              formFields,
+                              errors,
+                           },
+                           processError,
+                           processValues,
+                           recordConfig,
+                           setFieldValue,
+                        )}
+                        {/********************************
+                               ** back &| next/submit buttons **
+                               ********************************/}
+                        <MDBox mt={6} width="100%" display="flex" justifyContent="space-between">
+                           {true || activeStepIndex === 0 ? (
+                              <MDBox />
+                           ) : (
+                              <MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
+                           )}
+                           {processError || qJobRunning || !activeStep ? (
+                              <MDBox />
+                           ) : (
+                              <>
+                                 {formError && (
+                                    <MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
+                                       {formError}
+                                    </MDTypography>
+                                 )}
+                                 {
+                                    noMoreSteps && <QCancelButton
+                                       onClickHandler={handleCancelClicked}
+                                       label={isModal ? "Close" : "Return"}
+                                       iconName={isModal ? "cancel" : "arrow_back"}
+                                       disabled={isSubmitting} />
+                                 }
+                                 {
+                                    !noMoreSteps && (
+                                       <MDBox component="div" py={3}>
+                                          <Grid container justifyContent="flex-end" spacing={3}>
+                                             {
+                                                ! isWidget && (
+                                                   <QCancelButton onClickHandler={handleCancelClicked} disabled={isSubmitting} />
+                                                )
+                                             }
+                                             <QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
+                                          </Grid>
+                                       </MDBox>
+                                    )
+                                 }
+                              </>
+                           )}
+                        </MDBox>
+                     </MDBox>
+                  </MDBox>
+               </Card>
+            </Form>
+         )}
+      </Formik>
+   );
+
    const body = (
       <MDBox py={3} mb={20}>
          <Grid container justifyContent="center" alignItems="center" sx={{height: "100%", mt: 8}}>
             <Grid item xs={12} lg={10} xl={8}>
-               <Formik
+               {form}
-                  enableReinitialize
-                  initialValues={initialValues}
-                  validationSchema={validationScheme}
-                  validation={validationFunction}
-                  onSubmit={handleSubmit}
-               >
-                  {({
-                     values, errors, touched, isSubmitting, setFieldValue,
-                  }) => (
-                     <Form id={formId} autoComplete="off">
-                        <Card sx={mainCardStyles}>
-                           <MDBox mx={2} mt={-3}>
-                              <Stepper activeStep={activeStepIndex} alternativeLabel>
-                                 {steps.map((step) => (
-                                    <Step key={step.name}>
-                                       <StepLabel>{step.label}</StepLabel>
-                                    </Step>
-                                 ))}
-                              </Stepper>
-                           </MDBox>
-
-                           <MDBox p={3}>
-                              <MDBox>
-                                 {/***************************************************************************
-                                  ** step content - e.g., the appropriate form or other screen for the step **
-                                  ***************************************************************************/}
-                                 {getDynamicStepContent(
-                                    activeStepIndex,
-                                    activeStep,
-                                    {
-                                       values,
-                                       touched,
-                                       formFields,
-                                       errors,
-                                    },
-                                    processError,
-                                    processValues,
-                                    recordConfig,
-                                    setFieldValue,
-                                 )}
-                                 {/********************************
-                                  ** back &| next/submit buttons **
-                                  ********************************/}
-                                 <MDBox mt={6} width="100%" display="flex" justifyContent="space-between">
-                                    {true || activeStepIndex === 0 ? (
-                                       <MDBox />
-                                    ) : (
-                                       <MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
-                                    )}
-                                    {processError || qJobRunning || !activeStep ? (
-                                       <MDBox />
-                                    ) : (
-                                       <>
-                                          {formError && (
-                                             <MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
-                                                {formError}
-                                             </MDTypography>
-                                          )}
-                                          {
-                                             noMoreSteps && <QCancelButton
-                                                onClickHandler={handleCancelClicked}
-                                                label={isModal ? "Close" : "Return"}
-                                                iconName={isModal ? "cancel" : "arrow_back"}
-                                                disabled={isSubmitting} />
-                                          }
-                                          {
-                                             !noMoreSteps && (
-                                                <MDBox component="div" py={3}>
-                                                   <Grid container justifyContent="flex-end" spacing={3}>
-                                                      <QCancelButton onClickHandler={handleCancelClicked} disabled={isSubmitting} />
-                                                      <QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
-                                                   </Grid>
-                                                </MDBox>
-                                             )
-                                          }
-                                       </>
-                                    )}
-                                 </MDBox>
-                              </MDBox>
-                           </MDBox>
-                        </Card>
-                     </Form>
-                  )}
-               </Formik>
             </Grid>
          </Grid>
       </MDBox>
@@ -1208,7 +1246,14 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
          </Box>
       );
    }
-   else
+   else if (isWidget)
+   {
+      return (
+         <Box sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+            {form}
+         </Box>
+      );
+   }
    {
       return (
          <BaseLayout>
@@ -1222,6 +1267,7 @@ ProcessRun.defaultProps = {
    process: null,
    defaultProcessValues: {},
    isModal: false,
+   isWidget: false,
    recordIds: null,
    closeModalHandler: null
 };

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

@@ -259,3 +259,25 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 {
    white-space: pre-wrap;
 }
+
+.MuiAutocomplete-input
+{
+   cursor: pointer;
+}
+
+.parcelRulesCard
+{
+   font-size: 16px;
+}
+
+.parcelRulesCard TD
+{
+   font-size: 14px !important;
+   vertical-align: top;
+}
+
+.parcelRulesCard A
+{
+   color: blue;
+   font-size: 14px;
+}

src/qqq/utils/QValueUtils.tsx

@@ -25,7 +25,7 @@ import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QField
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import "datejs";
-import {Chip, Icon, Typography} from "@mui/material";
+import {Box, Chip, Icon} from "@mui/material";
 import React, {Fragment} from "react";
 import AceEditor from "react-ace";
 import {Link} from "react-router-dom";
@@ -172,6 +172,20 @@ class QValueUtils
          }
       }
 
+      if (field.hasAdornment(AdornmentType.ERROR))
+      {
+         return (
+            <Box color={"darkred"} alignContent={"baseline"}>
+               <Box mr={2} sx={{float: "left"}}>
+                  <Icon>warning</Icon>
+               </Box>
+               <Box sx={{float: "left"}}>
+                  {rawValue}
+               </Box>
+            </Box>
+         );
+      }
+
       return (QValueUtils.getUnadornedValueForDisplay(field, rawValue, displayValue));
    }
 
@@ -181,6 +195,11 @@ class QValueUtils
     *******************************************************************************/
    private static getUnadornedValueForDisplay(field: QFieldMetaData, rawValue: any, displayValue: any): string | JSX.Element
    {
+      if(! displayValue && field.defaultValue)
+      {
+         displayValue = field.defaultValue;
+      }
+
       if (field.type === QFieldType.DATE_TIME)
       {
          if (!rawValue)