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

PRDONE-94: updated dashboards, new styles everywhere, moved 90% of codes we are using under qqq directory

Browse Source
This commit is contained in:
Tim Chamberlain
2022-09-01 16:19:03 -05:00
parent b8cc274af4
commit 7b3dca9843
170 changed files with 11114 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/qqq/pages/dashboards/CarrierPerformance.tsx Normal file
View File

@ -0,0 +1,210 @@
/*
* 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 Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Tooltip from "@mui/material/Tooltip";
import {useState} from "react";
import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DataTable from "examples/Tables/DataTable";
import Footer from "qqq/components/Footer";
import Navbar from "qqq/components/Navbar";
import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
import MDBox from "qqq/components/Temporary/MDBox";
import MDButton from "qqq/components/Temporary/MDButton";
import MDTypography from "qqq/components/Temporary/MDTypography";
import ShipmentsByWarehouseTable from "qqq/pages/dashboards/Tables/ShipmentsByWarehouseTable";
import carrierSpendData from "qqq/pages/dashboards/Widgets/Data/CarrierSpendData";
import carrierVolumeLineChartData from "qqq/pages/dashboards/Widgets/Data/CarrierVolumeLineChartData";
import smallShipmentsByWarehouseData from "qqq/pages/dashboards/Widgets/Data/SmallShipmentsByWarehouseData";
import timeInTransitBarChartData from "qqq/pages/dashboards/Widgets/Data/timeInTransitBarChartData";
import ShipmentsByCarrierPieChart from "qqq/pages/dashboards/Widgets/ShipmentsByChannelPieChart";
import SimpleStatisticsCard from "qqq/pages/dashboards/Widgets/SimpleStatisticsCard";
import HorizontalBarChart from "./Widgets/HorizontalBarChart";
function CarrierPerformance(): JSX.Element
{
const [salesDropdownValue, setSalesDropdownValue] = useState<string>("Last 30 Days");
const [customersDropdownValue, setCustomersDropdownValue] = useState<string>("Last 30 Days");
const [revenueDropdownValue, setRevenueDropdownValue] = useState<string>("Last 30 Days");
const [salesDropdown, setSalesDropdown] = useState<string | null>(null);
const [customersDropdown, setCustomersDropdown] = useState<string | null>(null);
const [revenueDropdown, setRevenueDropdown] = useState<string | null>(null);
const openSalesDropdown = ({currentTarget}: any) => setSalesDropdown(currentTarget);
const closeSalesDropdown = ({currentTarget}: any) =>
{
setSalesDropdown(null);
setSalesDropdownValue(currentTarget.innerText || salesDropdownValue);
};
const openCustomersDropdown = ({currentTarget}: any) => setCustomersDropdown(currentTarget);
const closeCustomersDropdown = ({currentTarget}: any) =>
{
setCustomersDropdown(null);
setCustomersDropdownValue(currentTarget.innerText || salesDropdownValue);
};
const openRevenueDropdown = ({currentTarget}: any) => setRevenueDropdown(currentTarget);
const closeRevenueDropdown = ({currentTarget}: any) =>
{
setRevenueDropdown(null);
setRevenueDropdownValue(currentTarget.innerText || salesDropdownValue);
};
// Dropdown menu template for the DefaultStatisticsCard
const renderMenu = (state: any, close: any) => (
<Menu
anchorEl={state}
transformOrigin={{vertical: "top", horizontal: "center"}}
open={Boolean(state)}
onClose={close}
keepMounted
disableAutoFocusItem
>
<MenuItem onClick={close}>Last 7 days</MenuItem>
<MenuItem onClick={close}>Last week</MenuItem>
<MenuItem onClick={close}>Last 30 days</MenuItem>
</Menu>
);
return (
<DashboardLayout>
<Navbar />
<MDBox py={3}>
<MDBox mb={3}>
<Grid container spacing={3}>
<Grid item xs={12} sm={4}>
<SimpleStatisticsCard
title="total shipments"
count="50,234"
percentage={{
color: "success",
value: "+5%",
label: "since last month",
}}
dropdown={{
action: openSalesDropdown,
menu: renderMenu(salesDropdown, closeSalesDropdown),
value: salesDropdownValue,
}}
/>
</Grid>
<Grid item xs={12} sm={4}>
<SimpleStatisticsCard
title="Successful deliveries"
count="49,234"
percentage={{
color: "success",
value: "+12%",
label: "since last month",
}}
dropdown={{
action: openCustomersDropdown,
menu: renderMenu(customersDropdown, closeCustomersDropdown),
value: customersDropdownValue,
}}
/>
</Grid>
<Grid item xs={12} sm={4}>
<SimpleStatisticsCard
title="service failures"
count="832"
percentage={{
color: "error",
value: "+1.2%",
label: "since last month",
}}
dropdown={{
action: openRevenueDropdown,
menu: renderMenu(revenueDropdown, closeRevenueDropdown),
value: revenueDropdownValue,
}}
/>
</Grid>
</Grid>
</MDBox>
<MDBox mb={3}>
<Grid container spacing={3}>
<Grid item xs={12} sm={6} lg={4}>
<ShipmentsByCarrierPieChart />
</Grid>
<Grid item xs={12} sm={6} lg={8}>
<DefaultLineChart
title="Carrier Volume by Month"
description={
<MDBox display="flex" justifyContent="space-between">
<MDBox display="flex" ml={-1}>
<MDBadgeDot color="dark" size="sm" badgeContent="AxleHire" />
<MDBadgeDot color="info" size="sm" badgeContent="CDL" />
<MDBadgeDot color="primary" size="sm" badgeContent="DHL" />
<MDBadgeDot color="success" size="sm" badgeContent="FedEx" />
<MDBadgeDot color="error" size="sm" badgeContent="LSO" />
<MDBadgeDot color="secondary" size="sm" badgeContent="OnTrac" />
<MDBadgeDot color="warning" size="sm" badgeContent="UPS" />
</MDBox>
</MDBox>
}
chart={carrierVolumeLineChartData}
/>
</Grid>
</Grid>
</MDBox>
<Grid container spacing={3} mb={3}>
<Grid item xs={12}>
<Card>
<MDBox pt={3} px={3}>
<MDTypography variant="h6" fontWeight="medium">
Spend by Carrier YTD
</MDTypography>
</MDBox>
<MDBox py={1}>
<DataTable
table={carrierSpendData}
entriesPerPage={false}
showTotalEntries={false}
isSorted={false}
noEndBorder
/>
</MDBox>
</Card>
</Grid>
</Grid>
<MDBox mb={3}>
<Grid container spacing={3}>
<Grid item xs={12} lg={8}>
<HorizontalBarChart title="Time in Transit Last 30 Days" chart={timeInTransitBarChartData} />
</Grid>
<Grid item xs={12} lg={4}>
<ShipmentsByWarehouseTable title="Shipments by Warehouse" rows={smallShipmentsByWarehouseData} />
</Grid>
</Grid>
</MDBox>
</MDBox>
<Footer />
</DashboardLayout>
);
}
export default CarrierPerformance;

210
src/qqq/pages/dashboards/Overview.tsx Normal file
View File

@ -0,0 +1,210 @@
/*
* 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 Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import Tooltip from "@mui/material/Tooltip";
import booking1 from "assets/images/products/product-1-min.jpg";
import booking2 from "assets/images/products/product-2-min.jpg";
import booking3 from "assets/images/products/product-3-min.jpg";
import DashboardLayout from "qqq/components/DashboardLayout";
import Footer from "qqq/components/Footer";
import Navbar from "qqq/components/Navbar";
import BookingCard from "qqq/components/Temporary/BookingCard";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
import shipmentsByDayBarChartData from "qqq/pages/dashboards/Widgets/Data/ShipmentsByDayBarChartData";
import shipmentsByMonthLineChartData from "qqq/pages/dashboards/Widgets/Data/ShipmentsByMonthLineChartData";
import ShipmentsByCarrierPieChart from "qqq/pages/dashboards/Widgets/ShipmentsByChannelPieChart";
import ShipmentsByWarehouse from "qqq/pages/dashboards/Widgets/ShipmentsByWarehouse";
import SmallLineChart from "qqq/pages/dashboards/Widgets/SmallLineChart";
import StatisticsCard from "qqq/pages/dashboards/Widgets/StatisticsCard";
function Overview(): JSX.Element
{
const actionButtons = (
<>
<Tooltip title="Refresh" placement="bottom">
<MDTypography
variant="body1"
color="primary"
lineHeight={1}
sx={{cursor: "pointer", mx: 3}}
>
<Icon color="inherit">refresh</Icon>
</MDTypography>
</Tooltip>
<Tooltip title="Edit" placement="bottom">
<MDTypography variant="body1" color="info" lineHeight={1} sx={{cursor: "pointer", mx: 3}}>
<Icon color="inherit">edit</Icon>
</MDTypography>
</Tooltip>
</>
);
return (
<DashboardLayout>
<Navbar />
<MDBox py={3}>
<Grid container>
<ShipmentsByWarehouse />
</Grid>
<MDBox mt={6}>
<Grid container spacing={3}>
<Grid item xs={12} md={6} lg={4}>
<MDBox mb={3}>
<BarChart
color="info"
title="Total Shipments by Day"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at auctor leo. Aliquam luctus est purus, ut placerat libero aliquet sed. Quisque consequat sem vitae iaculis tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
date="Updated 3 minutes ago"
chart={shipmentsByDayBarChartData}
/>
</MDBox>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<MDBox mb={3}>
<ShipmentsByCarrierPieChart />
</MDBox>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<MDBox mb={3}>
<SmallLineChart
color="dark"
title="shipments by month"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at auctor leo. Aliquam luctus est purus, ut placerat libero aliquet sed. Quisque consequat sem vitae iaculis tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
date="Just updated"
chart={shipmentsByMonthLineChartData}
/>
</MDBox>
</Grid>
</Grid>
</MDBox>
<MDBox mt={1.5}>
<Grid container spacing={3}>
<Grid item xs={12} md={6} lg={3}>
<MDBox mb={1.5}>
<StatisticsCard
icon="widgets"
title="Today's Shipments"
count="2,813"
percentage={{
color: "success",
amount: "+15%",
label: "than lask week",
}}
/>
</MDBox>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<MDBox mb={1.5}>
<StatisticsCard
icon="local_shipping"
title="Shipments In Transit"
count="1,023"
percentage={{
color: "success",
amount: "+1%",
label: "than yesterday",
}}
/>
</MDBox>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<MDBox mb={1.5}>
<StatisticsCard
color="warning"
icon="receipt"
title="Open Orders"
count="213"
percentage={{
color: "error",
amount: "+3%",
label: "than last week",
}}
/>
</MDBox>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<MDBox mb={1.5}>
<StatisticsCard
color="error"
icon="error"
title="Shipping Exceptions"
count="28"
percentage={{
color: "success",
amount: "-12%",
label: "than yesterday",
}}
/>
</MDBox>
</Grid>
</Grid>
</MDBox>
<MDBox mt={2}>
<Grid container spacing={3}>
<Grid item xs={12} md={6} lg={4}>
<MDBox mt={3}>
<BookingCard
image={booking1}
title="Warehouse Performance Report"
description='The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona.'
price="99% SLA"
location="Edison, NJ"
action={actionButtons}
/>
</MDBox>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<MDBox mt={3}>
<BookingCard
image={booking3}
title="Warehouse Performance Report"
description='The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Milan.'
price="98% SLA"
location="Patterson, CA"
action={actionButtons}
/>
</MDBox>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<MDBox mt={3}>
<BookingCard
image={booking2}
title="Warehouse Performance Report"
description='The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the night life in London, UK.'
price="95% SLA"
location="Stockton, CA"
action={actionButtons}
/>
</MDBox>
</Grid>
</Grid>
</MDBox>
</MDBox>
<Footer />
</DashboardLayout>
);
}
export default Overview;

98
src/qqq/pages/dashboards/Tables/ShipmentsByWarehouseTable.tsx Normal file
View File

@ -0,0 +1,98 @@
/*
* 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 Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import {useMemo} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import ShipmentsByWarehouseTableCell from "qqq/pages/dashboards/Tables/ShipmentsByWarehouseTableCell";
interface Props
{
title?: string;
rows?: {
[key: string]: string | number | (string | number)[];
}[];
shadow?: boolean;
}
function ShipmentsByWarehouseTable({title, rows, shadow}: Props): JSX.Element
{
const renderTableCells = rows.map(
(row: { [key: string]: string | number | (string | number)[] }, key: any) =>
{
const tableRows: any = [];
const rowKey = `row-${key}`;
Object.entries(row).map(([cellTitle, cellContent]: any) =>
Array.isArray(cellContent)
? tableRows.push(
<ShipmentsByWarehouseTableCell
key={cellContent[1]}
title={cellTitle}
content={cellContent[1]}
image={cellContent[0]}
noBorder={key === rows.length - 1}
/>
)
: tableRows.push(
<ShipmentsByWarehouseTableCell
key={cellContent}
title={cellTitle}
content={cellContent}
noBorder={key === rows.length - 1}
/>
)
);
return <TableRow key={rowKey}>{tableRows}</TableRow>;
}
);
return (
<TableContainer sx={{height: "100%", boxShadow: !shadow && "none"}}>
<Table>
{title ? (
<TableHead>
<MDBox component="tr" width="max-content" display="block" mb={1.5}>
<MDTypography variant="h6" component="td">
{title}
</MDTypography>
</MDBox>
</TableHead>
) : null}
<TableBody>{useMemo(() => renderTableCells, [rows])}</TableBody>
</Table>
</TableContainer>
);
}
ShipmentsByWarehouseTable.defaultProps = {
title: "",
rows: [{}],
shadow: true,
};
export default ShipmentsByWarehouseTable;

98
src/qqq/pages/dashboards/Tables/ShipmentsByWarehouseTableCell.tsx Normal file
View File

@ -0,0 +1,98 @@
/*
* 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 TableCell from "@mui/material/TableCell";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
interface Props
{
title: string;
content?: string | number;
image?: string;
noBorder?: boolean;
[key: string]: any;
}
function ShipmentsByWarehouseTableCell ({title, content, image, noBorder, ...rest}: Props): JSX.Element
{
let template;
if (image)
{
template = (
<TableCell {...rest} align="left" width="30%" sx={{border: noBorder && 0}}>
<MDBox display="flex" alignItems="center" width="max-content">
<MDBox
component="img"
src={image}
alt={content.toString()}
width="1.5rem"
height="auto"
/>{" "}
<MDBox display="flex" flexDirection="column" ml={3}>
<MDTypography
variant="caption"
color="text"
fontWeight="medium"
textTransform="capitalize"
>
{title}:
</MDTypography>
<MDTypography variant="button" fontWeight="regular" textTransform="capitalize">
{content}
</MDTypography>
</MDBox>
</MDBox>
</TableCell>
);
}
else
{
template = (
<TableCell {...rest} align="center" sx={{border: noBorder && 0}}>
<MDBox display="flex" flexDirection="column">
<MDTypography
variant="caption"
color="text"
fontWeight="medium"
textTransform="capitalize"
>
{title}:
</MDTypography>
<MDTypography variant="button" fontWeight="regular" textTransform="capitalize">
{content}
</MDTypography>
</MDBox>
</TableCell>
);
}
return template;
}
// Declaring default props for SalesTableCell
ShipmentsByWarehouseTableCell.defaultProps = {
image: "",
noBorder: false,
};
export default ShipmentsByWarehouseTableCell;

BIN
src/qqq/pages/dashboards/Widgets/.LineChart.tsx.swp Normal file
View File

Binary file not shown.

99
src/qqq/pages/dashboards/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 "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import configs from "qqq/pages/dashboards/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 BarChart({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
BarChart.defaultProps = {
color: "dark",
description: "",
};
export default BarChart;

104
src/qqq/pages/dashboards/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;

87
src/qqq/pages/dashboards/Widgets/Configs/HorizontalBarChartConfigs.ts Normal file
View File

@ -0,0 +1,87 @@
/*
* 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: [...datasets],
},
options: {
indexAxis: "y",
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
y: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [5, 5],
color: "#c1c4ce5c",
},
ticks: {
display: true,
padding: 10,
color: "#9ca2b7",
font: {
size: 14,
weight: 300,
family: "Roboto",
style: "normal",
lineHeight: 2,
},
},
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: true,
drawTicks: true,
color: "#c1c4ce5c",
},
ticks: {
display: true,
color: "#9ca2b7",
padding: 10,
font: {
size: 14,
weight: 300,
family: "Roboto",
style: "normal",
lineHeight: 2,
},
},
},
},
},
};
}
export default configs;

104
src/qqq/pages/dashboards/Widgets/Configs/LineChartConfigs.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,
pointRadius: 5,
pointBorderColor: "transparent",
pointBackgroundColor: "rgba(255, 255, 255, .8)",
borderColor: "rgba(255, 255, 255, .8)",
borderWidth: 4,
backgroundColor: "transparent",
fill: true,
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: {
display: true,
color: "#f8f9fa",
padding: 10,
font: {
size: 14,
weight: 300,
family: "Roboto",
style: "normal",
lineHeight: 2,
},
},
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false,
borderDash: [5, 5],
},
ticks: {
display: true,
color: "#f8f9fa",
padding: 10,
font: {
size: 14,
weight: 300,
family: "Roboto",
style: "normal",
lineHeight: 2,
},
},
},
},
},
};
}
export default configs;

100
src/qqq/pages/dashboards/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;

87
src/qqq/pages/dashboards/Widgets/Data/CarrierSpendData.tsx Normal file
View File

@ -0,0 +1,87 @@
/*
* 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 DefaultCell from "layouts/dashboards/sales/components/DefaultCell";
import ProductCell from "layouts/dashboards/sales/components/ProductCell";
import RefundsCell from "layouts/dashboards/sales/components/RefundsCell";
import axlehire from "qqq/images/carrier-logos/axlehire.png"
import cdl from "qqq/images/carrier-logos/cdl.png"
import dhl from "qqq/images/carrier-logos/dhl.png"
import fedex from "qqq/images/carrier-logos/fedex.png"
import lso from "qqq/images/carrier-logos/lso.png"
import ontrac from "qqq/images/carrier-logos/ontrac.png"
import ups from "qqq/images/carrier-logos/ups.png"
const carrierSpendData = {
columns: [
{Header: "carrier", accessor: "product", width: "55%"},
{Header: "total YTD", accessor: "value"},
{Header: "monthly average", accessor: "adsSpent", align: "center"},
{Header: "service failures", accessor: "refunds", align: "center"},
],
rows: [
{
product: <ProductCell image={axlehire} name="AxleHire" orders={921} />,
value: <DefaultCell>$140,925</DefaultCell>,
adsSpent: <DefaultCell>$24,531</DefaultCell>,
refunds: <RefundsCell value={121} icon={{color: "success", name: "keyboard_arrow_up"}} />,
},
{
product: <ProductCell image={cdl} name="CDL" orders={2.421} />,
value: <DefaultCell>$40,600</DefaultCell>,
adsSpent: <DefaultCell>$9,430</DefaultCell>,
refunds: <RefundsCell value={54} icon={{color: "success", name: "keyboard_arrow_up"}} />,
},
{
product: <ProductCell image={dhl} name="DHL" orders={2.421} />,
value: <DefaultCell>$90,233</DefaultCell>,
adsSpent: <DefaultCell>$18.30</DefaultCell>,
refunds: <RefundsCell value={54} icon={{color: "success", name: "keyboard_arrow_up"}} />,
},
{
product: <ProductCell image={fedex} name="FedEx" orders={12.821} />,
value: <DefaultCell>$80,250</DefaultCell>,
adsSpent: <DefaultCell>$4,200</DefaultCell>,
refunds: <RefundsCell value={40} icon={{color: "error", name: "keyboard_arrow_down"}} />,
},
{
product: <ProductCell image={lso} name="LSO" orders={5.921} />,
value: <DefaultCell>$91,300</DefaultCell>,
adsSpent: <DefaultCell>$7,364</DefaultCell>,
refunds: <RefundsCell value={5} icon={{color: "error", name: "keyboard_arrow_down"}} />,
},
{
product: <ProductCell image={ontrac} name="OnTrac" orders={5.921} />,
value: <DefaultCell>$77,300</DefaultCell>,
adsSpent: <DefaultCell>$4,064</DefaultCell>,
refunds: <RefundsCell value={5} icon={{color: "error", name: "keyboard_arrow_down"}} />,
},
{
product: <ProductCell image={ups} name="UPS" orders={8.232} />,
value: <DefaultCell>$130,992</DefaultCell>,
adsSpent: <DefaultCell>$9,500</DefaultCell>,
refunds: <RefundsCell value={13} icon={{color: "success", name: "keyboard_arrow_up"}} />,
},
],
};
export default carrierSpendData;

75
src/qqq/pages/dashboards/Widgets/Data/CarrierVolumeLineChartData.ts Normal file
View File

@ -0,0 +1,75 @@
/*
* 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/>.
*/
interface Types {
labels: string[];
datasets: {
label: string;
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
data: number[];
}[];
}
const carrierVolumeLineChartData: Types = {
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
label: " AxleHire",
color: "dark",
data: [500, 200, 110, 150, 440, 670, 100, 150, 300],
},
{
label: " CDL",
color: "info",
data: [1000, 3000, 4000, 1200, 1500, 2200, 2800, 3500, 4500],
},
{
label: " DHL",
color: "primary",
data: [3489, 5932, 4332, 8234, 9239, 10823, 9483, 11909, 11808],
},
{
label: " FedEx",
color: "success",
data: [20388, 21008, 19323, 17934, 18399, 22090, 23909, 25800, 28833],
},
{
label: " LSO",
color: "error",
data: [100, 300, 400, 1200, 1500, 2200, 2800, 2500, 2800],
},
{
label: " OnTrac",
color: "secondary",
data: [3489, 5932, 4332, 8234, 9239, 10823, 9483, 11909, 11808],
},
{
label: " UPS",
color: "warning",
data: [19348, 18008, 20844, 16034, 24000, 23480, 26809, 27888, 27909],
},
],
};
"warning"
export default carrierVolumeLineChartData;

