diff --git a/public/carrier-logos/axlehire.png b/public/carrier-logos/axlehire.png index 8cf44a1..95035d4 100644 Binary files a/public/carrier-logos/axlehire.png and b/public/carrier-logos/axlehire.png differ diff --git a/public/carrier-logos/cdl.png b/public/carrier-logos/cdl.png index b03c8fb..35d81b1 100644 Binary files a/public/carrier-logos/cdl.png and b/public/carrier-logos/cdl.png differ diff --git a/public/carrier-logos/dhl.png b/public/carrier-logos/dhl.png index c930da4..b79e5ea 100644 Binary files a/public/carrier-logos/dhl.png and b/public/carrier-logos/dhl.png differ diff --git a/public/carrier-logos/fedex.png b/public/carrier-logos/fedex.png index f26a71c..80a062d 100644 Binary files a/public/carrier-logos/fedex.png and b/public/carrier-logos/fedex.png differ diff --git a/public/carrier-logos/lso.png b/public/carrier-logos/lso.png index 304ca8c..4599837 100644 Binary files a/public/carrier-logos/lso.png and b/public/carrier-logos/lso.png differ diff --git a/public/carrier-logos/ontrac.png b/public/carrier-logos/ontrac.png index 498f97b..4a99c73 100644 Binary files a/public/carrier-logos/ontrac.png and b/public/carrier-logos/ontrac.png differ diff --git a/public/carrier-logos/ups.png b/public/carrier-logos/ups.png index 0d8046c..c70a64e 100644 Binary files a/public/carrier-logos/ups.png and b/public/carrier-logos/ups.png differ diff --git a/src/qqq/components/DashboardWidgets.tsx b/src/qqq/components/DashboardWidgets.tsx index 5fe63bf..f266930 100644 --- a/src/qqq/components/DashboardWidgets.tsx +++ b/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 ? ( @@ -112,6 +115,7 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen ) } + { + widget.type === "multiStatistics" && ( + + ) + } )) } diff --git a/src/qqq/components/QDynamicForm/index.tsx b/src/qqq/components/QDynamicForm/index.tsx index 734e502..629a344 100644 --- a/src/qqq/components/QDynamicForm/index.tsx +++ b/src/qqq/components/QDynamicForm/index.tsx @@ -51,10 +51,10 @@ function QDynamicForm(props: Props): JSX.Element const fileChanged = (event: React.FormEvent, field: any) => { - setFileName(null) - if(event.currentTarget.files && event.currentTarget.files[0]) + setFileName(null); + 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]); diff --git a/src/qqq/components/Temporary/DataTable/DataTableBodyCell.tsx b/src/qqq/components/Temporary/DataTable/DataTableBodyCell.tsx index bcb8cbc..386f479 100644 --- a/src/qqq/components/Temporary/DataTable/DataTableBodyCell.tsx +++ b/src/qqq/components/Temporary/DataTable/DataTableBodyCell.tsx @@ -37,6 +37,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element ({ @@ -48,7 +49,6 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element display="inline-block" width="max-content" color="text" - sx={{verticalAlign: "middle"}} > {children} diff --git a/src/qqq/components/Temporary/DataTable/index.tsx b/src/qqq/components/Temporary/DataTable/index.tsx index 3a1d64f..8f9951a 100644 --- a/src/qqq/components/Temporary/DataTable/index.tsx +++ b/src/qqq/components/Temporary/DataTable/index.tsx @@ -268,7 +268,7 @@ function DataTable({ { prepareRow(row); return ( - + {row.cells.map((cell: any) => ( cell.column.type !== "hidden" && ( - + {label} diff --git a/src/qqq/pages/dashboards/Widgets/LocationCard.tsx b/src/qqq/pages/dashboards/Widgets/LocationCard.tsx index 2cbe382..813ae6b 100644 --- a/src/qqq/pages/dashboards/Widgets/LocationCard.tsx +++ b/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; diff --git a/src/qqq/pages/dashboards/Widgets/MultiStatisticsCard.tsx b/src/qqq/pages/dashboards/Widgets/MultiStatisticsCard.tsx new file mode 100644 index 0000000..b52569a --- /dev/null +++ b/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 . + */ + +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 ( + + + + + + {title} + + + + + + { + data && data.statisticsGroupData && ( + data.statisticsGroupData.map((statisticsGroup, i1) => + + + { + statisticsGroup.icon && ( + + + {statisticsGroup.icon} + + + ) + } + + + {statisticsGroup.header} + + + {statisticsGroup.subheader} + + + + + { + statisticsGroup.statisticList.map((stat, i2) => + + + {stat.label}: {stat.value.toLocaleString()} + + + ) + } + + + + ) + ) + } + + + + ); +} + +export default MultiStatisticsCard; diff --git a/src/qqq/pages/dashboards/Widgets/TableCard.tsx b/src/qqq/pages/dashboards/Widgets/TableCard.tsx index 1c3eab4..b336c7b 100644 --- a/src/qqq/pages/dashboards/Widgets/TableCard.tsx +++ b/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 ( @@ -139,13 +140,31 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex} - + { + data && data.rows ? ( + + ) + : + + + { + noRowsFoundHTML ? ( + parse(noRowsFoundHTML) + ) : "No rows found" + } + + + } );