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

SPRINT-12: frontend bug fixes

Browse Source
This commit is contained in:
Tim Chamberlain
2022-10-04 22:37:21 -05:00
parent 30f2da17a4
commit 5cdc15a498
14 changed files with 64 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/qqq/components/DashboardWidgets.tsx
View File

@ -110,30 +110,28 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El
<Grid container spacing={3} pb={4}>
{
widgetMetaDataList.map((widgetMetaData, i) => (
<Grid key={`${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12}>
<Grid key={`${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch"}}>
{
widgetMetaData.type === "table" && (
widgetData && widgetData[i] ? (
<MDBox>
<TableCard
color="info"
title={widgetMetaData.label}
linkText={widgetData[i].linkText}
linkURL={widgetData[i].linkURL}
noRowsFoundHTML={widgetData[i].noRowsFoundHTML}
data={widgetData[i]}
dropdownOptions={widgetData[i].dropdownOptions}
dropdownOnChange={handleDropdownOnChange}
widgetIndex={i}
/>
</MDBox>
) : null
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<TableCard
color="info"
title={widgetMetaData.label}
linkText={widgetData[i]?.linkText}
linkURL={widgetData[i]?.linkURL}
noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
data={widgetData[i]}
dropdownOptions={widgetData[i]?.dropdownOptions}
dropdownOnChange={handleDropdownOnChange}
widgetIndex={i}
/>
</MDBox>
)
}
{
widgetMetaData.type === "stepper" && (
<MDBox>
<Card sx={{marginTop: "0px", paddingTop: "0px"}}>
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<MDBox padding="1rem">
{
widgetMetaData.label && (
@ -150,8 +148,8 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El
}
{
widgetMetaData.type === "html" && (
<MDBox>
<Card sx={{alignContents: "stretch", marginTop: "0px", paddingTop: "0px"}}>
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<MDBox padding="1rem">
<MDTypography variant="h5" textTransform="capitalize">
{widgetMetaData.label}
@ -170,34 +168,32 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El
}
{
widgetMetaData.type === "multiStatistics" && (
<MultiStatisticsCard
color="info"
title={widgetMetaData.label}
data={widgetData[i]}
/>
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<MultiStatisticsCard
color="info"
title={widgetMetaData.label}
data={widgetData[i]}
/>
</MDBox>
)
}
{
widgetMetaData.type === "quickSightChart" && (
widgetData && widgetData[i] ? (
<MDBox mb={3}>
<QuickSightChart url={widgetData[i].url} label={widgetData[i].label} />
</MDBox>
) : null
<MDBox sx={{display: "flex"}}>
<QuickSightChart url={widgetData[i]?.url} label={widgetMetaData.label} />
</MDBox>
)
}
{
widgetMetaData.type === "barChart" && (
widgetData && widgetData[i] ? (
<MDBox mb={3}>
<BarChart
color="info"
title={widgetData[i].title}
date={`As of ${new Date().toDateString()}`}
data={widgetData[i].chartData}
/>
</MDBox>
) : null
<MDBox mb={3} sx={{display: "flex"}}>
<BarChart
color="info"
title={widgetMetaData.label}
date={`As of ${new Date().toDateString()}`}
data={widgetData[i]?.chartData}
/>
</MDBox>
)
}
{

5
src/qqq/pages/dashboards/CarrierPerformance.tsx
View File

@ -259,6 +259,7 @@ function CarrierPerformance(): JSX.Element
<Grid container spacing={3}>
<Grid item xs={12} sm={4}>
<SimpleStatisticsCard
title={qInstance?.widgets.get("TotalShipmentsStatisticsCard").label}
data={totalShipmentsData}
increaseIsGood={true}
dropdown={{
@ -270,6 +271,7 @@ function CarrierPerformance(): JSX.Element
</Grid>
<Grid item xs={12} sm={4}>
<SimpleStatisticsCard
title={qInstance?.widgets.get("SuccessfulDeliveriesStatisticsCard").label}
data={successfulDeliveriesData}
increaseIsGood={true}
dropdown={{
@ -282,6 +284,7 @@ function CarrierPerformance(): JSX.Element
</Grid>
<Grid item xs={12} sm={4}>
<SimpleStatisticsCard
title={qInstance?.widgets.get("ServiceFailuresStatisticsCard").label}
data={serviceFailuresData}
increaseIsGood={false}
dropdown={{
@ -297,7 +300,7 @@ function CarrierPerformance(): JSX.Element
<Grid container spacing={3}>
<Grid item xs={12} sm={6} lg={8}>
<DefaultLineChart
title={carrierVolumeTitle}
title={qInstance?.widgets.get("CarrierVolumeLineChart").label}
data={carrierVolumeData}
/>
</Grid>

8
src/qqq/pages/dashboards/Overview.tsx
View File

@ -265,7 +265,7 @@ function Overview(): JSX.Element
<MDBox mb={3}>
<BarChart
color="info"
title={shipmentsByDayTitle}
title={qInstance?.widgets.get("TotalShipmentsByDayBarChart").label}
description={shipmentsByDayDescription}
date="Updated 3 minutes ago"
data={shipmentsByDayData}
@ -275,7 +275,7 @@ function Overview(): JSX.Element
<Grid item xs={12} md={6} lg={4}>
<MDBox mb={3}>
<PieChartCard
title={shipmentsByCarrierTitle}
title={qInstance?.widgets.get("YTDShipmentsByCarrierPieChart").label}
description={shipmentsByCarrierDescription}
data={shipmentsByCarrierData}
/>
@ -285,9 +285,9 @@ function Overview(): JSX.Element
<MDBox mb={3}>
<SmallLineChart
color="dark"
title={shipmentsByMonthTitle}
title={qInstance?.widgets.get("TotalShipmentsByMonthLineChart").label}
description={shipmentsByMonthDescription}
date="Just updatederp"
date=""
chart={shipmentsByMonthData}
/>
</MDBox>

2
src/qqq/pages/dashboards/Tables/ShipmentsByWarehouseTable.tsx
View File

@ -77,7 +77,7 @@ function ShipmentsByWarehouseTable({title, rows, shadow}: Props): JSX.Element
{title ? (
<TableHead>
<MDBox component="tr" width="max-content" display="block" mb={1.5}>
<MDTypography variant="h6" component="td">
<MDTypography variant="h5" component="td">
{title}
</MDTypography>
</MDBox>

2
src/qqq/pages/dashboards/Widgets/BarChart.tsx
View File

@ -162,7 +162,7 @@ function BarChart({color, title, description, date, data}: Props): JSX.Element
[data, color]
)}
<MDBox pt={3} pb={1} px={1}>
<MDTypography variant="h6" textTransform="capitalize">
<MDTypography variant="h5" textTransform="capitalize">
{title}
</MDTypography>
<MDTypography component="div" variant="button" color="text" fontWeight="light">

2
src/qqq/pages/dashboards/Widgets/DefaultLineChart.tsx
View File

@ -190,7 +190,7 @@ function DefaultLineChart({icon, title, height, data}: Props): JSX.Element
</MDBox>
)}
<MDBox mt={icon.component ? -2 : 0}>
{title && <MDTypography variant="h6">{title}</MDTypography>}
{title && <MDTypography variant="h5">{title}</MDTypography>}
<MDBox mb={2}>
<MDTypography component="div" variant="button" color="text">
<MDBox display="flex" justifyContent="space-between">

2
src/qqq/pages/dashboards/Widgets/HorizontalBarChart.tsx
View File

@ -154,7 +154,7 @@ function HorizontalBarChart({icon, title, description, height, data}: Props): JS
</MDBox>
)}
<MDBox mt={icon.component ? -2 : 0}>
{title && <MDTypography variant="h6">{title}</MDTypography>}
{title && <MDTypography variant="h5">{title}</MDTypography>}
<MDBox mb={2}>
<MDTypography component="div" variant="button" color="text">
{description}

2
src/qqq/pages/dashboards/Widgets/LineChart.tsx
View File

@ -182,7 +182,7 @@ function LineChart({icon, title, description, height, chart}: Props): JSX.Elemen
</MDBox>
)}
<MDBox mt={icon.component ? -2 : 0}>
{title && <MDTypography variant="h6">{title}</MDTypography>}
{title && <MDTypography variant="h5">{title}</MDTypography>}
<MDBox mb={2}>
<MDTypography component="div" variant="button" color="text">
{description}

3
src/qqq/pages/dashboards/Widgets/MultiStatisticsCard.tsx
View File

@ -65,7 +65,8 @@ interface Props
function MultiStatisticsCard({title, data}: Props): JSX.Element
{
return (
<Card>
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Grid container>
<Grid item xs={12}>
<MDBox pt={3} px={3}>

2
src/qqq/pages/dashboards/Widgets/PieChartCard.tsx
View File

@ -50,7 +50,7 @@ function PieChartCard({title, description, data}: Props): JSX.Element
return (
<Card sx={{height: "100%"}}>
<MDBox display="flex" justifyContent="space-between" alignItems="center" pt={2} px={2}>
<MDTypography variant="h6">{title}</MDTypography>
<MDTypography variant="h5">{title}</MDTypography>
</MDBox>
<MDBox mt={3}>
<Grid container alignItems="center">

2
src/qqq/pages/dashboards/Widgets/ShipmentsByWarehouse.tsx
View File

@ -52,7 +52,7 @@ function ShipmentsByWarehouseData(): JSX.Element
warehouse
</Icon>
</MDBox>
<MDTypography variant="h6" sx={{mt: 2, mb: 1, ml: 2}}>
<MDTypography variant="h5" sx={{mt: 2, mb: 1, ml: 2}}>
Shipments by Warehouse
</MDTypography>
</MDBox>

5
src/qqq/pages/dashboards/Widgets/SimpleStatisticsCard.tsx
View File

@ -28,6 +28,7 @@ import {StatisticsCardData} from "qqq/pages/dashboards/Widgets/StatisticsCard";
interface Props
{
title: string;
data: StatisticsCardData;
increaseIsGood: boolean;
dropdown?: {
@ -39,9 +40,9 @@ interface Props
[key: string]: any;
}
function SimpleStatisticsCard({data, increaseIsGood, dropdown}: Props): JSX.Element
function SimpleStatisticsCard({title, data, increaseIsGood, dropdown}: Props): JSX.Element
{
const {title, count, percentageAmount, percentageLabel} = data;
const {count, percentageAmount, percentageLabel} = data;
let percentageString = "";
if (percentageAmount)

2
src/qqq/pages/dashboards/Widgets/SmallLineChart.tsx
View File

@ -80,7 +80,7 @@ function SmallLineChart({color, title, description, date, chart}: Props): JSX.El
[chart, color]
)}
<MDBox pt={3} pb={1} px={1}>
<MDTypography variant="h6" textTransform="capitalize">
<MDTypography variant="h5" textTransform="capitalize">
{title}
</MDTypography>
<MDTypography component="div" variant="button" color="text" fontWeight="light">

11
src/qqq/pages/dashboards/Widgets/TableCard.tsx
View File

@ -68,6 +68,10 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
const [dropdownLabel, setDropdownLabel] = useState<string>("");
const [dropdownIcon, setDropdownIcon] = useState<string>(openArrowIcon);
console.log(`data: ${JSON.stringify(data?.rows)}`);
console.log(`bool: ${data && data?.columns && !data?.rows}`);
console.log(`norowsfound: ${noRowsFoundHTML}`);
const openDropdown = ({currentTarget}: any) =>
{
setDropdown(currentTarget);
@ -78,7 +82,6 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
setDropdown(null);
setDropdownValue(currentTarget.innerText || dropdownValue);
setDropdownIcon(openArrowIcon);
alert(widgetIndex);
dropdownOnChange(currentTarget.innerText || dropdownValue, widgetIndex);
};
@ -114,7 +117,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
}, [dropdownOptions]);
return (
<Card>
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Grid container>
<Grid item xs={6}>
<MDBox pt={3} px={3}>
@ -159,7 +162,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
</Grid>
<MDBox py={1}>
{
data && data.rows && data.rows.length > 0 ? (
data && data.columns && !noRowsFoundHTML ? (
<DataTable
table={data}
entriesPerPage={false}
@ -167,7 +170,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
isSorted={false}
noEndBorder
/>
) : data && data.rows && data.rows.length == 0 ? (
) : noRowsFoundHTML ? (
<MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
<MDTypography
variant="subtitle2"