36
src/qqq/pages/dashboards/Widgets/Data/ShipmentsByCarrierPieChartData.ts Normal file
View File

@ -0,0 +1,36 @@
/*
* 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 MDBadgeDot from "components/MDBadgeDot";
import MDBox from "components/MDBox";
const shipmentsByCarrierPieChartData = {
labels: [" AxleHire", " CDL", " DHL", " FedEx", " LSO", " OnTrac", " UPS"],
datasets: {
label: "Projects",
backgroundColors: ["dark", "info", "primary", "success", "error", "secondary", "warning"],
data: [523, 1139, 1933, 3248, 993, 103, 2439]
},
};
export default shipmentsByCarrierPieChartData;

27
src/qqq/pages/dashboards/Widgets/Data/ShipmentsByDayBarChartData.ts Normal file
View File

@ -0,0 +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/>.
*/
const shipmentsByDayBarChartData = {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: {label: "Sales", data: [50, 20, 10, 22, 50, 10, 40]},
};
export default shipmentsByDayBarChartData;

28
src/qqq/pages/dashboards/Widgets/Data/ShipmentsByMonthLineChartData.ts Normal file
View File

@ -0,0 +1,28 @@
/*
* 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/>.
*/
const shipmentsByMonthLineChartData =
{
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: {label: "Mobile apps", data: [50, 40, 300, 320, 500, 350, 200, 230, 500]},
};
export default shipmentsByMonthLineChartData;

