QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/QQQ-38-app-home-widgets' into feature/sprint-10

Browse Source
This commit is contained in:
darin.kelkhoff
2022-08-31 16:09:34 -05:00
parent 3eb1cd73a7 b8cc274af4
commit 3e3951cf8b
38 changed files with 1021 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/App.tsx
View File

@ -1,56 +1,56 @@
import React, {
JSXElementConstructor, Key, ReactElement, useEffect, useState,
} from "react";
// react-router components
import {
Navigate, Route, Routes, useLocation,
} from "react-router-dom";
/*
* 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 {useAuth0} from "@auth0/auth0-react";
// @mui material components
import {LicenseInfo} from "@mui/x-license-pro";
import {ThemeProvider} from "@mui/material/styles";
import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
import {QAppTreeNode} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppTreeNode";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import CssBaseline from "@mui/material/CssBaseline";
import Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
// Material Dashboard 2 PRO React TS exampless
import Sidenav from "examples/Sidenav";
import Configurator from "examples/Configurator";
// Material Dashboard 2 PRO React TS themes
import theme from "assets/theme";
// Material Dashboard 2 PRO React TS Dark Mode themes
import themeDark from "assets/theme-dark";
// Material Dashboard 2 PRO React TS contexts
import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context";
// Images
import nfLogo from "assets/images/nutrifresh_one_icon_white.png";
import {Md5} from "ts-md5/dist/md5";
import {ThemeProvider} from "@mui/material/styles";
import {LicenseInfo} from "@mui/x-license-pro";
import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
import {useCookies} from "react-cookie";
import EntityCreate from "./qqq/pages/entity-create";
import EntityList from "./qqq/pages/entity-list";
import EntityView from "./qqq/pages/entity-view";
import EntityEdit from "./qqq/pages/entity-edit";
import ProcessRun from "./qqq/pages/process-run";
import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
import {Md5} from "ts-md5/dist/md5";
import theme from "assets/theme";
import themeDark from "assets/theme-dark";
import MDBox from "components/MDBox";
import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context";
import Configurator from "examples/Configurator";
import Sidenav from "examples/Sidenav";
import AppHome from "qqq/pages/app-home";
import QProcessUtils from "qqq/utils/QProcessUtils";
import MDAvatar from "./components/MDAvatar";
import ProfileOverview from "./layouts/pages/profile/profile-overview";
import Settings from "./layouts/pages/account/settings";
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";
import EntityView from "./qqq/pages/entity-view";
import ProcessRun from "./qqq/pages/process-run";
import QClient from "./qqq/utils/QClient";
import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import QProcessUtils from "qqq/utils/QProcessUtils";
import {QAppTreeNode} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppTreeNode";
///////////////////////////////////////////////////////////////////////////////////////////////
// define the parts of the nav that are static - before the qqq tables etc get dynamic added //
@ -436,7 +436,7 @@ export default function App()
<>
<Sidenav
color={sidenavColor}
brand={nfLogo}
brand={Logo}
brandName="Nutrifresh One"
routes={sideNavRoutes}
onMouseEnter={handleOnMouseEnter}

23
src/HandleAuthorizationError.tsx
View File

@ -1,6 +1,27 @@
/*
* 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 React, {useEffect} from "react";
import {SESSION_ID_COOKIE_NAME} from "App";
import {useCookies} from "react-cookie";
import {SESSION_ID_COOKIE_NAME} from "App";
interface Props
{

BIN
src/assets/images/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

37
src/index.tsx
View File

@ -1,16 +1,35 @@
import ReactDOM from "react-dom";
import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom";
import {Auth0Provider} from "@auth0/auth0-react";
import App from "App";
/*
* 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/>.
*/
// Material Dashboard 2 PRO React TS Context Provider
import {Auth0Provider} from "@auth0/auth0-react";
import React from "react";
import {render} from "react-dom";
import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom";
import App from "App";
import {MaterialUIControllerProvider} from "context";
import "./qqq/styles/qqq-override-styles.css";
import ProtectedRoute from "qqq/auth0/protected-route";
import React from "react";
import HandleAuthorizationError from "HandleAuthorizationError";
import ProtectedRoute from "qqq/auth0/protected-route";
// Auth0 params from env
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
@ -43,7 +62,7 @@ function Auth0ProviderWithRedirectCallback({children, ...props})
}
}
ReactDOM.render(
render(
<BrowserRouter>
<Auth0ProviderWithRedirectCallback
domain={domain}

6
src/qqq/components/BaseLayout/index.tsx
View File

@ -20,14 +20,10 @@
*/
import {useState, useEffect, ReactNode} from "react";
// Material Dashboard 2 PRO React TS Base Styles
import breakpoints from "assets/theme/base/breakpoints";
// Material Dashboard 2 PRO React TS examples components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import Navbar from "qqq/components/Navbar";
import Footer from "qqq/components/Footer";
import Navbar from "qqq/components/Navbar";
import MDBox from "../../../components/MDBox";
// Declaring props types for BaseLayout

2
src/qqq/components/Buttons/AuthenticationButton/index.tsx
View File

@ -20,8 +20,8 @@
*/
import {useAuth0} from "@auth0/auth0-react";
import React from "react";
import {Button} from "@mui/material";
import React from "react";
function AuthenticationButton()
{

58
src/qqq/components/EntityForm/index.tsx
View File

@ -1,36 +1,46 @@
// react components
import {useParams, useNavigate, useLocation} from "react-router-dom";
import React, {useReducer, useState} from "react";
/*
* 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/>.
*/
// misc components
import * as Yup from "yup";
import {
Form, Formik, useFormik, useFormikContext,
} from "formik";
// qqq components
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import QDynamicForm from "qqq/components/QDynamicForm";
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
// @material-ui core components
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {Alert} from "@mui/material";
import Avatar from "@mui/material/Avatar";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import {Alert} from "@mui/material";
// Material Dashboard 2 PRO React TS components
import Icon from "@mui/material/Icon";
import {Form, Formik} from "formik";
import React, {useReducer, useState} from "react";
import {useParams, useNavigate, useLocation} from "react-router-dom";
import * as Yup from "yup";
import colors from "assets/theme/base/colors";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import QClient from "qqq/utils/QClient";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QCancelButton, QSaveButton} from "qqq/components/QButtons";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import Avatar from "@mui/material/Avatar";
import Icon from "@mui/material/Icon";
import QDynamicForm from "qqq/components/QDynamicForm";
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import QRecordSidebar from "qqq/components/QRecordSidebar";
import QClient from "qqq/utils/QClient";
import QTableUtils from "qqq/utils/QTableUtils";
import colors from "assets/theme/base/colors";
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
interface Props
{

33
src/qqq/components/Footer/index.tsx
View File

@ -19,28 +19,25 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// @mui material components
import Link from "@mui/material/Link";
import Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import typography from "assets/theme/base/typography";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
// Material Dashboard 2 PRO React TS Base Styles
import typography from "assets/theme/base/typography";
// Declaring props types for Footer
interface Props {
company?: {
href: string;
name: string;
};
links?: {
href: string;
name: string;
}[];
[key: string]: any;
interface Props
{
company?: {
href: string;
name: string;
};
links?: {
href: string;
name: string;
}[];
[key: string]: any;
}
function Footer({company, links}: Props): JSX.Element
@ -85,9 +82,9 @@ function Footer({company, links}: Props): JSX.Element
,
<Link href={href} target="_blank">
<MDTypography variant="button" fontWeight="medium">
&nbsp;
&nbsp;
{name}
&nbsp;
&nbsp;
</MDTypography>
</Link>
</MDBox>

40
src/qqq/components/Navbar/index.tsx
View File

@ -19,45 +19,19 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {useState, useEffect} from "react";
// react-router components
import {useLocation} from "react-router-dom";
// @material-ui core components
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton";
import Menu from "@mui/material/Menu";
import Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import Toolbar from "@mui/material/Toolbar";
import {useState, useEffect} from "react";
import {useLocation} from "react-router-dom";
import MDBadge from "components/MDBadge";
import MDBox from "components/MDBox";
import MDInput from "components/MDInput";
import MDBadge from "components/MDBadge";
// Material Dashboard 2 PRO React TS examples components
import {useMaterialUIController, setTransparentNavbar, setMiniSidenav, setOpenConfigurator,} from "context";
import NotificationItem from "examples/Items/NotificationItem";
// Custom styles for Navbar
import {
navbar,
navbarContainer,
navbarRow,
navbarIconButton,
navbarDesktopMenu,
navbarMobileMenu,
} from "qqq/components/Navbar/styles";
// Material Dashboard 2 PRO React context
import {
useMaterialUIController,
setTransparentNavbar,
setMiniSidenav,
setOpenConfigurator,
} from "context";
// qqq
import {navbar, navbarContainer, navbarRow, navbarIconButton, navbarDesktopMenu, navbarMobileMenu,} from "qqq/components/Navbar/styles";
import QBreadcrumbs, {routeToLabel} from "qqq/components/QBreadcrumbs";
// Declaring prop types for Navbar

1
src/qqq/components/Navbar/styles.ts
View File

@ -19,7 +19,6 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// @mui material components
import {Theme} from "@mui/material/styles";
function navbar(theme: Theme | any, ownerState: any)

5
src/qqq/components/ProcessLinkCard/index.tsx
View File

@ -18,14 +18,11 @@
* 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 {ReactNode} from "react";
// @mui material components
import Card from "@mui/material/Card";
import Divider from "@mui/material/Divider";
import Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import {ReactNode} from "react";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";

5
src/qqq/components/QBreadcrumbs/index.tsx
View File

@ -19,11 +19,10 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {ReactNode} from "react";
import {Link} from "react-router-dom";
import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material";
import Icon from "@mui/material/Icon";
import {ReactNode} from "react";
import {Link} from "react-router-dom";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";

7
src/qqq/components/QButtons/index.tsx
View File

@ -19,12 +19,11 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import MDBox from "components/MDBox";
import {Link} from "react-router-dom";
import MDButton from "components/MDButton";
import Icon from "@mui/material/Icon";
import React from "react";
import EntityForm from "qqq/components/EntityForm";
import {Link} from "react-router-dom";
import MDBox from "components/MDBox";
import MDButton from "components/MDButton";
// eslint-disable import/prefer-default-export

115
src/qqq/components/QDynamicForm/index.tsx
View File

@ -19,23 +19,19 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// @mui material components
import Grid from "@mui/material/Grid";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
// NewUser page components
import {useFormikContext} from "formik";
import React from "react";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import QDynamicFormField from "qqq/components/QDynamicFormField";
interface Props {
formLabel?: string;
formData: any;
bulkEditMode?: boolean;
bulkEditSwitchChangeHandler?: any
interface Props
{
formLabel?: string;
formData: any;
bulkEditMode?: boolean;
bulkEditSwitchChangeHandler?: any;
}
function QDynamicForm(props: Props): JSX.Element
@ -72,55 +68,55 @@ function QDynamicForm(props: Props): JSX.Element
<MDBox mt={1.625}>
<Grid container spacing={3}>
{formFields
&& Object.keys(formFields).length > 0
&& Object.keys(formFields).map((fieldName: any) =>
{
const field = formFields[fieldName];
if (values[fieldName] === undefined)
{
values[fieldName] = "";
}
&& Object.keys(formFields).length > 0
&& Object.keys(formFields).map((fieldName: any) =>
{
const field = formFields[fieldName];
if (values[fieldName] === undefined)
{
values[fieldName] = "";
}
if (field.type === "file")
{
return (
<Grid item xs={12} sm={6} key={fieldName}>
<MDBox mb={1.5}>
<input
id={fieldName}
if (field.type === "file")
{
return (
<Grid item xs={12} sm={6} key={fieldName}>
<MDBox mb={1.5}>
<input
id={fieldName}
name={fieldName}
type="file"
onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
/>
<MDBox mt={0.75}>
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
{errors[fieldName] && <span>You must select a file to proceed</span>}
</MDTypography>
</MDBox>
</MDBox>
</Grid>
);
}
// todo? inputProps={{ autoComplete: "" }}
// todo? placeholder={password.placeholder}
return (
<Grid item xs={12} sm={6} key={fieldName}>
<QDynamicFormField
type={field.type}
label={field.label}
isEditable={field.isEditable}
name={fieldName}
type="file"
onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
displayFormat={field.displayFormat}
value={values[fieldName]}
error={errors[fieldName] && touched[fieldName]}
bulkEditMode={bulkEditMode}
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
/>
<MDBox mt={0.75}>
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
{errors[fieldName] && <span>You must select a file to proceed</span>}
</MDTypography>
</MDBox>
</MDBox>
</Grid>
);
}
// todo? inputProps={{ autoComplete: "" }}
// todo? placeholder={password.placeholder}
return (
<Grid item xs={12} sm={6} key={fieldName}>
<QDynamicFormField
type={field.type}
label={field.label}
isEditable={field.isEditable}
name={fieldName}
displayFormat={field.displayFormat}
value={values[fieldName]}
error={errors[fieldName] && touched[fieldName]}
bulkEditMode={bulkEditMode}
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
/>
</Grid>
);
})}
</Grid>
);
})}
</Grid>
</MDBox>
</MDBox>
@ -131,7 +127,8 @@ QDynamicForm.defaultProps = {
formLabel: undefined,
bulkEditMode: false,
bulkEditSwitchChangeHandler: () =>
{},
{
},
};
export default QDynamicForm;

5
src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts
View File

@ -19,12 +19,9 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// misc imports
import * as Yup from "yup";
// qqq imports
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import * as Yup from "yup";
/*******************************************************************************
** Meta-data to represent a single field in a table.

15
src/qqq/components/QDynamicFormField/index.tsx
View File

@ -19,17 +19,14 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// formik components
import {ErrorMessage, Field} from "formik";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDInput from "components/MDInput";
import React, {useState} from "react";
import {InputAdornment} from "@mui/material";
import Grid from "@mui/material/Grid";
import Switch from "@mui/material/Switch";
import {InputAdornment} from "@mui/material";
import {ErrorMessage, Field} from "formik";
import React, {useState} from "react";
import MDBox from "components/MDBox";
import MDInput from "components/MDInput";
import MDTypography from "components/MDTypography";
// Declaring props types for FormField
interface Props

11
src/qqq/components/QRecordSidebar/index.tsx
View File

@ -19,16 +19,15 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import React, {ReactNode} from "react";
import {Link} from "react-router-dom";
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material";
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import {Theme} from "@mui/material/styles";
import React, {ReactNode} from "react";
import {Link} from "react-router-dom";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import Card from "@mui/material/Card";
import {Theme} from "@mui/material/styles";
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
interface Props {
tableSections: QSection[];

99
src/qqq/components/Widgets/BarChart.tsx Normal file
View File

@ -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;

104
src/qqq/components/Widgets/Configs/BarChartConfig.ts Normal file
View File

@ -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;

100
src/qqq/components/Widgets/Configs/PieChartConfigs.ts Normal file
View File

@ -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;

110
src/qqq/components/Widgets/PieChart.tsx Normal file
View File

@ -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;

57
src/qqq/components/Widgets/QuickSightChart.tsx Normal file
View File

@ -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;

BIN
src/qqq/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

365
src/qqq/pages/app-home/index.tsx
View File

@ -19,30 +19,27 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData";
import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {Icon} from "@mui/material";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import React, {useEffect, useState} from "react";
import {Link, useLocation} from "react-router-dom";
// Material Dashboard 2 PRO React TS examples components
import QClient from "qqq/utils/QClient";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData";
import BaseLayout from "qqq/components/BaseLayout";
import MDBox from "components/MDBox";
import Grid from "@mui/material/Grid";
import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
import {Icon} from "@mui/material";
import MDTypography from "components/MDTypography";
import Card from "@mui/material/Card";
import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard";
import ReportsLineChart from "examples/Charts/LineCharts/ReportsLineChart";
import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
import MDBadgeDot from "components/MDBadgeDot";
import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
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 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();
@ -57,6 +54,9 @@ function AppHome({app}: Props): JSX.Element
const [tables, setTables] = useState([] as QTableMetaData[]);
const [processes, setProcesses] = useState([] as QProcessMetaData[]);
const [childApps, setChildApps] = useState([] as QAppMetaData[]);
const [tableCounts, setTableCounts] = useState(new Map<string, { isLoading: boolean, value: number }>());
const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date());
const [widgets, setWidgets] = useState([] as any[]);
const location = useLocation();
@ -102,154 +102,213 @@ function AppHome({app}: Props): JSX.Element
setTables(newTables);
setProcesses(newProcesses);
setChildApps(newChildApps);
const tableCounts = new Map<string, { isLoading: boolean, value: number }>();
newTables.forEach((table) =>
{
tableCounts.set(table.name, {isLoading: true, value: null});
setTimeout(async () =>
{
const count = await qController.count(table.name);
tableCounts.set(table.name, {isLoading: false, value: count});
setTableCounts(tableCounts);
setUpdatedTableCounts(new Date());
}, 1);
});
setTableCounts(tableCounts);
console.log(app.widgets);
if (app.widgets)
{
const widgets: any[] = [];
for (let i = 0; i < app.widgets.length; i++)
{
widgets[i] = {};
setTimeout(async () =>
{
const widget = await qController.widget(app.widgets[i]);
widgets[i] = widget;
setUpdatedTableCounts(new Date());
}, 1);
}
setWidgets(widgets);
}
}, [qInstance, location]);
const reportsBarChartData = {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: {label: "Sales", data: [50, 20, 10, 22, 50, 10, 40]},
};
interface Types {
labels: string[];
datasets: {
label: string;
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
data: number[];
}[];
}
const demoLineChartData: Types = {
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
label: "Facebook Ads",
color: "info",
data: [50, 100, 200, 190, 400, 350, 500, 450, 700],
/*
const charts = [
{
type: "barChart",
title: "Parcel Invoice Lines per Month",
barChartData: {
labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"],
datasets: {label: "Parcel Invoice Lines", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]},
},
{
label: "Google Ads",
color: "dark",
data: [10, 30, 40, 120, 150, 220, 280, 250, 280],
},
{
type: "lineChart",
title: "Total Charges by Carrier per Month",
lineChartData: {
labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"],
datasets: [
{label: "UPS", color: "info", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]},
{label: "FedEx", color: "dark", data: [5000, 22000, 31111, 32333, 20404, 19876, 24355]},
{label: "LSO", color: "error", data: [500, 2200, 1111, 2333, 404, 17876, 2355]},
],
},
],
};
},
];
*/
console.log(`Widgets: ${widgets} and tables: ${tables}`);
const haveWidgets = widgets && widgets.length;
const widgetCount = widgets ? widgets.length : 0;
// eslint-disable-next-line no-nested-ternary
const tileSizeLg = (widgetCount === 0 ? 3 : widgetCount === 1 ? 4 : 6);
let gridIndex = 0;
return (
<BaseLayout>
<MDBox mt={4}>
<Grid container spacing={3}>
<Grid item xs={6} lg={6}>
<Grid container spacing={3}>
<Grid item xs={6} lg={6}>
<MDBox mb={3}>
<MDBox mb={3}>
<ReportsBarChart
color="info"
title="Packages Shipped"
description="Total outbound shipments"
date="Updated at 7:04 a.m. ET"
chart={reportsBarChartData}
/>
</MDBox>
</MDBox>
</Grid>
<Grid item xs={6} lg={6}>
<DefaultLineChart
title="Revenue"
description={(
<MDBox display="flex" justifyContent="space-between">
<MDBox display="flex" ml={-1}>
<MDBadgeDot color="info" size="sm" badgeContent="UPS" />
<MDBadgeDot color="dark" size="sm" badgeContent="FedEx" />
</MDBox>
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
</MDBox>
)}
chart={demoLineChartData}
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={6} lg={6}>
{
tables.length ? (
<MDBox mb={3}>
<Card id="basic-info" sx={{overflow: "visible"}}>
<MDBox p={3}>
<MDTypography variant="h5">Tables</MDTypography>
</MDBox>
<Grid container spacing={3} padding={3} paddingTop={0}>
{tables.map((table) => (
<Grid key={table.name} item xs={12} md={12} lg={6}>
<Link to={table.name}>
<MDBox mb={3}>
<MiniStatisticsCard
title={{fontWeight: "bold", text: table.label}}
count="17,013"
percentage={{color: "info", text: "total records"}}
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
direction="right"
{
widgetCount > 0 ? (
<Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
<Grid container spacing={3}>
{
widgets.map((chart) => (
<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" && (
<BarChart
color="info"
title={chart.title}
date={`As of ${new Date().toDateString()}`}
chart={chart.barChartData}
/>
</MDBox>
</Link>
</Grid>
))}
</Grid>
</Card>
</MDBox>
) : null
}
)
}
{
chart.type === "lineChart" && (
<DefaultLineChart
title={chart.title}
description={(
<MDBox display="flex" justifyContent="space-between">
<MDBox display="flex" ml={-1}>
{
chart.lineChartData.datasets.map((dataSet: any) => (
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
))
}
</MDBox>
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
</MDBox>
)}
chart={chart.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
/>
)
}
</MDBox>
</Grid>
))
}
</Grid>
</Grid>
) : null
}
{
processes.length ? (
<MDBox mb={3}>
<Card id="basic-info" sx={{overflow: "visible"}}>
<MDBox p={3}>
<MDTypography variant="h5">Processes</MDTypography>
{
tables.length > 0 || processes.length > 0 || childApps.length > 0 ? (
// eslint-disable-next-line no-nested-ternary
<Grid item xs={12} lg={widgetCount === 0 ? 12 : widgetCount === 1 ? 9 : 6}>
{
tables.length ? (
<MDBox mb={3}>
<Card id="basic-info" sx={{overflow: "visible"}}>
<MDBox p={3}>
<MDTypography variant="h5">Tables</MDTypography>
</MDBox>
<Grid container spacing={3} padding={3} paddingTop={0}>
{tables.map((table) => (
<Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}>
<Link to={table.name}>
<MDBox mb={3}>
<MiniStatisticsCard
title={{fontWeight: "bold", text: table.label}}
count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : tableCounts.get(table.name).value.toLocaleString()}
percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : "total records")}}
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
direction="right"
/>
</MDBox>
</Link>
</Grid>
))}
</Grid>
</Card>
</MDBox>
<Grid container spacing={3} padding={3} paddingTop={3}>
{processes.map((process) => (
<Grid key={process.name} item xs={12} md={12} lg={6}>
<Link to={process.name}>
<ProcessLinkCard
icon={process.iconName || app.iconName}
title={process.label}
/>
</Link>
</Grid>
))}
</Grid>
</Card>
</MDBox>
) : null
}
) : null
}
{
childApps.length ? (
<MDBox mb={3}>
<Card id="basic-info" sx={{overflow: "visible"}}>
<Grid container spacing={3} padding={3} paddingTop={3}>
{childApps.map((childApp) => (
<Grid key={childApp.name} item xs={12} md={12} lg={6}>
<Link to={childApp.name}>
<DefaultInfoCard
icon={childApp.iconName || app.iconName}
title={childApp.label}
/>
</Link>
{
processes.length ? (
<MDBox mb={3}>
<Card id="basic-info" sx={{overflow: "visible"}}>
<MDBox p={3}>
<MDTypography variant="h5">Processes</MDTypography>
</MDBox>
<Grid container spacing={3} padding={3} paddingTop={3}>
{processes.map((process) => (
<Grid key={process.name} item xs={12} md={12} lg={tileSizeLg}>
<Link to={process.name}>
<ProcessLinkCard
icon={process.iconName || app.iconName}
title={process.label}
/>
</Link>
</Grid>
))}
</Grid>
))}
</Grid>
</Card>
</MDBox>
) : null
}
</Grid>
</Card>
</MDBox>
) : null
}
{
childApps.length ? (
<MDBox mb={3}>
<Card id="basic-info" sx={{overflow: "visible"}}>
<MDBox p={3}>
<MDTypography variant="h5">Apps</MDTypography>
</MDBox>
<Grid container spacing={3} padding={3} paddingTop={3}>
{childApps.map((childApp) => (
<Grid key={childApp.name} item xs={12} md={12} lg={tileSizeLg}>
<Link to={childApp.name}>
<DefaultInfoCard
icon={childApp.iconName || app.iconName}
title={childApp.label}
/>
</Link>
</Grid>
))}
</Grid>
</Card>
</MDBox>
) : null
}
</Grid>
) : null
}
</Grid>
</MDBox>

