diff --git a/public/apple-icon.png b/public/apple-icon.png index 59c68b9..d594bc6 100644 Binary files a/public/apple-icon.png and b/public/apple-icon.png differ diff --git a/public/favicon.png b/public/favicon.png index 59c68b9..d594bc6 100644 Binary files a/public/favicon.png and b/public/favicon.png differ diff --git a/src/App.tsx b/src/App.tsx index 169e7e5..b4a564f 100644 --- a/src/App.tsx +++ b/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() <> . + */ + +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 ( + + + {useMemo( + () => ( + + + + ), + [chart, color] + )} + + + {title} + + + {description} + + + + + schedule + + + {date} + + + + + + ); +} + +// Setting default values for the props of ReportsBarChart +ReportsBarChart.defaultProps = { + color: "dark", + description: "", +}; + +export default ReportsBarChart; diff --git a/src/qqq/components/Widgets/Configs/BarChartConfig.ts b/src/qqq/components/Widgets/Configs/BarChartConfig.ts new file mode 100644 index 0000000..6478675 --- /dev/null +++ b/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 . + */ + +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; diff --git a/src/qqq/components/Widgets/Configs/PieChartConfigs.ts b/src/qqq/components/Widgets/Configs/PieChartConfigs.ts new file mode 100644 index 0000000..eed60ec --- /dev/null +++ b/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 . + */ + +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; diff --git a/src/qqq/components/Widgets/PieChart.tsx b/src/qqq/components/Widgets/PieChart.tsx new file mode 100644 index 0000000..f7d55cd --- /dev/null +++ b/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 . + */ + +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 = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Declaring default props for PieChart +PieChart.defaultProps = { + icon: {color: "info", component: ""}, + title: "", + description: "", + height: "19.125rem", +}; + +export default PieChart; diff --git a/src/qqq/components/Widgets/QuickSightChart.tsx b/src/qqq/components/Widgets/QuickSightChart.tsx new file mode 100644 index 0000000..845e356 --- /dev/null +++ b/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 . + */ + +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 (
); +} + +function QuickSightChart({label, url}: Props): JSX.Element +{ + const iframe = `