SPRINT-12: added 'multi statitistics' widget

src/qqq/components/DashboardWidgets.tsx

@@ -29,6 +29,7 @@ import MDBox from "qqq/components/Temporary/MDBox";
 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 QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
 import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
 import QClient from "qqq/utils/QClient";
@@ -100,6 +101,8 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
 
    const widgetCount = widgets ? widgets.length : 0;
 
+   console.log(widgets);
+
    return (
       widgetCount > 0 ? (
          <Grid item xs={12} lg={12}>
@@ -112,6 +115,7 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
                               <TableCard
                                  color="info"
                                  title={widget.title}
+                                 noRowsFoundHTML={widget.noRowsFoundHTML}
                                  data={widget}
                                  dropdownOptions={widget.dropdownOptions}
                                  dropdownOnChange={handleDropdownOnChange}
@@ -135,6 +139,15 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
                               </MDBox>
                            )
                         }
+                        {
+                           widget.type === "multiStatistics" && (
+                              <MultiStatisticsCard
+                                 color="info"
+                                 title={widget.title}
+                                 data={widget}
+                              />
+                           )
+                        }
                      </Grid>
                   ))
                }

src/qqq/components/QDynamicForm/index.tsx

@@ -51,10 +51,10 @@ function QDynamicForm(props: Props): JSX.Element
 
    const fileChanged = (event: React.FormEvent<HTMLInputElement>, field: any) =>
    {
-      setFileName(null)
+      setFileName(null);
-      if(event.currentTarget.files && event.currentTarget.files[0])
+      if (event.currentTarget.files && event.currentTarget.files[0])
       {
-         setFileName(event.currentTarget.files[0].name)
+         setFileName(event.currentTarget.files[0].name);
       }
 
       formikProps.setFieldValue(field.name, event.currentTarget.files[0]);

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

@@ -37,6 +37,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
       <MDBox
          component="td"
          textAlign={align}
+         verticalAlign="top"
          py={1.5}
          px={3}
          sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({
@@ -48,7 +49,6 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
             display="inline-block"
             width="max-content"
             color="text"
-            sx={{verticalAlign: "middle"}}
          >
             {children}
          </MDBox>

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

@@ -268,7 +268,7 @@ function DataTable({
                {
                   prepareRow(row);
                   return (
-                     <TableRow key={key} {...row.getRowProps()}>
+                     <TableRow sx={{verticalAlign: "top"}} key={key} {...row.getRowProps()}>
                         {row.cells.map((cell: any) => (
                            cell.column.type !== "hidden" && (
                               <DataTableBodyCell

src/qqq/pages/dashboards/Tables/ImageCell.tsx

@@ -20,7 +20,6 @@
  */
 
 // Declaring props types for ProductCell
-import MDAvatar from "qqq/components/Temporary/MDAvatar";
 import MDBox from "qqq/components/Temporary/MDBox";
 import MDTypography from "qqq/components/Temporary/MDTypography";
 
@@ -37,7 +36,7 @@ function ImageCell({imageUrl, label, total, totalType}: Props): JSX.Element
    return (
       <MDBox display="flex" alignItems="center" pr={2}>
          <MDBox mr={2}>
-            <MDAvatar src={imageUrl} alt={label} />
+            <img src={imageUrl} alt={label} />
          </MDBox>
          <MDBox display="flex" flexDirection="column">
             <MDTypography variant="button" fontWeight="medium">

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

@@ -27,9 +27,9 @@ import {ReactNode} from "react";
 import MDBox from "qqq/components/Temporary/MDBox";
 import MDTypography from "qqq/components/Temporary/MDTypography";
 
-//////////////////////////////////////////
+/////////////////////////////////////
 // structure of location card data //
-//////////////////////////////////////////
+/////////////////////////////////////
 export interface LocationCardData
 {
    imageUrl: string;

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

@@ -0,0 +1,123 @@
+/*
+ * 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 Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import Grid from "@mui/material/Grid";
+import Icon from "@mui/material/Icon";
+import React from "react";
+import {NavLink} from "react-router-dom";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
+
+/////////////////////////////////////
+// structure of location card data //
+/////////////////////////////////////
+export interface MultiStatisticsCardData
+{
+   imageUrl: string;
+   title: string;
+   statisticsGroupData: {
+      icon: string;
+      iconColor: string;
+      header: string;
+      subheader: string;
+      statisticList: {
+         label: string;
+         value: number;
+         url?: string;
+      }[]
+
+   }[];
+}
+
+
+/////////////////////////
+// inputs and defaults //
+/////////////////////////
+interface Props
+{
+   title: string;
+   data: MultiStatisticsCardData;
+
+   [key: string]: any;
+}
+
+function MultiStatisticsCard({title, data}: Props): JSX.Element
+{
+   return (
+      <Card>
+         <Grid container>
+            <Grid item xs={12}>
+               <MDBox pt={3} px={3}>
+                  <MDTypography variant="h5" fontWeight="medium">
+                     {title}
+                  </MDTypography>
+               </MDBox>
+            </Grid>
+         </Grid>
+         <Grid container>
+            {
+               data && data.statisticsGroupData && (
+                  data.statisticsGroupData.map((statisticsGroup, i1) =>
+                     <Grid key={`statgroup-${i1}`} item xs={3} lg={3} sx={{textAlign: "center"}}>
+                        <MDBox p={3} pt={3} sx={{alignItems: "center"}}>
+                           {
+                              statisticsGroup.icon && (
+                                 <MDBox>
+                                    <MDTypography variant="h6">
+                                       <Icon sx={{fontSize: "30px", margin: "5px", color: statisticsGroup.iconColor}} fontSize="medium">{statisticsGroup.icon}</Icon>
+                                    </MDTypography>
+                                 </MDBox>
+                              )
+                           }
+                           <MDBox>
+                              <MDTypography variant="h6">
+                                 {statisticsGroup.header}
+                              </MDTypography>
+                              <MDTypography variant="subtitle2">
+                                 {statisticsGroup.subheader}
+                              </MDTypography>
+                           </MDBox>
+                           <Divider sx={{margin: "10px"}}></Divider>
+                           <MDBox sx={{alignItems: "center"}}>
+                              {
+                                 statisticsGroup.statisticList.map((stat, i2) =>
+                                    <MDBox key={`stat-${i1}-${i2}`}>
+                                       <MDTypography variant="subtitle2">
+                                          {stat.label}: <NavLink to={stat.url}>{stat.value.toLocaleString()}</NavLink>
+                                       </MDTypography>
+                                    </MDBox>
+                                 )
+                              }
+                           </MDBox>
+                        </MDBox>
+                     </Grid>
+                  )
+               )
+            }
+         </Grid>
+
+      </Card>
+   );
+}
+
+export default MultiStatisticsCard;

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

@@ -24,6 +24,7 @@ import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
+import parse from "html-react-parser";
 import React, {useEffect, useState} from "react";
 import DataTable, {TableDataInput} from "qqq/components/Temporary/DataTable";
 import MDBox from "qqq/components/Temporary/MDBox";
@@ -36,6 +37,7 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
 interface Props
 {
    title: string;
+   noRowsFoundHTML?: string;
    data: TableDataInput;
    dropdownOptions?: {
       id: string,
@@ -47,7 +49,7 @@ interface Props
    [key: string]: any;
 }
 
-function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}: Props): JSX.Element
+function TableCard({title, noRowsFoundHTML, data, dropdownOptions, dropdownOnChange, widgetIndex}: Props): JSX.Element
 {
    const openArrowIcon = "arrow_drop_down";
    const closeArrowIcon = "arrow_drop_up";
@@ -102,7 +104,6 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
       }
    }, [dropdownOptions]);
 
-
    return (
       <Card>
          <Grid container>
@@ -139,6 +140,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
             </Grid>
          </Grid>
          <MDBox py={1}>
+            {
+               data && data.rows ? (
                   <DataTable
                      table={data}
                      entriesPerPage={false}
@@ -146,6 +149,22 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
                      isSorted={false}
                      noEndBorder
                   />
+               )
+                  :
+                  <MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
+                     <MDTypography
+                        variant="subtitle2"
+                        color="secondary"
+                        fontWeight="regular"
+                     >
+                        {
+                           noRowsFoundHTML ? (
+                              parse(noRowsFoundHTML)
+                           ) : "No rows found"
+                        }
+                     </MDTypography>
+                  </MDBox>
+            }
          </MDBox>
       </Card>
    );