QQQ-38: updated various styles

src/App.tsx

@@ -31,7 +31,6 @@ import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} f
 import {useCookies} from "react-cookie";
 import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
 import {Md5} from "ts-md5/dist/md5";
-import nfLogo from "assets/images/nutrifresh_one_icon_white.png";
 import theme from "assets/theme";
 import themeDark from "assets/theme-dark";
 import MDBox from "components/MDBox";
@@ -45,6 +44,7 @@ import Analytics from "./layouts/dashboards/analytics";
 import Sales from "./layouts/dashboards/sales";
 import Settings from "./layouts/pages/account/settings";
 import ProfileOverview from "./layouts/pages/profile/profile-overview";
+import Logo from "./qqq/images/logo.png";
 import EntityCreate from "./qqq/pages/entity-create";
 import EntityEdit from "./qqq/pages/entity-edit";
 import EntityList from "./qqq/pages/entity-list";
@@ -436,7 +436,7 @@ export default function App()
                <>
                   <Sidenav
                      color={sidenavColor}
-                     brand={nfLogo}
+                     brand={Logo}
                      brandName="Nutrifresh One"
                      routes={sideNavRoutes}
                      onMouseEnter={handleOnMouseEnter}

src/index.tsx

@@ -21,7 +21,7 @@
 
 import {Auth0Provider} from "@auth0/auth0-react";
 import React from "react";
-import ReactDOM from "react-dom";
+import {render} from "react-dom";
 import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom";
 import App from "App";
 import {MaterialUIControllerProvider} from "context";
@@ -62,7 +62,7 @@ function Auth0ProviderWithRedirectCallback({children, ...props})
    }
 }
 
-ReactDOM.render(
+render(
    <BrowserRouter>
       <Auth0ProviderWithRedirectCallback
          domain={domain}

src/qqq/components/Widgets/BarChart.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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 Icon from "@mui/material/Icon";
+import {useMemo, ReactNode} from "react";
+import {Bar} from "react-chartjs-2";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import configs from "qqq/components/Widgets/Configs/BarChartConfig";
+
+// Declaring props types for ReportsBarChart
+interface Props {
+  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
+  title: string;
+  description?: string | ReactNode;
+  date: string;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      data: number[];
+    };
+  };
+  [key: string]: any;
+}
+
+function ReportsBarChart({color, title, description, date, chart}: Props): JSX.Element
+{
+   const {data, options} = configs(chart.labels || [], chart.datasets || {});
+
+   return (
+      <Card sx={{height: "100%"}}>
+         <MDBox padding="1rem">
+            {useMemo(
+               () => (
+                  <MDBox
+                     variant="gradient"
+                     bgColor={color}
+                     borderRadius="lg"
+                     coloredShadow={color}
+                     py={2}
+                     pr={0.5}
+                     mt={-5}
+                     height="12.5rem"
+                  >
+                     <Bar data={data} options={options} />
+                  </MDBox>
+               ),
+               [chart, color]
+            )}
+            <MDBox pt={3} pb={1} px={1}>
+               <MDTypography variant="h6" textTransform="capitalize">
+                  {title}
+               </MDTypography>
+               <MDTypography component="div" variant="button" color="text" fontWeight="light">
+                  {description}
+               </MDTypography>
+               <Divider />
+               <MDBox display="flex" alignItems="center">
+                  <MDTypography variant="button" color="text" lineHeight={1} sx={{mt: 0.15, mr: 0.5}}>
+                     <Icon>schedule</Icon>
+                  </MDTypography>
+                  <MDTypography variant="button" color="text" fontWeight="light">
+                     {date}
+                  </MDTypography>
+               </MDBox>
+            </MDBox>
+         </MDBox>
+      </Card>
+   );
+}
+
+// Setting default values for the props of ReportsBarChart
+ReportsBarChart.defaultProps = {
+   color: "dark",
+   description: "",
+};
+
+export default ReportsBarChart;

src/qqq/components/Widgets/Configs/BarChartConfig.ts