13
src/qqq/pages/entity-create/index.tsx
View File

@ -19,16 +19,11 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// @mui material components
import Grid from "@mui/material/Grid";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
// Settings page components
import EntityForm from "qqq/components/EntityForm";
import BaseLayout from "qqq/components/BaseLayout";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import Grid from "@mui/material/Grid";
import MDBox from "components/MDBox";
import BaseLayout from "qqq/components/BaseLayout";
import EntityForm from "qqq/components/EntityForm";
interface Props
{

16
src/qqq/pages/entity-edit/index.tsx
View File

@ -19,18 +19,12 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// @mui material components
import Grid from "@mui/material/Grid";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
// Settings page components
import BaseLayout from "qqq/components/BaseLayout";
import {useParams} from "react-router-dom";
import EntityForm from "qqq/components/EntityForm";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import EntityList from "qqq/pages/entity-list";
import Grid from "@mui/material/Grid";
import {useParams} from "react-router-dom";
import MDBox from "components/MDBox";
import BaseLayout from "qqq/components/BaseLayout";
import EntityForm from "qqq/components/EntityForm";
interface Props
{

50
src/qqq/pages/entity-list/index.tsx
View File

@ -19,26 +19,25 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import React, {
useCallback, useEffect, useReducer, useRef, useState,
} from "react";
import {
Link, useNavigate, useParams, useSearchParams,
} from "react-router-dom";
// @mui material components
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
import {Alert, TablePagination} from "@mui/material";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import LinearProgress from "@mui/material/LinearProgress";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import {Alert, TablePagination} from "@mui/material";
import {
DataGridPro,
GridCallbackDetails,
GridColDef,
GridColumnOrderChangeParams,
GridColumnVisibilityModel,
GridExportMenuItemProps,
GridFilterModel,
GridRowId,
GridRowParams,
@ -51,33 +50,22 @@ import {
GridToolbarDensitySelector,
GridToolbarExportContainer,
GridToolbarFilterButton,
MuiEvent,
GridExportMenuItemProps,
MuiEvent
} from "@mui/x-data-grid-pro";
// Material Dashboard 2 PRO React TS components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import MDBox from "components/MDBox";
import React, {useCallback, useEffect, useReducer, useRef, useState} from "react";
import {Link, useNavigate, useParams, useSearchParams} from "react-router-dom";
import MDAlert from "components/MDAlert";
// QQQ
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import QClient from "qqq/utils/QClient";
import MDBox from "components/MDBox";
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import Navbar from "qqq/components/Navbar";
import Button from "@mui/material/Button";
import {QActionsMenuButton, QCreateNewButton} from "qqq/components/QButtons";
import QClient from "qqq/utils/QClient";
import QFilterUtils from "qqq/utils/QFilterUtils";
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 QFilterUtils from "qqq/utils/QFilterUtils";
const COLUMN_VISIBILITY_LOCAL_STORAGE_KEY_ROOT = "qqq.columnVisibility";
const COLUMN_SORT_LOCAL_STORAGE_KEY_ROOT = "qqq.columnSort";
const FILTER_LOCAL_STORAGE_KEY_ROOT = "qqq.filter";

49
src/qqq/pages/entity-view/components/ViewContents/index.tsx
View File

@ -19,41 +19,34 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// react components
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
import React, {useReducer, useState} from "react";
// @material-ui core components
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
// qqq imports
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import DialogTitle from "@mui/material/DialogTitle";
import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import MDAlert from "components/MDAlert";
import QProcessUtils from "../../../../utils/QProcessUtils";
import QClient from "qqq/utils/QClient";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons";
import QValueUtils from "qqq/utils/QValueUtils";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import Icon from "@mui/material/Icon";
import Avatar from "@mui/material/Avatar";
import QRecordSidebar from "qqq/components/QRecordSidebar";
import QTableUtils from "qqq/utils/QTableUtils";
import React, {useReducer, useState} from "react";
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
import colors from "assets/theme/base/colors";
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
import MDAlert from "components/MDAlert";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons";
import QRecordSidebar from "qqq/components/QRecordSidebar";
import QClient from "qqq/utils/QClient";
import QTableUtils from "qqq/utils/QTableUtils";
import QValueUtils from "qqq/utils/QValueUtils";
import QProcessUtils from "../../../../utils/QProcessUtils";
const qController = QClient.getInstance();

11
src/qqq/pages/entity-view/index.tsx
View File

@ -19,19 +19,12 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {useParams} from "react-router-dom";
// @mui material components
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import Grid from "@mui/material/Grid";
// Material Dashboard 2 PRO React TS components
import {useParams} from "react-router-dom";
import MDBox from "components/MDBox";
// Settings page components
import BaseLayout from "qqq/components/BaseLayout";
import ViewContents from "./components/ViewContents";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import EntityList from "qqq/pages/entity-list";
interface Props
{

53
src/qqq/pages/process-run/index.tsx
View File

@ -19,48 +19,41 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import * as Yup from "yup";
import {
Button, CircularProgress, Icon, TablePagination,
} from "@mui/material";
import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
// formik components
import {Form, Formik} from "formik";
import React, {Fragment, useEffect, useState} from "react";
import {useLocation, useNavigate, useParams} from "react-router-dom";
import BaseLayout from "qqq/components/BaseLayout";
import Card from "@mui/material/Card";
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import FormData from "form-data";
import Grid from "@mui/material/Grid";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDButton from "components/MDButton";
import MDProgress from "components/MDProgress";
import MDTypography from "../../../components/MDTypography";
import QClient from "qqq/utils/QClient";
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
import QDynamicForm from "../../components/QDynamicForm";
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";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {Button, Icon, CircularProgress, TablePagination} from "@mui/material";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Stepper from "@mui/material/Stepper";
import QValidationReview from "qqq/pages/process-run/components/QValidationReview";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import QProcessSummaryResults from "./components/QProcessSummaryResults";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
import FormData from "form-data";
import {Form, Formik} from "formik";
import React, {Fragment, useEffect, useState} from "react";
import {useLocation, useNavigate, useParams} from "react-router-dom";
import * as Yup from "yup";
import MDBox from "components/MDBox";
import MDButton from "components/MDButton";
import MDProgress from "components/MDProgress";
import BaseLayout from "qqq/components/BaseLayout";
import {QCancelButton, QSubmitButton} from "qqq/components/QButtons";
import {formatDate} from "@fullcalendar/react";
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import QValidationReview from "qqq/pages/process-run/components/QValidationReview";
import QClient from "qqq/utils/QClient";
import MDTypography from "../../../components/MDTypography";
import QDynamicForm from "../../components/QDynamicForm";
import QProcessSummaryResults from "./components/QProcessSummaryResults";
interface Props
{

2
src/qqq/utils/QClient.ts
View File

@ -19,9 +19,9 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {useAuth0} from "@auth0/auth0-react";
import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
import {useAuth0} from "@auth0/auth0-react";
/*******************************************************************************
** client wrapper of qqq backend

2
src/qqq/utils/QProcessUtils.ts
View File

@ -19,8 +19,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
/*******************************************************************************
** Utility class for working with QQQ Processes

2
src/qqq/utils/QTableUtils.ts
View File

@ -19,8 +19,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
/*******************************************************************************
** Utility class for working with QQQ Tables

3
src/qqq/utils/QValueUtils.ts
View File

@ -20,9 +20,8 @@
*/
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import "datejs";
/*******************************************************************************