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

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

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

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

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

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

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

@ -77,7 +77,7 @@ function ShipmentsByWarehouseTable({title, rows, shadow}: Props): JSX.Element
{title ? ( {title ? (
<TableHead> <TableHead>
<MDBox component="tr" width="max-content" display="block" mb={1.5}> <MDBox component="tr" width="max-content" display="block" mb={1.5}>
<MDTypography variant="h6" component="td"> <MDTypography variant="h5" component="td">
{title} {title}
</MDTypography> </MDTypography>
</MDBox> </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] [data, color]
)} )}
<MDBox pt={3} pb={1} px={1}> <MDBox pt={3} pb={1} px={1}>
<MDTypography variant="h6" textTransform="capitalize"> <MDTypography variant="h5" textTransform="capitalize">
{title} {title}
</MDTypography> </MDTypography>
<MDTypography component="div" variant="button" color="text" fontWeight="light"> <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>
)} )}
<MDBox mt={icon.component ? -2 : 0}> <MDBox mt={icon.component ? -2 : 0}>
{title && <MDTypography variant="h6">{title}</MDTypography>} {title && <MDTypography variant="h5">{title}</MDTypography>}
<MDBox mb={2}> <MDBox mb={2}>
<MDTypography component="div" variant="button" color="text"> <MDTypography component="div" variant="button" color="text">
<MDBox display="flex" justifyContent="space-between"> <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>
)} )}
<MDBox mt={icon.component ? -2 : 0}> <MDBox mt={icon.component ? -2 : 0}>
{title && <MDTypography variant="h6">{title}</MDTypography>} {title && <MDTypography variant="h5">{title}</MDTypography>}
<MDBox mb={2}> <MDBox mb={2}>
<MDTypography component="div" variant="button" color="text"> <MDTypography component="div" variant="button" color="text">
{description} {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>
)} )}
<MDBox mt={icon.component ? -2 : 0}> <MDBox mt={icon.component ? -2 : 0}>
{title && <MDTypography variant="h6">{title}</MDTypography>} {title && <MDTypography variant="h5">{title}</MDTypography>}
<MDBox mb={2}> <MDBox mb={2}>
<MDTypography component="div" variant="button" color="text"> <MDTypography component="div" variant="button" color="text">
{description} {description}

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

@ -65,7 +65,8 @@ interface Props
function MultiStatisticsCard({title, data}: Props): JSX.Element function MultiStatisticsCard({title, data}: Props): JSX.Element
{ {
return ( return (
<Card> <Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Grid container> <Grid container>
<Grid item xs={12}> <Grid item xs={12}>
<MDBox pt={3} px={3}> <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 ( return (
<Card sx={{height: "100%"}}> <Card sx={{height: "100%"}}>
<MDBox display="flex" justifyContent="space-between" alignItems="center" pt={2} px={2}> <MDBox display="flex" justifyContent="space-between" alignItems="center" pt={2} px={2}>
<MDTypography variant="h6">{title}</MDTypography> <MDTypography variant="h5">{title}</MDTypography>
</MDBox> </MDBox>
<MDBox mt={3}> <MDBox mt={3}>
<Grid container alignItems="center"> <Grid container alignItems="center">

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

@ -52,7 +52,7 @@ function ShipmentsByWarehouseData(): JSX.Element
warehouse warehouse
</Icon> </Icon>
</MDBox> </MDBox>
<MDTypography variant="h6" sx={{mt: 2, mb: 1, ml: 2}}> <MDTypography variant="h5" sx={{mt: 2, mb: 1, ml: 2}}>
Shipments by Warehouse Shipments by Warehouse
</MDTypography> </MDTypography>
</MDBox> </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 interface Props
{ {
title: string;
data: StatisticsCardData; data: StatisticsCardData;
increaseIsGood: boolean; increaseIsGood: boolean;
dropdown?: { dropdown?: {
@ -39,9 +40,9 @@ interface Props
[key: string]: any; [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 = ""; let percentageString = "";
if (percentageAmount) 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] [chart, color]
)} )}
<MDBox pt={3} pb={1} px={1}> <MDBox pt={3} pb={1} px={1}>
<MDTypography variant="h6" textTransform="capitalize"> <MDTypography variant="h5" textTransform="capitalize">
{title} {title}
</MDTypography> </MDTypography>
<MDTypography component="div" variant="button" color="text" fontWeight="light"> <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 [dropdownLabel, setDropdownLabel] = useState<string>("");
const [dropdownIcon, setDropdownIcon] = useState<string>(openArrowIcon); 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) => const openDropdown = ({currentTarget}: any) =>
{ {
setDropdown(currentTarget); setDropdown(currentTarget);
@ -78,7 +82,6 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
setDropdown(null); setDropdown(null);
setDropdownValue(currentTarget.innerText || dropdownValue); setDropdownValue(currentTarget.innerText || dropdownValue);
setDropdownIcon(openArrowIcon); setDropdownIcon(openArrowIcon);
alert(widgetIndex);
dropdownOnChange(currentTarget.innerText || dropdownValue, widgetIndex); dropdownOnChange(currentTarget.innerText || dropdownValue, widgetIndex);
}; };
@ -114,7 +117,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
}, [dropdownOptions]); }, [dropdownOptions]);
return ( return (
<Card> <Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Grid container> <Grid container>
<Grid item xs={6}> <Grid item xs={6}>
<MDBox pt={3} px={3}> <MDBox pt={3} px={3}>
@ -159,7 +162,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
</Grid> </Grid>
<MDBox py={1}> <MDBox py={1}>
{ {
data && data.rows && data.rows.length > 0 ? ( data && data.columns && !noRowsFoundHTML ? (
<DataTable <DataTable
table={data} table={data}
entriesPerPage={false} entriesPerPage={false}
@ -167,7 +170,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
isSorted={false} isSorted={false}
noEndBorder noEndBorder
/> />
) : data && data.rows && data.rows.length == 0 ? ( ) : noRowsFoundHTML ? (
<MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}> <MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
<MDTypography <MDTypography
variant="subtitle2" variant="subtitle2"