49
src/qqq/pages/dashboards/Widgets/Data/ShipmentsByWarehouseData.ts Normal file
View File

@ -0,0 +1,49 @@
/*
* 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/>.
*/
// Countries flags
import BR from "assets/images/icons/flags/BR.png";
import DE from "assets/images/icons/flags/DE.png";
import GB from "assets/images/icons/flags/GB.png";
import US from "assets/images/icons/flags/US.png";
const shipmentsByWarehouseData = [
{
warehouse: [US, "Patterson, CA"],
"shipments YTD": "25,234",
"shipments last 30 days": "1,233",
"delivery SLA": "95.9%",
},
{
warehouse: [US, "Stockton, CA"],
"shipments YTD": "2,234",
"shipments last 30 days": "947",
"delivery SLA": "90.9%",
},
{
warehouse: [US, "Edison, NJ"],
"shipments YTD": "425,992",
"shipments last 30 days": "21,499",
"delivery SLA": "94.4%",
},
];
export default shipmentsByWarehouseData;

46
src/qqq/pages/dashboards/Widgets/Data/SmallShipmentsByWarehouseData.ts Normal file
View File

@ -0,0 +1,46 @@
/*
* 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/>.
*/
// Countries flags
import BR from "assets/images/icons/flags/BR.png";
import DE from "assets/images/icons/flags/DE.png";
import GB from "assets/images/icons/flags/GB.png";
import US from "assets/images/icons/flags/US.png";
const smallShipmentsByWarehouseData = [
{
warehouse: [US, "Patterson, CA"],
"shipments YTD": "25,234",
"SLA": "95.9%",
},
{
warehouse: [US, "Stockton, CA"],
"shipments YTD": "2,234",
"SLA": "90.9%",
},
{
warehouse: [US, "Edison, NJ"],
"shipments YTD": "425,992",
"SLA": "94.4%",
},
];
export default smallShipmentsByWarehouseData;

