updated to show error if widgets dont load correctly, tried to make 'big icons' more specific and an 'opt in'

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -97,9 +97,19 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
          widgetData[i] = {};
          (async () =>
          {
-            widgetData[i] = await qController.widget(widgetMetaData.name, urlParams);
+            try
-            setWidgetData(widgetData);
+            {
-            setWidgetCounter(widgetCounter + 1);
+               widgetData[i] = await qController.widget(widgetMetaData.name, urlParams);
+               setWidgetData(widgetData);
+               setWidgetCounter(widgetCounter + 1);
+               widgetData[i]["errorLoading"] = false;
+            }
+            catch(e)
+            {
+               console.error(e);
+               widgetData[i]["errorLoading"] = true;
+            }
+
             forceUpdate();
          })();
       }
@@ -112,9 +122,19 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
          const urlParams = getQueryParams(widgetMetaDataList[index], data);
          setCurrentUrlParams(urlParams);
 
-         widgetData[index] = await qController.widget(widgetMetaDataList[index].name, urlParams);
+         try
-         setWidgetCounter(widgetCounter + 1);
+         {
-         setWidgetData(widgetData);
+            widgetData[index] = await qController.widget(widgetMetaDataList[index].name, urlParams);
+            setWidgetCounter(widgetCounter + 1);
+            setWidgetData(widgetData);
+            widgetData[index]["errorLoading"] = false;
+         }
+         catch(e)
+         {
+            console.error(e);
+            widgetData[index]["errorLoading"] = true;
+         }
+
          forceUpdate();
       })();
    };

src/qqq/components/widgets/Widget.tsx

@@ -43,6 +43,7 @@ export interface WidgetData
    }[][];
    dropdownNeedsSelectedText?: string;
    hasPermission?: boolean;
+   errorLoading?: boolean;
 }
 
 
@@ -297,6 +298,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
    }
 
    const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
+   const errorLoading = props.widgetData?.errorLoading !== undefined && props.widgetData?.errorLoading === true;
    const widgetContent =
       <Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
          <Box pr={2} display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}}>
@@ -360,11 +362,6 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                      )
                   )
                }
-               {/*
-               <Button onClick={() => toggleFullScreenWidget()}>
-                  {fullScreenWidgetClassName ? "-" : "+"}
-               </Button>
-               */}
                {
                   hasPermission && (
                      props.labelAdditionalComponentsLeft.map((component, i) =>
@@ -386,22 +383,29 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
             </Box>
          </Box>
          {
-            hasPermission && props.widgetData?.dropdownNeedsSelectedText ? (
+            errorLoading ? (
-               <Box pb={3} pr={3} sx={{width: "100%", textAlign: "right"}}>
+               <Box p={3} sx={{display: "flex", justifyContent: "center", alignItems: "flex-start"}}>
-                  <Typography variant="body2">
+                  <Icon color="error">error</Icon>
-                     {props.widgetData?.dropdownNeedsSelectedText}
+                  <Typography sx={{paddingLeft: "4px", textTransform: "revert"}} variant="button">An error occurred loading widget content.</Typography>
-                  </Typography>
                </Box>
             ) : (
-               hasPermission ? (
+               hasPermission && props.widgetData?.dropdownNeedsSelectedText ? (
-                  props.children
+                  <Box pb={3} pr={3} sx={{width: "100%", textAlign: "right"}}>
+                     <Typography variant="body2">
+                        {props.widgetData?.dropdownNeedsSelectedText}
+                     </Typography>
+                  </Box>
                ) : (
-                  <Box mt={2} mb={5} sx={{display: "flex", justifyContent: "center"}}><Typography variant="body2">You do not have permission to view this data.</Typography></Box>
+                  hasPermission ? (
+                     props.children
+                  ) : (
+                     <Box mt={2} mb={5} sx={{display: "flex", justifyContent: "center"}}><Typography variant="body2">You do not have permission to view this data.</Typography></Box>
+                  )
                )
             )
          }
          {
-            props?.footerHTML && (
+            ! errorLoading && props?.footerHTML && (
                <Box mt={1} ml={3} mr={3} mb={2} sx={{fontWeight: 300, color: "#7b809a", display: "flex", alignContent: "flex-end", fontSize: "14px"}}>{parse(props.footerHTML)}</Box>
             )
          }

src/qqq/pages/apps/Home.tsx

@@ -26,7 +26,8 @@ import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/
 import {QReportMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QReportMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Box, Icon, Typography} from "@mui/material";
+import {Icon, Typography} from "@mui/material";
+import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
 import Grid from "@mui/material/Grid";
@@ -316,7 +317,7 @@ function AppHome({app}: Props): JSX.Element
                                                    <Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}>
                                                       {hasTablePermission(tableName) ?
                                                          <Link to={table.name}>
-                                                            <Box mb={3}>
+                                                            <Box className="big-icon" mb={3}>
                                                                <MiniStatisticsCard
                                                                   title={{fontWeight: "bold", text: table.label}}
                                                                   count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}

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

@@ -386,16 +386,15 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    font-size: 0.875rem;
 }
 
-.MuiGrid-root > .MuiBox-root > .material-icons-round,
+.big-icon .material-icons-round
-.MuiBox-root > .MuiBox-root > .material-icons-round
 {
    font-size: 2rem !important;
 }
 
 .dashboard-schedule-icon
 {
-   font-size: 1rem !important;
+   font-size: 1.1rem !important;
    position: relative;
-   top: -13px;
+   top: -5px;
-   margin-right: 3px;
+   margin-right: 8px;
 }