@@ -0,0 +1,104 @@
+/*
+ * 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/>.
+ */
+
+function configs(labels: any, datasets: any) 
+{
+   return {
+      data: {
+         labels,
+         datasets: [
+            {
+               label: datasets.label,
+               tension: 0.4,
+               borderWidth: 0,
+               borderRadius: 4,
+               borderSkipped: false,
+               backgroundColor: "rgba(255, 255, 255, 0.8)",
+               data: datasets.data,
+               maxBarThickness: 6,
+            },
+         ],
+      },
+      options: {
+         responsive: true,
+         maintainAspectRatio: false,
+         plugins: {
+            legend: {
+               display: false,
+            },
+         },
+         interaction: {
+            intersect: false,
+            mode: "index",
+         },
+         scales: {
+            y: {
+               grid: {
+                  drawBorder: false,
+                  display: true,
+                  drawOnChartArea: true,
+                  drawTicks: false,
+                  borderDash: [5, 5],
+                  color: "rgba(255, 255, 255, .2)",
+               },
+               ticks: {
+                  suggestedMin: 0,
+                  suggestedMax: 500,
+                  beginAtZero: true,
+                  padding: 10,
+                  font: {
+                     size: 14,
+                     weight: 300,
+                     family: "Roboto",
+                     style: "normal",
+                     lineHeight: 2,
+                  },
+                  color: "#fff",
+               },
+            },
+            x: {
+               grid: {
+                  drawBorder: false,
+                  display: true,
+                  drawOnChartArea: true,
+                  drawTicks: false,
+                  borderDash: [5, 5],
+                  color: "rgba(255, 255, 255, .2)",
+               },
+               ticks: {
+                  display: true,
+                  color: "#f8f9fa",
+                  padding: 10,
+                  font: {
+                     size: 14,
+                     weight: 300,
+                     family: "Roboto",
+                     style: "normal",
+                     lineHeight: 2,
+                  },
+               },
+            },
+         },
+      },
+   };
+}
+
+export default configs;

src/qqq/components/Widgets/Configs/PieChartConfigs.ts