37
src/qqq/pages/dashboards/Widgets/Data/timeInTransitBarChartData.ts Normal file
View File

@ -0,0 +1,37 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// types
interface Types {
labels: string[];
datasets: {
label: string;
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
data: number[];
}[];
}
const timeInTransitBarChartData: Types = {
labels: ["<1", "1", "2", "3", "3+"],
datasets: [
{
label: " time in transit",
color: "dark",
data: [150, 2088, 8888, 5883, 203],
},
],
};
export default timeInTransitBarChartData;

123
src/qqq/pages/dashboards/Widgets/HorizontalBarChart.tsx Normal file
View File

@ -0,0 +1,123 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import {ReactNode, useMemo} from "react";
import {Bar} from "react-chartjs-2";
import colors from "qqq/components/Temporary/colors";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import configs from "qqq/pages/dashboards/Widgets/Configs/HorizontalBarChartConfigs"
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;
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
data: number[];
}[];
};
[key: string]: any;
}
function HorizontalBarChart({icon, title, description, height, chart}: Props): JSX.Element
{
const chartDatasets = chart.datasets
? chart.datasets.map((dataset) => ({
...dataset,
weight: 5,
borderWidth: 0,
borderRadius: 4,
backgroundColor: colors[dataset.color]
? colors[dataset.color || "dark"].main
: colors.dark.main,
fill: false,
maxBarThickness: 35,
}))
: [];
const {data, options} = configs(chart.labels || [], chartDatasets);
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}>
<Bar data={data} options={options} />
</MDBox>
),
[chart, height]
)}
</MDBox>
);
return title || description ? <Card>{renderChart}</Card> : renderChart;
}
HorizontalBarChart.defaultProps = {
icon: {color: "info", component: ""},
title: "",
description: "",
height: "19.125rem",
};
export default HorizontalBarChart;

125
src/qqq/pages/dashboards/Widgets/LineChart.tsx Normal file
View File

@ -0,0 +1,125 @@
/*
* 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 {Line} from "react-chartjs-2";
import colors from "qqq/components/Temporary/colors";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import configs from "qqq/pages/dashboards/Widgets/Configs/LineChartConfigs";
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;
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
data: number[];
}[];
};
[key: string]: any;
}
function LineChart({icon, title, description, height, chart}: Props): JSX.Element
{
const chartDatasets = chart.datasets
? chart.datasets.map((dataset) => ({
...dataset,
tension: 0,
pointRadius: 3,
borderWidth: 4,
backgroundColor: "transparent",
fill: true,
pointBackgroundColor: colors[dataset.color]
? colors[dataset.color || "dark"].main
: colors.dark.main,
borderColor: colors[dataset.color]
? colors[dataset.color || "dark"].main
: colors.dark.main,
maxBarThickness: 6,
}))
: [];
const {data, options} = configs(chart.labels || [], chartDatasets);
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}>
<Line data={data} options={options} />
</MDBox>
),
[chart, height]
)}
</MDBox>
);
return title || description ? <Card>{renderChart}</Card> : renderChart;
}
LineChart.defaultProps = {
icon: {color: "info", component: ""},
title: "",
description: "",
height: "19.125rem",
};
export default LineChart;

110
src/qqq/pages/dashboards/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 "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import configs from "qqq/pages/dashboards/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/pages/dashboards/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 "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/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 #04aaef; 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;

92
src/qqq/pages/dashboards/Widgets/ShipmentsByChannelPieChart.tsx Normal file
View File

@ -0,0 +1,92 @@
/*
* 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 Grid from "@mui/material/Grid";
import {useMaterialUIController} from "context";
import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import shipmentsByCarrierPieChartData from "qqq/pages/dashboards/Widgets/Data/ShipmentsByCarrierPieChartData";
import PieChart from "qqq/pages/dashboards/Widgets/PieChart";
function ShipmentsByCarrierPieChart(): JSX.Element
{
const [controller] = useMaterialUIController();
const {darkMode} = controller;
return (
<Card sx={{height: "100%"}}>
<MDBox display="flex" justifyContent="space-between" alignItems="center" pt={2} px={2}>
<MDTypography variant="h6">Shipments By Carrier YTD</MDTypography>
</MDBox>
<MDBox mt={3}>
<Grid container alignItems="center">
<Grid item xs={7}>
<PieChart chart={shipmentsByCarrierPieChartData} height="12.5rem" />
</Grid>
<Grid item xs={5}>
<MDBox pr={1}>
<MDBox mb={1}>
<MDBadgeDot color="dark" size="sm" badgeContent="AxleHire" />
</MDBox>
<MDBox mb={1}>
<MDBadgeDot color="info" size="sm" badgeContent="CDL" />
</MDBox>
<MDBox mb={1}>
<MDBadgeDot color="primary" size="sm" badgeContent="DHL" />
</MDBox>
<MDBox mb={1}>
<MDBadgeDot color="success" size="sm" badgeContent="FedEx" />
</MDBox>
<MDBox mb={1}>
<MDBadgeDot color="error" size="sm" badgeContent="LSO" />
</MDBox>
<MDBox mb={1}>
<MDBadgeDot color="secondary" size="sm" badgeContent="OnTrac" />
</MDBox>
<MDBox mb={1}>
<MDBadgeDot color="warning" size="sm" badgeContent="UPS" />
</MDBox>
</MDBox>
</Grid>
</Grid>
</MDBox>
<MDBox
pt={4}
pb={2}
px={2}
display="flex"
flexDirection={{xs: "column", sm: "row"}}
mt="auto"
>
<MDBox width={{xs: "100%", sm: "60%"}} lineHeight={1}>
<MDTypography variant="button" color="text" fontWeight="light">
More than <strong>1,200,000</strong> sales are made using referral marketing, and{" "}
<strong>700,000</strong> are from social media.
</MDTypography>
</MDBox>
</MDBox>
</Card>
);
}
export default ShipmentsByCarrierPieChart;

128
src/qqq/pages/dashboards/Widgets/ShipmentsByWarehouse.tsx Normal file
View File

@ -0,0 +1,128 @@
/*
* 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 Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import {VectorMap} from "@react-jvectormap/core";
import {usAea} from "@react-jvectormap/unitedstates";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import ShipmentsByWarehouseTable from "qqq/pages/dashboards/Tables/ShipmentsByWarehouseTable";
import shipmentsByWarehouseData from "qqq/pages/dashboards/Widgets/Data/ShipmentsByWarehouseData";
function ShipmentsByWarehouseData(): JSX.Element
{
return (
<Card sx={{width: "100%"}}>
<MDBox display="flex">
<MDBox
display="flex"
justifyContent="center"
alignItems="center"
width="4rem"
height="4rem"
variant="gradient"
bgColor="info"
color="white"
shadow="md"
borderRadius="xl"
ml={3}
mt={-2}
>
<Icon fontSize="medium" color="inherit">
warehouse
</Icon>
</MDBox>
<MDTypography variant="h6" sx={{mt: 2, mb: 1, ml: 2}}>
Shipments by Warehouse
</MDTypography>
</MDBox>
<MDBox p={2}>
<Grid container>
<Grid item xs={12} md={7} lg={6}>
<ShipmentsByWarehouseTable rows={shipmentsByWarehouseData} shadow={false} />
</Grid>
<Grid item xs={12} md={5} lg={6} sx={{mt: {xs: 5, lg: 0}}}>
<VectorMap
map={usAea}
zoomOnScroll={false}
zoomButtons={false}
markersSelectable
backgroundColor="transparent"
markers={[
{
name: "edison",
latLng: [40.5274, -74.3933],
},
{
name: "stockton",
latLng: [37.975556, -121.300833],
},
{
name: "patterson",
latLng: [37.473056, -121.132778],
},
]}
regionStyle={{
initial: {
fill: "#dee2e7",
"fill-opacity": 1,
stroke: "none",
"stroke-width": 0,
"stroke-opacity": 0,
},
}}
markerStyle={{
initial: {
fill: "#e91e63",
stroke: "#ffffff",
"stroke-width": 5,
"stroke-opacity": 0.5,
r: 7,
},
hover: {
fill: "E91E63",
stroke: "#ffffff",
"stroke-width": 5,
"stroke-opacity": 0.5,
},
selected: {
fill: "E91E63",
stroke: "#ffffff",
"stroke-width": 5,
"stroke-opacity": 0.5,
},
}}
style={{
marginTop: "-1.5rem",
}}
onRegionTipShow={() => false}
onMarkerTipShow={() => false}
/>
</Grid>
</Grid>
</MDBox>
</Card>
);
}
export default ShipmentsByWarehouseData;

112
src/qqq/pages/dashboards/Widgets/SimpleStatisticsCard.tsx Normal file
View File

@ -0,0 +1,112 @@
/*
* 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 Grid from "@mui/material/Grid";
import {ReactNode} from "react";
import {useMaterialUIController} from "context";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
interface Props {
title: string;
count: string | number;
percentage?: {
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
value: string | number;
label: string;
};
dropdown?: {
action: (...args: any) => void;
menu: ReactNode;
value: string;
};
[key: string]: any;
}
function SimpleStatisticsCard({title, count, percentage, dropdown}: Props): JSX.Element
{
const [controller] = useMaterialUIController();
const {darkMode} = controller;
return (
<Card>
<MDBox p={2}>
<Grid container>
<Grid item xs={7}>
<MDBox mb={0.5} lineHeight={1}>
<MDTypography
variant="button"
fontWeight="medium"
color="text"
textTransform="capitalize"
>
{title}
</MDTypography>
</MDBox>
<MDBox lineHeight={1}>
<MDTypography variant="h5" fontWeight="bold">
{count}
</MDTypography>
<MDTypography variant="button" fontWeight="bold" color={percentage.color}>
{percentage.value}&nbsp;
<MDTypography
variant="button"
fontWeight="regular"
color={darkMode ? "text" : "secondary"}
>
{percentage.label}
</MDTypography>
</MDTypography>
</MDBox>
</Grid>
<Grid item xs={5}>
{dropdown && (
<MDBox width="100%" textAlign="right" lineHeight={1}>
<MDTypography
variant="caption"
color="secondary"
fontWeight="regular"
sx={{cursor: "pointer"}}
onClick={dropdown.action}
>
{dropdown.value}
</MDTypography>
{dropdown.menu}
</MDBox>
)}
</Grid>
</Grid>
</MDBox>
</Card>
);
}
SimpleStatisticsCard.defaultProps = {
percentage: {
color: "success",
value: "",
label: "",
},
dropdown: false,
};
export default SimpleStatisticsCard;

97
src/qqq/pages/dashboards/Widgets/SmallLineChart.tsx Normal file
View File

@ -0,0 +1,97 @@
/*
* 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 {Line} from "react-chartjs-2";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import configs from "qqq/pages/dashboards/Widgets/Configs/LineChartConfigs"
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 SmallLineChart({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"
>
<Line 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>
);
}
SmallLineChart.defaultProps = {
color: "dark",
description: "",
};
export default SmallLineChart;

99
src/qqq/pages/dashboards/Widgets/StatisticsCard.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 {ReactNode} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
// Declaring props types for CompleStatisticsCard
interface Props {
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
title: string;
count: string | number;
percentage?: {
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
amount: string | number;
label: string;
};
icon: ReactNode;
[key: string]: any;
}
function StatisticsCard({color, title, count, percentage, icon}: Props): JSX.Element
{
return (
<Card>
<MDBox display="flex" justifyContent="space-between" pt={1} px={2}>
<MDBox
variant="gradient"
bgColor={color}
color={color === "light" ? "dark" : "white"}
coloredShadow={color}
borderRadius="xl"
display="flex"
justifyContent="center"
alignItems="center"
width="4rem"
height="4rem"
mt={-3}
>
<Icon fontSize="medium" color="inherit">
{icon}
</Icon>
</MDBox>
<MDBox textAlign="right" lineHeight={1.25}>
<MDTypography variant="button" fontWeight="light" color="text">
{title}
</MDTypography>
<MDTypography variant="h4">{count}</MDTypography>
</MDBox>
</MDBox>
<Divider />
<MDBox pb={2} px={2}>
<MDTypography component="p" variant="button" color="text" display="flex">
<MDTypography
component="span"
variant="button"
fontWeight="bold"
color={percentage.color}
>
{percentage.amount}
</MDTypography>
&nbsp;{percentage.label}
</MDTypography>
</MDBox>
</Card>
);
}
StatisticsCard.defaultProps = {
color: "info",
percentage: {
color: "success",
text: "",
label: "",
},
};
export default StatisticsCard;

125
src/qqq/pages/dashboards/Widgets/WarehouseCard.tsx Normal file
View File

@ -0,0 +1,125 @@
/*
* 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 {ReactNode} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
interface Props {
image: string;
title: string;
description: string;
price: string;
location: ReactNode;
action?: ReactNode | boolean;
[key: string]: any;
}
function WarehouseCard({image, title, description, price, location, action}: Props): JSX.Element
{
return (
<Card
sx={{
"&:hover .card-header": {
transform: action && "translate3d(0, -50px, 0)",
},
}}
>
<MDBox
position="relative"
borderRadius="lg"
mt={-3}
mx={2}
className="card-header"
sx={{transition: "transform 300ms cubic-bezier(0.34, 1.61, 0.7, 1)"}}
>
<MDBox
component="img"
src={image}
alt={title}
borderRadius="lg"
shadow="md"
width="100%"
height="100%"
position="relative"
zIndex={1}
/>
<MDBox
borderRadius="lg"
shadow="md"
width="100%"
height="100%"
position="absolute"
left={0}
top="0"
sx={{
backgroundImage: `url(${image})`,
transform: "scale(0.94)",
filter: "blur(12px)",
backgroundSize: "cover",
}}
/>
</MDBox>
<MDBox textAlign="center" pt={3} px={3}>
<MDBox display="flex" justifyContent="center" alignItems="center" mt={action ? -8 : -4.25}>
{action}
</MDBox>
<MDTypography variant="h5" fontWeight="regular" sx={{mt: 4}}>
{title}
</MDTypography>
<MDTypography variant="body2" color="text" sx={{mt: 1.5, mb: 1}}>
{description}
</MDTypography>
</MDBox>
<Divider />
<MDBox
display="flex"
justifyContent="space-between"
alignItems="center"
pt={0.5}
pb={3}
px={3}
lineHeight={1}
>
<MDTypography variant="body2" fontWeight="regular" color="text">
{price}
</MDTypography>
<MDBox color="text" display="flex" alignItems="center">
<Icon color="inherit" sx={{m: 0.5}}>
place
</Icon>
<MDTypography variant="button" fontWeight="light" color="text">
{location}
</MDTypography>
</MDBox>
</MDBox>
</Card>
);
}
WarehouseCard.defaultProps = {
action: false,
};
export default WarehouseCard;