@@ -0,0 +1,100 @@
+/*
+ * 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 colors from "assets/theme/base/colors";
+
+const {gradients, dark} = colors;
+
+function configs(labels: any, datasets: any) 
+{
+   const backgroundColors = [];
+
+   if (datasets.backgroundColors) 
+   {
+      datasets.backgroundColors.forEach((color: string) =>
+         gradients[color]
+            ? backgroundColors.push(gradients[color].state)
+            : backgroundColors.push(dark.main)
+      );
+   }
+   else 
+   {
+      backgroundColors.push(dark.main);
+   }
+
+   return {
+      data: {
+         labels,
+         datasets: [
+            {
+               label: datasets.label,
+               weight: 9,
+               cutout: 0,
+               tension: 0.9,
+               pointRadius: 2,
+               borderWidth: 2,
+               backgroundColor: backgroundColors,
+               fill: false,
+               data: datasets.data,
+            },
+         ],
+      },
+      options: {
+         responsive: true,
+         maintainAspectRatio: false,
+         plugins: {
+            legend: {
+               display: false,
+            },
+         },
+         interaction: {
+            intersect: false,
+            mode: "index",
+         },
+         scales: {
+            y: {
+               grid: {
+                  drawBorder: false,
+                  display: false,
+                  drawOnChartArea: false,
+                  drawTicks: false,
+               },
+               ticks: {
+                  display: false,
+               },
+            },
+            x: {
+               grid: {
+                  drawBorder: false,
+                  display: false,
+                  drawOnChartArea: false,
+                  drawTicks: false,
+               },
+               ticks: {
+                  display: false,
+               },
+            },
+         },
+      },
+   };
+}
+
+export default configs;

src/qqq/components/Widgets/PieChart.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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 Icon from "@mui/material/Icon";
+import {useMemo, ReactNode} from "react";
+import {Pie} from "react-chartjs-2";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import configs from "qqq/components/Widgets/Configs/PieChartConfigs"
+
+// Declaring props types for PieChart
+interface Props
+{
+   icon?: {
+      color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+      component: ReactNode;
+   };
+   title?: string;
+   description?: string | ReactNode;
+   height?: string | number;
+   chart: {
+      labels: string[];
+      datasets: {
+         label: string;
+         backgroundColors: string[];
+         data: number[];
+      };
+   };
+
+   [key: string]: any;
+}
+
+function PieChart({icon, title, description, height, chart}: Props): JSX.Element
+{
+   const {data, options} = configs(chart.labels || [], chart.datasets || {});
+
+   const renderChart = (
+      <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+         {title || description ? (
+            <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+               {icon.component && (
+                  <MDBox
+                     width="4rem"
+                     height="4rem"
+                     bgColor={icon.color || "info"}
+                     variant="gradient"
+                     coloredShadow={icon.color || "info"}
+                     borderRadius="xl"
+                     display="flex"
+                     justifyContent="center"
+                     alignItems="center"
+                     color="white"
+                     mt={-5}
+                     mr={2}
+                  >
+                     <Icon fontSize="medium">{icon.component}</Icon>
+                  </MDBox>
+               )}
+               <MDBox mt={icon.component ? -2 : 0}>
+                  {title && <MDTypography variant="h6">{title}</MDTypography>}
+                  <MDBox mb={2}>
+                     <MDTypography component="div" variant="button" color="text">
+                        {description}
+                     </MDTypography>
+                  </MDBox>
+               </MDBox>
+            </MDBox>
+         ) : null}
+         {useMemo(
+            () => (
+               <MDBox height={height}>
+                  <Pie data={data} options={options} />
+               </MDBox>
+            ),
+            [chart, height]
+         )}
+      </MDBox>
+   );
+
+   return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+// Declaring default props for PieChart
+PieChart.defaultProps = {
+   icon: {color: "info", component: ""},
+   title: "",
+   description: "",
+   height: "19.125rem",
+};
+
+export default PieChart;

src/qqq/components/Widgets/QuickSightChart.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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 React from "react";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+interface Props
+{
+   label: string;
+   url: string;
+}
+
+interface IframeProps
+{
+   iframe: string;
+}
+
+function Iframe({iframe}: IframeProps)
+{
+   return (<div dangerouslySetInnerHTML={{__html: iframe || ""}} />);
+}
+
+function QuickSightChart({label, url}: Props): JSX.Element
+{
+   const iframe = `<iframe style='border: 0 solid #1A73E8; height: 411px; width: 99%' title=${label} src=${url} />`;
+
+   return (
+      <Card sx={{height: "100%"}}>
+         <MDBox padding="1rem">
+            <MDTypography variant="h5">{label}</MDTypography>
+            <Iframe iframe={iframe} />
+         </MDBox>
+      </Card>
+   );
+}
+
+export default QuickSightChart;

src/qqq/pages/app-home/index.tsx

@@ -34,10 +34,11 @@ import MDBox from "components/MDBox";
 import MDTypography from "components/MDTypography";
 import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard";
 import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
-import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";
 import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
 import BaseLayout from "qqq/components/BaseLayout";
 import ProcessLinkCard from "qqq/components/ProcessLinkCard";
+import BarChart from "qqq/components/Widgets/BarChart";
+import QuickSightChart from "qqq/components/Widgets/QuickSightChart";
 import QClient from "qqq/utils/QClient";
 
 const qController = QClient.getInstance();
@@ -167,6 +168,7 @@ function AppHome({app}: Props): JSX.Element
 
    // eslint-disable-next-line no-nested-ternary
    const tileSizeLg = (widgetCount === 0 ? 3 : widgetCount === 1 ? 4 : 6);
+   let gridIndex = 0;
 
    return (
       <BaseLayout>
@@ -178,11 +180,16 @@ function AppHome({app}: Props): JSX.Element
                         <Grid container spacing={3}>
                            {
                               widgets.map((chart) => (
-                                 <Grid key={`${chart.type}-${chart.title}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
+                                 <Grid key={`${gridIndex++}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
                                     <MDBox mb={3}>
+                                       {
+                                          chart.type === "quickSightChart" && (
+                                             <QuickSightChart url={chart.url} label={chart.label} />
+                                          )
+                                       }
                                        {
                                           chart.type === "barChart" && (
-                                             <ReportsBarChart
+                                             <BarChart
                                                 color="info"
                                                 title={chart.title}
                                                 date={`As of ${new Date().toDateString()}`}

src/qqq/pages/entity-list/index.tsx

@@ -45,10 +45,6 @@ import QClient from "qqq/utils/QClient";
 import QValueUtils from "qqq/utils/QValueUtils";
 import Footer from "../../components/Footer";
 import QProcessUtils from "../../utils/QProcessUtils";
-import {QActionsMenuButton, QCreateNewButton} from "qqq/components/QButtons";
-import QValueUtils from "qqq/utils/QValueUtils";
-import LinearProgress from "@mui/material/LinearProgress";
-import "./styles.css";
 
 const COLUMN_VISIBILITY_LOCAL_STORAGE_KEY_ROOT = "qqq.columnVisibility";
 const COLUMN_SORT_LOCAL_STORAGE_KEY_ROOT = "qqq.columnSort";

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

@@ -19,8 +19,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
 import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
+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";
 import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";

src/qqq/utils/QValueUtils.ts

@@ -22,7 +22,6 @@
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-
 import "datejs";
 
 /*******************************************************************************